تحويل hex إلى hsl

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

hex هو الشكل الأكثر شيوعًا لكتابة الألوان على الويب: ستة رموز سداسية عشرية (أو ثمانية إن وُجدت شفافية) تمثل قيم الأحمر والأخضر والأزرق مباشرة، مثل #2E86DE. المشكلة أن هذه الرموز لا تخبرك شيئًا عن طبيعة اللون بمجرد النظر إليها؛ فلا تعرف من الرقم وحده إن كان اللون فاتحًا أم داكنًا أم مشبعًا أم باهتًا.

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

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

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

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

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

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

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

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

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

لكن ما تراه على الشاشة هو hsl() مقرّب إلى أقرب درجة صحيحة ونسبة مئوية صحيحة، وهذا التقريب هو موضع الفارق. فحص جميع الألوان الـ 16,777,216 نفسها بعد التقريب أظهر أن 1,775,570 لونًا فقط — أي 10.58% — تعود إلى كود hex الأصلي بالضبط عند التحويل رجوعًا، بينما 15,001,646 لونًا (89.42%) تعود بلون مختلف قليلاً.

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

والفارق الناتج صغير عادة: التغيّر الأكبر بين القنوات الثلاث كان درجة واحدة في 54.38% من الحالات ودرجتين في 32.06%، وأسوأ حالة مقيسة هي #02E4E6 التي تُعرض كـ hsl(181, 98%, 45%) ثم تعود عند التحويل رجوعًا إلى #02DFE3. لذلك استخدم hsl() الظاهر هنا لفهم اللون وتعديله، ثم احتفظ بكود hex الأصلي كمرجع للتخزين. وحالة خاصة: عند تساوي الأحمر والأخضر والأزرق — أي الرمادي — لا يوجد اتجاه محدد على عجلة الألوان، والمتعارف عليه هو عرض الصبغة صفرًا.

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

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