تحويل hsl إلى hex

ما معنى تحويل hsl إلى hex؟

hsl() تصف اللون بثلاث قيم يفهمها الإنسان: الصبغة (موضعه على عجلة الألوان من 0 إلى 360 درجة)، والتشبع (نسبة مئوية تحدد قوة اللون)، والإضاءة (نسبة مئوية تحدد قربه من الأسود أو الأبيض). كثيرًا ما يبدأ اختيار اللون من هنا: تحريك شريط الصبغة حتى تصل إلى الدرجة المطلوبة، ثم ضبط التشبع والإضاءة بالعين.

لكن معظم أدوات التصميم وملفات التنسيق ما زالت تتوقع كود hex: ستة رموز سداسية عشرية مثل #2E86DE. تحويل hsl إلى hex يأخذ القيم الثلاث التي اخترتها وينتج الكود الذي تحتاجه فعليًا لصقه في مكانه.

الأداة هنا تحسب النتيجة فور الكتابة، بلا زر إرسال ولا رفع أي بيانات إلى خادم؛ كل الحساب يجري داخل متصفحك.

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

1. أدخل قيمة hsl() كاملة أو أرقامها الثلاثة فقط، في الحقل النصي أعلى الصفحة، أو استخدم حقول الصبغة والتشبع والإضاءة الثلاثة أسفله لضبط كل رقم على حدة.
2. شاهد عينة اللون وكود hex يتحدثان فورًا، مع كل تعديل في أي حقل، دون الحاجة لأي زر تأكيد.
3. انقر لنسخ كود hex أو أي صيغة أخرى، من صف الصيغ الأخرى الذي يعرض rgb() و hsl() المكافئتين، أو اتبع رابط أقرب لون مسمّى أو منتقي الألوان الكامل.

فيمَ يفيد هذا الاتجاه

هذا الاتجاه يخدم لحظة مختلفة: أنت لا تملك كودًا جاهزًا، بل اخترت لونًا بالعين — بتحريك شريط الصبغة، أو بضبط التشبع والإضاءة حتى تحصل على الدرجة المطلوبة — والآن تحتاج الكود الذي يقبله CSS أو ملف تصميم أو مكتبة أيقونات.

هذا شائع أيضًا عند نسخ لوحة ألوان من تصميم مبني على hsl()، إذ تعرّف كثير من أنظمة التصميم ألوانها بالصبغة والتشبع والإضاءة لأنها أسهل في الشرح والتدرّج، ثم تحتاج لتصدير القيم النهائية كأكواد hex لملف تنسيق لا يفهم سوى الشكل السداسي عشري.

في الحالتين، الخطوة الوحيدة المطلوبة هي إدخال الأرقام الثلاثة أو اللصق المباشر لقيمة hsl()، والحصول فورًا على الكود الجاهز دون حساب يدوي.

حدود صادقة يجب معرفتها

في هذا الاتجاه لا تفقد شيئًا: الأرقام الثلاثة التي تكتبها — الصبغة والتشبع والإضاءة — تتحول إلى كود hex واحد بلا تقريب إضافي، لأن التحويل من HSL إلى RGB نفسه دقيق تمامًا رياضيًا. وقد جرى التحقق منه بمقارنته بمكتبة colorsys في بايثون على أكثر من 60 ألف لون دون أي اختلاف.

لكن يجدر الانتباه إلى شيء آخر: القيم الصحيحة المعروضة لـ HSL (درجة كاملة ونسبة مئوية كاملة) أقل عددًا بكثير من ألوان sRGB الممكنة. توجد 360 درجة × 101 نسبة تشبع × 101 نسبة إضاءة، أي 3,672,360 تركيبة فقط، مقابل 16,777,216 لون ممكن — أقل من ربعها — ما يعني أن أكثر من كود hex واحد قد يُعرض بنفس أرقام hsl() المقرّبة الثلاثة، وأن ما لا يقل عن 78.11% من الألوان تتشارك تركيبة مع غيرها.

قياس ذلك على جميع الألوان أظهر أن التحويل من hex إلى HSL المقرّب ثم رجوعًا يستعيد اللون الأصلي بالضبط في 10.58% فقط من الحالات (1,775,570 لونًا)، والباقي 89.42% يعود بلون مختلف بمقدار درجة أو درجتين غالبًا؛ أسوأ حالة مقيسة هي #02E4E6 التي تعود #02DFE3. أما بالدقة الكاملة دون تقريب فالذهاب والعودة دقيق على الألوان الـ 16,777,216 جميعها.

عمليًا هذا يعني أن كود hex الذي تحصل عليه هنا هو الترجمة الدقيقة للأرقام الثلاثة التي أدخلتها أنت؛ لكن إن كنت قد حصلت على هذه الأرقام من تقريب سابق لكود hex آخر لا من اختيار يدوي، فلا تتوقع أن يكون الكود الناتج مطابقًا لذلك الأصل حرفيًا. وحالة خاصة: عند ضبط التشبع على صفر يصبح اللون رماديًا ولا تؤثر الصبغة إطلاقًا في النتيجة.

لماذا الأداة مجانية؟

التحويل يجري بالكامل داخل متصفحك بجافاسكربت عادي، فلا تُرسل أي قيمة إلى خادم ولا تُخزَّن في أي مكان. لذلك لا حساب مطلوب ولا تسجيل دخول، ولا حد لعدد مرات الاستخدام، ولا علامة مائية تُضاف على الكود الناتج.