ما هو محوّل RGB إلى HSL؟
تتيح لك هذه الأداة تحويل أي لون مكتوب بنظام RGB (الأحمر والأخضر والأزرق، وكل منها بين 0 و255) إلى نظام HSL (درجة اللون، والتشبّع، والإضاءة). يُعدّ نظام HSL أكثر سهولة وبداهة بالنسبة للمصمّمين، لأنه يفصل بين درجة اللون نفسها (Hue) ومدى حيويّته أو صفائه (Saturation) ومدى فتوحه أو قتامته (Lightness). والتحويل هنا عالمي وموحّد، لا يرتبط بجهاز معيّن ولا بدولة بعينها.
كيفية الاستخدام
أدخل قيم الأحمر والأخضر والأزرق للون الذي تريده، وكل قيمة بين 0 و255. ثم اضغط على زر الحساب لتحصل على ثلاثية HSL المكافئة، جاهزة لنسخها مباشرة داخل CSS بالصيغة hsl(H, S%, L%).
شرح المعادلة
نبدأ بتطبيع كل قناة لونية بقسمتها على 255 لتصبح ضمن المجال من 0 إلى 1. ولنفترض أن max هي أكبر القيم الثلاث وmin هي أصغرها، وأن \(\Delta = \max - \min\). تُحسب الإضاءة بالعلاقة \(L = (\max + \min) / 2\). أما التشبّع فيُحسب بالعلاقة \(S = \Delta / (1 - \lvert 2L - 1 \rvert)\)، ويساوي 0 عندما تكون \(\Delta = 0\) (أي لون رمادي). وتُشتقّ درجة اللون من القناة الأكبر قيمةً، ثم تُضرب في 60°، وتُلفّ في النهاية لتقع ضمن المجال من 0 إلى 360°.
$$L = \frac{C_{\max} + C_{\min}}{2}, \quad S = \frac{C_{\max} - C_{\min}}{1 - \lvert 2L - 1 \rvert}$$$$H = 60^{\circ} \times \begin{cases} \dfrac{G^{\prime} - B^{\prime}}{\Delta} \bmod 6 & C_{\max} = R^{\prime} \\[0.6em] \dfrac{B^{\prime} - R^{\prime}}{\Delta} + 2 & C_{\max} = G^{\prime} \\[0.6em] \dfrac{R^{\prime} - G^{\prime}}{\Delta} + 4 & C_{\max} = B^{\prime} \end{cases}$$
مثال محلول
لنأخذ لون الطماطم الأحمر RGB(255, 99, 71). بعد التطبيع: \(R=1\)، \(G=0.388\)، \(B=0.278\). وعليه: \(\max=1\)، \(\min=0.278\)، \(\Delta=0.722\). الإضاءة $$L = (1 + 0.278)/2 = 0.639 \leftarrow 63.9\%$$ والتشبّع $$S = 0.722 / (1 - \lvert 2 \cdot 0.639 - 1 \rvert) = 0.722 / 0.722 = 1 \leftarrow 100\%$$ وبما أن \(\max = R\)، فإن $$H = 60 \times ((0.388 - 0.278)/0.722) = 60 \times 0.1525 \approx 9.13^{\circ}$$ والنتيجة: hsl(9.13, 100%, 63.92%).
الأسئلة الشائعة
لماذا يساوي التشبّع صفراً في الألوان الرمادية؟ عندما تتساوى القنوات الثلاث جميعها، تصبح \(\Delta = 0\)، فلا توجد أي معلومة لونية ويغدو التشبّع غير معرّف — وبحسب العُرف المتّبع يُضبط على القيمة 0.
هل تُقرّب قيم H وS وL؟ تُعرض القيم مقرّبة إلى منزلتين عشريتين، لكن القيم المحسوبة فعلياً تحتفظ بدقتها الكاملة.
هل يمكنني التحويل بالاتجاه المعاكس؟ نعم — التحويل من HSL إلى RGB هو العملية العكسية، ويعتمد على قطاع درجة اللون وقيمة الكروما.
