ImageColorPicker.com

محول HSL إلى HEX

حوّل أي لون من HSL إلى HEX — فورًا ومجانيًا

#3398DB

ألصق أي قيمة لون — سنكشف عن الصيغة تلقائيًا.

H
S
L
نتيجة HEX

هذا اللون بجميع الصيغ

ملف CMYK: Coated FOGRA39 (الإعداد الافتراضي لـ Photoshop في أوروبا)

اختيار لون في HSL مريح، لكن ملفات الأنماط وتسليمات التصميم ووثائق العلامة لا تزال تعمل على HEX. هذا المحوّل يسد الفجوة ويعطيك الكود المكوّن من ستة أرقام لأي تركيبة من الدرجة والتشبع والإضاءة.

كيف يعمل تحويل HSL إلى HEX

  1. حوّل التشبع والإضاءة إلى كسور: 60% يصبح 0.6.
  2. احسب الكروما C = (1 − |2L − 1|) × S — هذا يحدد مدى ابتعاد اللون عن الرمادي.
  3. استخدم الدرجة لتضع تلك الكروما على قنوات الأحمر والأخضر والأزرق، ثم حرك القيم الثلاث بكمية L − C/2.
  4. اضرب كل قناة في 255، قربها، واكتبها كرقمين سداسيين عشريين.

مثال عملي

HSL hsl(204, 70%, 53%)=HEX #3398DB

القرْب يحدث مرة واحدة، في الخطوة الأخيرة، عندما تُجبر كل قناة على قيمة صحيحة بين 0 و255. النتيجة أقرب كود HEX لإدخال HSL وعادةً ما تكون مطابقة لما يظهره برنامج التصميم.

شرح HSL و HEX

ما هو HSL؟

HSL يقسّم اللون إلى درجة اللون (hue) من 0–360° على عجلة الألوان، التشبع (saturation) — مدى حيوية اللون من 0–100%، والسطوع (lightness) — مدى إشراقه من 0–100%. بما أن كل جزء يطابق طريقة وصف الناس للألوان، فـ HSL هي أسهل صيغة لبناء درجات اللون، الظلال، ولوحات ألوان متناسقة — يدويًا أو بالبرمجة.

البناء:
hsl(H, S%, L%)
النطاق:
0–360°, 0–100%, 0–100%
الأفضل لـ:
لوحات ألوان، درجات وظلال، التخصيص الموضوعي

ما هو HEX؟

كود HEX هو رقم سداسي عشري مكوّن من ست خانات يعبّر عن قنوات الأحمر والأخضر والأزرق في اللون مسبوقًا بعلامة #. كل زوج من الخانات يغطي قناة واحدة من 00 (لا شيء) إلى FF (كامل)، مما يوفّر نفس 16.7 مليون لون مثل RGB بصيغة أقصر بكثير. تُستخدم HEX بشكل افتراضي في CSS وأدوات التصميم وإرشادات العلامات التجارية.

البناء:
#RRGGBB
النطاق:
00–FF لكل قناة
الأفضل لـ:
CSS، تسليم التصميم، إرشادات العلامة التجارية

جدول تحويل من HSL إلى HEX

أكثر ألوان CSS شيوعًا، محوّلة من HSL إلى HEX.

اللونHSLHEX
blackhsl(0, 0%, 0%)#000000
whitehsl(0, 0%, 100%)#FFFFFF
redhsl(0, 100%, 50%)#FF0000
limehsl(120, 100%, 50%)#00FF00
bluehsl(240, 100%, 50%)#0000FF
yellowhsl(60, 100%, 50%)#FFFF00
orangehsl(39, 100%, 50%)#FFA600
tealhsl(180, 100%, 25%)#007F80
purplehsl(300, 100%, 25%)#80007F
grayhsl(0, 0%, 50%)#808080

مزيد من محولات الألوان

أسئلة شائعة

حوّل التشبع والإضاءة إلى كسور: 60% يصبح 0.6. احسب الكروما C = (1 − |2L − 1|) × S — هذا يحدد مدى ابتعاد اللون عن الرمادي. استخدم الدرجة لتضع تلك الكروما على قنوات الأحمر والأخضر والأزرق، ثم حرك القيم الثلاث بكمية L − C/2. اضرب كل قناة في 255، قربها، واكتبها كرقمين سداسيين عشريين.

القرْب يحدث مرة واحدة، في الخطوة الأخيرة، عندما تُجبر كل قناة على قيمة صحيحة بين 0 و255. النتيجة أقرب كود HEX لإدخال HSL وعادةً ما تكون مطابقة لما يظهره برنامج التصميم.

كود HEX هو رقم سداسي عشري مكوّن من ست خانات يعبّر عن قنوات الأحمر والأخضر والأزرق في اللون مسبوقًا بعلامة #. كل زوج من الخانات يغطي قناة واحدة من 00 (لا شيء) إلى FF (كامل)، مما يوفّر نفس 16.7 مليون لون مثل RGB بصيغة أقصر بكثير. تُستخدم HEX بشكل افتراضي في CSS وأدوات التصميم وإرشادات العلامات التجارية.

نعم. زر التبديل بجانب الحقل يأخذك إلى محول HEX إلى HSL، ويعمل بنفس الطريقة تمامًا. الاتجاهان يستخدمان نفس الصيغة، فقط مُطبقة بالعكس.

ابنِ لوحة الألوان في HSL، ثم صدّرها كـ HEX. اللوحة تحافظ على منطقها — نفس الدرجة، إضاءة متدرجة — بينما الكود المرسل يبقى بالصيغة التي يتوقعها المطوّرون.