محوّل ألوان HSL إلى RGB

أدخل الحساب

التدرّج (0-360°)

التشبّع (0-100%)

الإضاءة (0-100%)

نتائج

لون RGB

rgb(٦٤, ١٢٨, ١٩١)

الأحمر	٦٤
الأخضر	١٢٨
الأزرق	١٩١

ما هو محوّل HSL إلى RGB؟

تقوم هذه الأداة بتحويل لون مكتوب بنظام HSL — أي التدرّج (Hue) والتشبّع (Saturation) والإضاءة (Lightness) — إلى نظام RGB المستخدَم في الشاشات وأكواد CSS وملفات الصور. يُعدّ نظام HSL سهل الفهم بالنسبة للمصمّمين لأنه يفصل بين «اللون نفسه» (التدرّج) ودرجة نقائه (التشبّع) ومدى سطوعه (الإضاءة)، بينما يصف نظام RGB اللون ذاته بمقادير من الضوء الأحمر والأخضر والأزرق. التحويل دقيق ويعمل مع أي قيمة HSL صالحة.

The HSL color model: hue (angle), saturation (radius) and lightness (height).

طريقة الاستخدام

أدخل التدرّج بالدرجات (من 0 إلى 360)، والتشبّع كنسبة مئوية (من 0 إلى 100)، والإضاءة كنسبة مئوية (من 0 إلى 100). تعرض الأداة القيمة المكافئة على هيئة rgb(r, g, b)، حيث تتراوح كل قيمة بين 0 و255، إضافةً إلى عيّنة لونية حيّة لتتأكّد من النتيجة بصريًا.

شرح المعادلة

أولًا يُحوَّل كلّ من التشبّع والإضاءة إلى نطاق من 0 إلى 1. ثم يُحسب التشبّع اللوني (Chroma) بالعلاقة \(C = (1 - |2L - 1|)\,S\) وهو مقدار حيوية اللون الناتج. وتُستخدم قيمة مساعِدة \(X = C\left(1 - \left|\left(\tfrac{H}{60}\bmod 2\right) - 1\right|\right)\) للتعامل مع المزج الوسيط داخل كل قطاع تدرّج بمقدار 60°، أما \(m = L - \tfrac{C}{2}\) فيزيح القيم جميعًا لتطابق الإضاءة المطلوبة. وبحسب القطاع الذي يقع فيه التدرّج (بمقدار 60° لكلّ قطاع)، تُوزَّع القيم C وX و0 على R وG وB بترتيب محدّد، ثم تُضاف m وتُضرب كل قناة في 255 وتُقرَّب إلى أقرب عدد صحيح.

$$(R,G,B) = \left((R'+m)\cdot 255,\ (G'+m)\cdot 255,\ (B'+m)\cdot 255\right)$$

How the intermediate values C, X and m build each RGB channel.

مثال محلول

للون HSL(210°، 50%، 50%): تكون \(S = 0.5\) وL = 0.5، فيكون \(C = (1 - |0|)\cdot 0.5 = 0.5\). ولأن \(H/60 = 3.5\) فإن \((3.5 \bmod 2) = 1.5\) وبالتالي \(X = 0.5\cdot(1 - |1.5 - 1|) = 0.25\)، وm = 0.5 − 0.25 = 0.25. يقع التدرّج 210° في القطاع الثالث (من 180° إلى 240°)، ما يعطي \((R',G',B') = (0,\ X,\ C) = (0,\ 0.25,\ 0.5)\). وبإضافة m والضرب في 255 نحصل على: \(R = 64\)، \(G = 128\)، \(B = 191\) ← rgb(64, 128, 191).

A single color shown as its HSL inputs and the resulting RGB output.

الأسئلة الشائعة

ما النطاقات المسموح بها للمدخلات؟ التدرّج من 0 إلى 360 درجة، والتشبّع والإضاءة من 0 إلى 100 بالمئة.

لماذا تُقرَّب القيم؟ لأن قنوات RGB يجب أن تكون أعدادًا صحيحة من 0 إلى 255، لذا تُقرَّب النتيجة المحسوبة إلى أقرب عدد صحيح.

هل يمكن الحصول على اللون الرمادي؟ نعم — اضبط التشبّع على 0 مع أي قيمة للتدرّج، فتتساوى قيم R وG وB جميعًا مع قيمة الإضاءة بعد تحويلها إلى نطاق 0–255.