ما هو محول HSL إلى RGB؟
اختصار HSL يعني درجة اللون (Hue) والتشبّع (Saturation) والإضاءة (Lightness)، وهي طريقة بديهية لوصف الألوان؛ إذ تمثّل درجة اللون زاوية على عجلة الألوان (من 0 إلى 360 درجة)، ويعبّر التشبّع عن شدة اللون (من 0 إلى 100%)، أما الإضاءة فتحدد مدى فتوح اللون أو قتامته (من 0 إلى 100%). أما نظام RGB فيصف اللون نفسه عبر ثلاث قنوات هي الأحمر والأخضر والأزرق، وتتراوح قيمة كل منها بين 0 و255، وهو النظام المعتمد في الشاشات وأكواد CSS وملفات الصور. يقوم هذا المحوّل بترجمة لون HSL إلى ما يقابله تمامًا بنظام RGB.
كيفية الاستخدام
أدخل درجة اللون بالدرجات، والتشبّع كنسبة مئوية، والإضاءة كنسبة مئوية. ستحصل فورًا على القيمة المقابلة بصيغة rgb(r, g, b) مع معاينة حية للون تتيح لك التأكد منه بصريًا.
شرح المعادلة
نبدأ بتحويل قيمتي التشبّع (S) والإضاءة (L) إلى كسور (من 0 إلى 1). ويُحسب التلوّن (Chroma) الذي يمثّل نقاء اللون كما يلي: \(C = (1 - |2L - 1|)\cdot S\). أما المكوّن الوسيط فهو \(X = C\,(1 - |(H/60 \bmod 2) - 1|)\)، وتعمل قيمة المطابقة \(m = L - C/2\) على إزاحة كل القيم إلى مستوى الإضاءة الصحيح. ثم تُقسَّم درجة اللون إلى ستة قطاعات بزاوية 60 درجة لكل منها، ويُسنِد كل قطاع القيم C وX و0 إلى خانات R وG وB بترتيب محدد. وأخيرًا نضيف m إلى كل مكوّن ونضربه في 255 (مع التقريب إلى أقرب عدد صحيح).
$$(R,G,B) = \big( (R_1+m)\cdot 255,\; (G_1+m)\cdot 255,\; (B_1+m)\cdot 255 \big)$$مثال تطبيقي
لنأخذ اللون HSL(210°، 50%، 60%): تكون \(S = 0.5\) و \(L = 0.6\). ومنها
$$C = (1 - |1.2 - 1|) \times 0.5 = (1 - 0.2) \times 0.5 = 0.4.$$وبما أن \(H/60 = 3.5\)، فإن
$$X = 0.4 \times (1 - |3.5 \bmod 2 - 1|) = 0.4 \times (1 - 0.5) = 0.2.$$و \(m = 0.6 - 0.2 = 0.4\). القطاع الثالث (حيث \(3 \le H/60 < 4\)) يعطي \((R',G',B') = (0, X, C) = (0, 0.2, 0.4)\). نضيف m فنحصل على \((0.4, 0.6, 0.8) \times 255 =\) (102, 153, 204).
الأسئلة الشائعة
لماذا تظهر أرقام RGB مقرّبة؟ لأن قنوات RGB أعداد صحيحة تتراوح بين 0 و255، لذا تُقرَّب القيم الناتجة إلى أقرب عدد صحيح.
ماذا ينتج عند تشبّع 0%؟ ينتج لون رمادي خالٍ من التشبّع تعتمد قيمته على الإضاءة فقط، حيث تتساوى قنوات RGB الثلاث.
هل تُلَفّ درجة اللون إذا أدخلت قيمة تتجاوز 360؟ نعم. تؤخذ درجة اللون بباقي القسمة على 360، لذا تتصرف القيمة 370° كأنها 10°.
