ما هو محوّل HSL إلى Hex؟
تحوّل هذه الأداة لونًا مكتوبًا بنموذج HSL — أي التدرّج (Hue) والتشبّع (Saturation) والإضاءة (Lightness) — إلى الصيغة الست عشرية (Hex) المستخدمة في CSS وبرامج التصميم وتطوير الويب. يتميّز نموذج HSL بأنه بديهي للإنسان: فالتدرّج يحدّد اللون على عجلة الألوان، والتشبّع يتحكّم في حيويته ونقائه، والإضاءة تحدّد مدى قتامته أو سطوعه. أما صيغة Hex (مثل #3F7FBF) فهي الصيغة التي تتعامل معها المتصفحات والأدوات فعليًا.
طريقة الاستخدام
أدخل قيمة التدرّج من 0 إلى 360 درجة، والتشبّع من 0 إلى 100 بالمئة، والإضاءة من 0 إلى 100 بالمئة، ثم اطّلع على رمز Hex الناتج، وقيم قنوات RGB، ومربّع معاينة حيّ للّون. هذا التحويل عالمي ويصلح لأي لون دون الحاجة إلى أي برنامج.
شرح المعادلة
يبدأ التحويل بإيجاد قيمة الكروما \(C = (1 - |2L - 1|)\cdot S\)، حيث يكون كلٌّ من S وL كسرًا ضمن النطاق 0–1. ويتولّى المتغيّر المساعد \(X = C\left(1 - \left|\left(\tfrac{H}{60}\bmod 2\right) - 1\right|\right)\) معالجة التدرّج بين الألوان الأساسية، بينما يرفع معامل السطوع \(m = L - \tfrac{C}{2}\) النتيجة إلى مستوى الإضاءة الصحيح. وبحسب القطاع الذي يقع فيه التدرّج من بين قطاعات الـ 60°، تُسنَد قيم القنوات (R′,G′,B′) من بين C وX و0. وتُحسب كل قناة نهائية بالعلاقة \(\text{round}((c^{\prime} + m)\cdot 255)\)، أما سلسلة Hex فهي ببساطة القيمة الست عشرية المكوّنة من رقمين لكلٍّ من R وG وB مدموجة معًا.
$$\text{Hex} = \texttt{\#}\,\text{HH}_{R}\,\text{HH}_{G}\,\text{HH}_{B}$$$$\text{where}\quad \left\{ \begin{aligned} C &= (1 - |2L - 1|)\cdot S \\ X &= C\left(1 - \left|\left(\tfrac{H}{60}\bmod 2\right) - 1\right|\right) \\ m &= L - \tfrac{C}{2} \\ (R,G,B) &= \text{round}\big((R^{\prime}+m,\,G^{\prime}+m,\,B^{\prime}+m)\cdot 255\big) \\ H &= \text{Hue},\quad S = \dfrac{\text{Sat}}{100},\quad L = \dfrac{\text{Light}}{100} \end{aligned} \right.$$
مثال محلول
لِلّون HSL(210, 50%, 50%): يكون S = 0.5، وL = 0.5، إذن \(C = (1 - |0|)\times 0.5 = 0.5\). وبما أن \(H/60 = 3.5\)، فإن \((3.5 \bmod 2) = 1.5\) ومنه \(X = 0.5\times(1 - |0.5|) = 0.25\). ثم \(m = 0.5 - 0.25 = 0.25\). ويقع التدرّج 210 في القطاع الثالث (180–240)، ما يعطي (R′,G′,B′) = (0, X, C). وعليه: \(R = \text{round}(0.25\times 255) = 64\)، وG = round(0.5 × 255) = 128، و\(G = \text{round}(0.5\times 255) = 128\)، و\(B = \text{round}(0.75\times 255) = 191\) ← #4080BF.
الأسئلة الشائعة
هل يدور التدرّج عند بلوغه نهايته؟ نعم — فالتدرّج 360 هو نفسه الأحمر عند 0، والأداة تُعيد ضبط أي قيمة لتقع ضمن النطاق 0–360.
لماذا قد تبدو قنواتي مختلفة بمقدار وحدة واحدة؟ قد يؤدي التقريب إلى أقرب عدد صحيح إلى إزاحة قناة بمقدار ±1 مقارنةً بأدوات أخرى تكتفي بقطع الكسور؛ والتقريب هو الخيار الأدقّ.
هل يمكن الحصول على لون رمادي؟ نعم — اضبط التشبّع على 0 مع أي قيمة للتدرّج، فتتساوى القنوات الثلاث جميعها عند \(\text{round}(L\times 255)\)، ما ينتج لونًا رماديًا محايدًا.
