تحويل HSL إلى HEX
أدخل الصبغة والتشبع والإضاءة لتحصل على كود HEX جاهزا للاستخدام في CSS وبرامج التصميم ودليل الهوية.
جارٍ تحميل الأداة…
المعالجة والخصوصية: تُحسب النتيجة داخل متصفحك ولا تُرسل بياناتك إلى أي خادم.
طريقة الاستخدام
- أدخل الصبغة (H)، التشبع (S) والإضاءة (L).
- تظهر النتيجة فورًا وتتحدّث مع كل تعديل.
- انسخ النتيجة، أو انسخ رابطًا يحفظ القيم نفسها لمشاركتها.
طريقة الحساب
مع 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. ثم: تُقرّب كل قناة إلى عدد صحيح وتُكتب بخانتين في النظام الست عشري: #RRGGBB.
مثال
المدخلات: الصبغة (H) = 200 °، التشبع (S) = 50 %، الإضاءة (L) = 40 %. النتيجة: كود HEX: #337799.
الحدود والملاحظات
- تُقرّب قنوات RGB إلى أعداد صحيحة، فقد تعطي مدخلات متقاربة النتيجة نفسها.
- تُعامل كل القيم على أنها في فضاء sRGB، وهو الفضاء الافتراضي للويب، وليس Display P3 أو Adobe RGB.
أسئلة شائعة عن هذه الأداة
لماذا قد تعطي قيم HSL متقاربة كود HEX نفسه؟
لأن HEX يقرّب كل قناة إلى عدد صحيح من 0 إلى 255، فالفروق الصغيرة جدا في HSL قد تختفي بعد التقريب.
ماذا تعني الإضاءة 50% في HSL؟
عند 50% يظهر اللون في أزهى صورة لتشبعه، وكلما اقتربت من 0% اتجه إلى الأسود، ومن 100% إلى الأبيض.
هل يظهر كود HEX بأحرف كبيرة أم صغيرة؟
يظهر بأحرف كبيرة مثل #1E90FF، والمتصفحات تقبل الحالتين دون أي فرق في اللون.
