اختيار لون في HSL مريح، لكن ملفات الأنماط وتسليمات التصميم ووثائق العلامة لا تزال تعمل على HEX. هذا المحوّل يسد الفجوة ويعطيك الكود المكوّن من ستة أرقام لأي تركيبة من الدرجة والتشبع والإضاءة.
كيف يعمل تحويل HSL إلى HEX
- حوّل التشبع والإضاءة إلى كسور: 60% يصبح 0.6.
- احسب الكروما C = (1 − |2L − 1|) × S — هذا يحدد مدى ابتعاد اللون عن الرمادي.
- استخدم الدرجة لتضع تلك الكروما على قنوات الأحمر والأخضر والأزرق، ثم حرك القيم الثلاث بكمية L − C/2.
- اضرب كل قناة في 255، قربها، واكتبها كرقمين سداسيين عشريين.
مثال عملي
القرْب يحدث مرة واحدة، في الخطوة الأخيرة، عندما تُجبر كل قناة على قيمة صحيحة بين 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.
| اللون | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |