HSL يصف اللون بالطريقة التي يتكلم بها الناس: أي درجة لونية، مدى التشبع، ومدى الإضاءة. تحويل كود HEX إلى HSL أسرع طريقة للحصول على شكل يمكن تعديله فعليًا — تفتيح، تخفيف التشبع، أو بناء سُلّم لوني كامل.
كيف يعمل تحويل HEX إلى HSL
- حوّل كود HEX إلى RGB واقسم كل قناة على 255، حتى تصبح القيم الثلاث بين 0 و1.
- ابحث عن أكبر وأصغر القيم من الثلاث. متوسطهما هو الإضاءة L.
- الفرق بينهما يحدد التشبع S: اقسمه على (2 − max − min) للألوان الفاتحة، أو على (max + min) للألوان الداكنة.
- القناة التي تحوي القيم القصوى تُحدد اللون H — الأحمر عند 0°، الأخضر عند 120°، الأزرق عند 240° — والقناتان الأخريان يحددان موضع الدرجة داخل ذلك القطاع.
مثال عملي
الرياضيات دقيقة، لكن قيم HSL عادةً تُقرب لدرجات كاملة ونسب مئوية. لذلك التحويل العكسي قد يبعد بضع خطوات RGB عن الأصل — غير مرئي عمليًا، لكن من الجيد معرفته إذا كررت التحويل ذهابًا وإيابًا.
شرح HEX و HSL
ما هو HEX؟
كود HEX هو رقم سداسي عشري مكوّن من ست خانات يعبّر عن قنوات الأحمر والأخضر والأزرق في اللون مسبوقًا بعلامة #. كل زوج من الخانات يغطي قناة واحدة من 00 (لا شيء) إلى FF (كامل)، مما يوفّر نفس 16.7 مليون لون مثل RGB بصيغة أقصر بكثير. تُستخدم HEX بشكل افتراضي في CSS وأدوات التصميم وإرشادات العلامات التجارية.
- البناء:
- #RRGGBB
- النطاق:
- 00–FF لكل قناة
- الأفضل لـ:
- CSS، تسليم التصميم، إرشادات العلامة التجارية
ما هو HSL؟
HSL يقسّم اللون إلى درجة اللون (hue) من 0–360° على عجلة الألوان، التشبع (saturation) — مدى حيوية اللون من 0–100%، والسطوع (lightness) — مدى إشراقه من 0–100%. بما أن كل جزء يطابق طريقة وصف الناس للألوان، فـ HSL هي أسهل صيغة لبناء درجات اللون، الظلال، ولوحات ألوان متناسقة — يدويًا أو بالبرمجة.
- البناء:
- hsl(H, S%, L%)
- النطاق:
- 0–360°, 0–100%, 0–100%
- الأفضل لـ:
- لوحات ألوان، درجات وظلال، التخصيص الموضوعي
جدول تحويل من HEX إلى HSL
أكثر ألوان CSS شيوعًا، محوّلة من HEX إلى HSL.
| اللون | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |