تحويل HSL إلى RGB

أدخل الصبغة والتشبع والإضاءة لتحصل على قيم RGB لاستخدامها في CSS والبرمجة وأدوات تصميم الشاشات.

جارٍ تحميل الأداة…

المعالجة والخصوصية: تُحسب النتيجة داخل متصفحك ولا تُرسل بياناتك إلى أي خادم.

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

  1. أدخل الصبغة (H)، التشبع (S) والإضاءة (L).
  2. تظهر النتيجة فورًا وتتحدّث مع كل تعديل.
  3. انسخ النتيجة، أو انسخ رابطًا يحفظ القيم نفسها لمشاركتها.

طريقة الحساب

مع S وL كسورا من 0 إلى 1: C = (1 - |2L - 1|) × S وX = C × (1 - |(H / 60) mod 2 - 1|) وm = L - C / 2، ثم تُختار (R1, G1, B1) من (C, X, 0) أو (X, C, 0) أو (0, C, X) أو (0, X, C) أو (X, 0, C) أو (C, 0, X) حسب قطاع H كل 60 درجة، وتكون كل قناة (القيمة + m) × 255. ثم: تُقرّب القنوات إلى أعداد صحيحة من 0 إلى 255.

مثال

المدخلات: الصبغة (H) = 200 °، التشبع (S) = ⁦50 %⁩، الإضاءة (L) = ⁦40 %⁩. النتيجة: كود RGB: rgb(51, 119, 153)، الأحمر (R): 51، الأخضر (G): 119.

الحدود والملاحظات

  • تُقرّب قنوات RGB إلى أعداد صحيحة، فقد تعطي مدخلات متقاربة النتيجة نفسها.
  • تُعامل كل القيم على أنها في فضاء sRGB، وهو الفضاء الافتراضي للويب، وليس Display P3 أو Adobe RGB.

أسئلة شائعة عن هذه الأداة

لماذا لا تؤثر الصبغة عندما يكون التشبع ⁦0%⁩؟

عند تشبع ⁦0%⁩ يصبح اللون رماديا وتتساوى القنوات الثلاث، فلا أثر لقيمة H في الناتج.

ماذا تعني الإضاءة ⁦50%⁩ في HSL؟

عند ⁦50%⁩ يظهر اللون في أزهى صورة لتشبعه، وكلما اقتربت من ⁦0%⁩ اتجه إلى الأسود، ومن ⁦100%⁩ إلى الأبيض.

لماذا تظهر قيم RGB أعدادا صحيحة؟

لأن كل قناة في ألوان الشاشة القياسية (8 بت) لها 256 مستوى من 0 إلى 255، فنقرّب الناتج إلى أقرب عدد صحيح.