ما هو التحويل من RGB إلى HSL؟
يصف نظام RGB اللون عبر مزج ثلاثة أضواء: الأحمر والأخضر والأزرق، وتأخذ كل قناة قيمة من 0 إلى 255. أمّا نظام HSL فيصف اللون نفسه بثلاثة أرقام أقرب إلى الحدس: درجة اللون (Hue) وهي موضع اللون على عجلة الألوان من 0 إلى 360°، والتشبّع (Saturation) أي مدى نقاء اللون من 0 إلى 100%، والإضاءة (Lightness) أي مدى فتوحته أو غمقانه من 0 إلى 100%. وكثيرًا ما يفضّل المصممون نظام HSL لأنّ تعديل الإضاءة أو التشبّع يترجَم مباشرةً إلى "أفتح" أو "أغمق" أو "أكثر حيوية" أو "أقرب إلى الرمادي".
كيفية استخدام المحوّل
أدخِل قيم الأحمر والأخضر والأزرق للون الذي تريده، على أن تكون كل قيمة بين 0 و255. سيعرض لك الحاسبة فورًا قيمة HSL المكافئة، جاهزة للصق مباشرةً في CSS بصيغة hsl(H, S%, L%).
شرح المعادلة
في البداية تُطبَّع كل قناة بقسمتها على 255 لنحصل على قيم بين 0 و1. لنفترض أنّ max هي أكبر هذه القيم وmin أصغرها. تُحسب الإضاءة بالعلاقة:
$$L = \frac{C_{max} + C_{min}}{2}$$فإذا تساوت max مع min كان اللون درجة من الرمادي، ومن ثمّ يكون كل من التشبّع ودرجة اللون مساويًا للصفر. وإلا فإنّ التشبّع:
$$S = \begin{cases} \dfrac{\Delta}{2 - C_{max} - C_{min}} & L > 0.5 \\[0.6em] \dfrac{\Delta}{C_{max} + C_{min}} & L \le 0.5 \end{cases}$$أمّا درجة اللون فتُشتق من القناة صاحبة القيمة العظمى وتُحوَّل إلى درجات (من 0 إلى 360):
$$H = 60^{\circ} \times \begin{cases} \left(\dfrac{G - B}{\Delta}\right) \bmod 6 & C_{max} = R \\[0.7em] \dfrac{B - R}{\Delta} + 2 & C_{max} = G \\[0.7em] \dfrac{R - G}{\Delta} + 4 & C_{max} = B \end{cases}$$
مثال محلول
لِلون أحمر الطماطم RGB(255, 99, 71): القيم المطبَّعة = (1.0, 0.388, 0.278). إذن max = 1.0 وmin = 0.278، وبالتالي \(L = 0.639\) ← 63.9%. وبما أنّ \(L > 0.5\)، فإنّ \(S = (1.0 - 0.278) / (2 - 1.0 - 0.278) = 0.722 / 0.722 = 1.0\) ← 100%. والقيمة العظمى هي الأحمر، فتكون \(H = 60 \times ((0.388 - 0.278) / 0.722) = 60 \times 0.1525 = 9.1^{\circ}\). النتيجة: hsl(9, 100%, 64%).
الأسئلة الشائعة
لماذا تكون درجة اللون 0 في درجات الرمادي؟ عندما تتساوى قيم الأحمر والأخضر والأزرق لا يوجد لون مهيمن، فتصبح درجة اللون غير معرَّفة ويُتَّفق عرفًا على اعتبارها 0.
هل HSL هو نفسه HSV/HSB؟ لا. يتشارك النظامان HSL وHSV في درجة اللون، لكنّهما يحسبان التشبّع والقيمة الثالثة بطريقة مختلفة؛ وهذه الأداة تُخرج قيمة HSL.
هل يمكنني لصق النتيجة في CSS؟ نعم — تقبل المتصفحات الحديثة الصيغة hsl(9, 100%, 64%) مباشرةً كقيمة لون.
