مدخل إلى تحويل الألوان من HSL إلى HEX
هذه الصفحة تختص بتحويل أي لون يُعبر عنه بنظام HSL (Hue, Saturation, Lightness) إلى رمزه السداسي العشري HEX المستخدم في CSS وأدوات التصميم. المستخدم يُدخل قيمة Hue بالدرجات (0–360)، وقيمة Saturation كنسبة مئوية (0–100%)، وقيمة Lightness كنسبة مئوية (0–100%)، وفي الحال تظهر النتيجة على شكل رمز سداسي مؤلف من ستة أرقام (مثل #4f46e5) أو صيغته المختصرة من ثلاثة أرقام (مثل #abc) إن أمكن ذلك. تتحدّث جميع الحقول الأخرى (RGB، HSV، CMYK، LAB) فوراً دون إعادة تحميل الصفحة.
ما يميز هذه الصفحة عن غيرها هو تركيزها الحصري على هذا التحويل تحديداً. نظام HSL صُمم ليكون حدسياً للإنسان – تغيير قيمة الإضاءة (Lightness) يحافظ على الصبغة (Hue) كما هي، لذلك يُستخدم في توليد لوحات الألوان وتعديل السمات. أما HEX فهو تمثيل سداسي عشري لقيم RGB ولا يحمل قناة شفافية ما لم يُستخدم الشكل الثماني الأرقام (مثل #RGBA). التحويل بين HSL وHEX مباشر وفاقد للبيانات ضمن نطاق sRGB، بخلاف التحويلات التي تشمل LAB أو CMYK التي قد تضطر لقص الألوان الخارجة عن النطاق (out-of-gamut).
ما يميز هذه الصفحة
غالبية الأدوات على الإنترنت تقدم تحويلات متعددة دفعة واحدة، لكن هذه الصفحة مكرسة لتقاطع واحد: HSL → HEX. هذا التخصص يسمح بتركيز واجهة المستخدم على دقة إدخال النسب المئوية ودرجات Hue، وإظهار الخطأ بوضوح عند عدم صحة التنسيق.
عندما يعمل مصمم على لوحة ألوان في HSL ويحتاج إلى HEX لتنفيذها في كود CSS، أو عندما يحصل مطور واجهات أمامية على قيم HSL من ملف تصميم (مثل Figma أو Sketch) ويحتاج إلى تحويلها يدوياً، فإن هذه الأداة توفر الخطوة المباشرة دون تشتيت.
التحويل هنا يتم بالكامل داخل المتصفح – لا تُرفع أي قيمة إلى أي خادم. كل المعالجة تحدث محلياً في JavaScript، لذلك يمكن الاعتماد عليها حتى في وضع عدم الاتصال بعد تحميل الصفحة.
المدخلات والمخرجات
الإدخالات
- Hue: قيمة عددية بين 0 و360، لا تحتاج علامة درجة ولا نسبة مئوية.
- Saturation: نسبة مئوية بين 0% و100%، لا بد من كتابة علامة
%. - Lightness: نسبة مئوية بين 0% و100%، مع علامة
%.
مثال صحيح: 243, 75%, 59% ينتج #4f46e5.
المخرجات
- HEX الأساسي: رمز سداسي عشري من ستة أرقام (مثل
#1E90FF). - HEX المختصر: إن كانت كل قيمة من قنوات RGB الأحمر والأخضر والأزرق يمكن تمثيلها برقم سداسي عشري واحد (مثلاً
#aabbccتصبح#abc)، يُعرض الشكل المختصر إلى جانب الشكل الكامل. - حقول أخرى: RGB (قيم 0–255)، HSV (0–360, 0–100%, 0–100%)، CMYK (نسب مئوية تقريبية)، وLAB (قيم مختبرية). كلها تُحدّث فوراً.
أي تعديل في أي حقل – سواء HSL أو RGB أو أي حقل آخر – يؤدي إلى تحديث جميع الحقول في الحال. هذا يعني أن الصفحة تعمل كمحوّل ثنائي الاتجاه بالكامل.
القواعد والحواف الاستثنائية
إذا كانت القيم المدخلة خارج النطاقات الصحيحة (Hue ليس بين 0 و360، أو Saturation/Lightness ليست بين 0% و100%)، أو إذا كان تنسيق الإدخال غير صحيح (مثل نسيان علامة % أو كتابة نص عشوائي)، تظهر رسالة الخطأ التالية:
"Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%."
ملاحظة حول CMYK
قيم CMYK المعروضة بجانب التحويل هي تقديرات شاشة (on-screen estimate) وقد تختلف بشكل ملحوظ عن قيم الطباعة الاحترافية (مثل تلك المعتمدة على بروفايلات ICC). لا يُعتمد عليها لمعايرة الطباعة.
حدود التحويل
التحويل من HSL إلى HEX يظل دائماً ضمن النطاق المرئي لـ sRGB. لا يحدث أي قصّ للألوان (gamut clipping) في هذا الاتجاه، لأن HSL نفسها مبنية على مكعب RGB. لذلك كل لون HSL صالح ضمن نطاقات الإدخال ينتج HEX صالحاً.
معالجة الأخطاء الشائعة
- نسيان علامة
%لـ Saturation أو Lightness: يؤدي إلى خطأ. - كتابة Hue بأكثر من 360: يؤدي إلى خطأ.
- استخدام فواصل غير صحيحة (مثل فاصلة منقوطة): يؤدي إلى خطأ.
- إدخال قيم سلبية: يؤدي إلى خطأ.
من يحتاج هذه الأداة؟
المصممون
من يبني لوحات ألوان في برامج مثل Figma أو Adobe XD حيث يُفضل العمل بـ HSL للتحكم البديهي بالإضاءة والتشبع. عند الانتهاء من التصميم، يحتاج إلى HEX لتصدير الألوان إلى المطورين أو إلى ملفات CSS.
مطورو الواجهات الأمامية
عند استلام ملف تصميم يحتوي على قيم HSL – وهو أمر شائع في أنظمة التصميم (Design Systems) – يحتاج المطور إلى تحويل كل لون إلى HEX لاستخدامه في خصائص CSS مثل background-color أو color. الأداة تنجز ذلك بنقرة واحدة وتظهر النتيجة مباشرة بجانب قيم CMYK وLAB التي قد تكون مفيدة للتوثيق.
أي شخص يعدّل سمات الوصولية
عند تحسين تباين الألوان وفق معايير WCAG، يُفضل العمل في HSL: بتعديل Lightness فقط مع الحفاظ على Hue، يمكن رفع التباين دون تغيير صبغة اللون. ثم يُحوَّل الناتج إلى HEX لاستخدامه في الإنتاج.
المبتدئون في نظرية الألوان
طلاب التصميم أو مطورو الواجهات الذين يتعلمون علاقة HSL بـ RGB وHEX يمكنهم استخدام الأداة لفهم كيفية ترجمة نفس اللون عبر أنظمة مختلفة.
أسئلة شائعة
س1: هل يمكنني تحويل HEX إلى HSL باستخدام نفس الصفحة؟ نعم، الصفحة تعمل ثنائية الاتجاه. أي تعديل في حقل HEX يؤدي إلى تحديث فوري لقيم HSL وجميع الحقول الأخرى.
س2: لماذا يظهر HEX أحياناً بصيغة ثلاثة أرقام مثل #abc؟
عندما يكون كل من الأحمر والأخضر والأزرق مكوناً من رقم سداسي عشري مكرر (مثلاً #aabbcc)، يمكن اختصاره إلى #abc. الصفحة تعرض كلا الشكلين إن أمكن.
س3: هل يمكن إدخال قيم Hue بدون أرقام عشرية؟ نعم، Hue تقبل أعداداً صحيحة فقط بين 0 و360. لا حاجة لعلامة الدرجة ولا كسور عشرية.
س4: ماذا يحدث إذا أدخلت قيمة Saturation أكبر من 100%؟ ستظهر رسالة الخطأ المذكورة أعلاه. يجب أن تكون النسبة بين 0% و100% بالضبط.
س5: هل تدعم الصفحة قناة الشفافية (Alpha)؟
الأداة لا تدعم صيغة HEX المكونة من ثمانية أرقام (#RRGGBBAA). تستخدم فقط الشكل السداسي المعتاد بستة أرقام (أو ثلاثة للاختصار) بدون شفافية.
س6: كيف تتم عملية التحويل رياضياً؟ التحويل يتم عبر مرحلتين: أولاً تحويل HSL إلى RGB باستخدام خوارزمية قياسية (تعتمد على حساب Chroma وتوزيعه على القنوات)، ثم تحويل كل قناة من RGB (قيم 0–255) إلى رقم سداسي عشري مكون من خانتين. تعمل الصفحة على الفور في المتصفح باستخدام JavaScript.