محول HEX إلى HSL

ما الذي تقدمه هذه الصفحة؟

تقوم الصفحة بتحويل أي كود لوني بصيغة HEX—سواء كان كودًا كاملًا مكونًا من ستة أرقام سداسية عشرية مثل #1E90FF أو الصيغة المختصرة ثلاثية الأرقام مثل #abc—إلى القيمة المكافئة له بصيغة HSL. تعرض النتيجة درجة اللون (Hue) بالدرجات من 0 إلى 360، ودرجة التشبع (Saturation) كنسبة مئوية من 0% إلى 100%، ودرجة الإضاءة (Lightness) أيضًا كنسبة مئوية. إلى جانب ذلك، تُظهر الصفحة اللون نفسه في جميع الصيغ المدعومة الأخرى: HEX، RGB، HSV، CMYK، وLAB، بحيث يمكنك نسخ أي صيغة تحتاجها مباشرة. كل هذه القيم تتجدد تلقائيًا فور تعديلك لأي إدخال.

لماذا تختلف هذه الصفحة عن غيرها؟

السبب الجوهري لوجود هذه الصفحة هو الفرق الجذري بين صيغة HEX وصيغة HSL من حيث الغرض والاستخدام:

• HEX هو تمثيل خام لقيم RGB: يتكون من ستة أرقام سداسية عشرية (أو ثلاثة في الصيغة المختصرة) ترمز مباشرة إلى قيم الأحمر والأخضر والأزرق. هو مضغوط جدًا ويستخدم على نطاق واسع في CSS وأدوات التصميم، لكنه غير بديهي لإجراء التعديلات البشرية. لا يمكنك ببساطة رفع الإضاءة أو خفض التشبع في كود HEX دون حسابات ذهنية معقدة.
• HSL مبني للتفكير البشري: درجة اللون تقاس بالدرجات على دائرة الألوان (0 أحمر، 120 أخضر، 240 أزرق)، والتشبع يعبر عن شدة اللون، والإضاءة تعبر عن السطوع من الأسود إلى الأبيض. تغيير الإضاءة وحده يبقي درجة اللون ثابتة، مما يجعل HSL الصيغة المثلى لإنشاء لوحات الألوان ونظم الثيمات.
• لا قناة شفافية: صيغة HEX القياسية (ذات ستة أرقام أو ثلاثة أرقام) لا تحمل أي معلومات عن الشفافية، وكذلك HSL لا تتضمن عنصر ألفا. لذلك، يتعامل التحويل دائمًا مع الألوان المعتمة الكاملة. إذا كنت بحاجة إلى شفافية، فستحتاج إلى صيغ أخرى مثل RGBA أو HSLA.

كيف يعمل التحويل من HEX إلى HSL؟

التحويل الرياضي يمر أولاً من HEX إلى RGB، ثم من RGB إلى HSL. إليك الخطوات بشكل مختصر:

1. من HEX إلى RGB: كل زوج من الأرقام السداسية العشرية في الكود (مثلاً 4f من #4f46e5) يُحوَّل إلى قيمة عشرية بين 0 و255. الصيغة المختصرة مثل #abc تُفك إلى #aabbcc. فمثلاً #abc يصبح #aabbcc الذي يعني R=170, G=187, B=204.
2. من RGB إلى HSL: يتم تطبيع القيم بقسمتها على 255 لتصبح بين 0 و1. ثم تُحسب درجة اللون باستخدام دالة تعتمد على الفروق بين القيم القصوى والدنيا للقنوات. التشبع والإضاءة يُستخرجان من معادلات محددة. الإضاءة هي متوسط القيم العظمى والصغرى، والتشبع يعتمد على الفرق بينهما.

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

المدخلات والمخرجات والحالات الحدية

المدخلات: تقبل الصفحة فقط كود HEX صحيحًا:

• ستة أرقام سداسية عشرية (بعلامة # اختيارية أو بدونها) مثل #4f46e5 أو 4f46e5.
• ثلاثة أرقام سداسية عشرية (مختصرة) مثل #abc أو abc.

المخرجات: تعرض الصفحة:

• HSL: درجة اللون (0–360)، التشبع (0–100%)، الإضاءة (0–100%).
• HEX الأصلي (مع علامة #).
• RGB: قيم حمراء، خضراء، زرقاء (0–255).
• HSV: درجة اللون (0–360)، التشبع (0–100%)، القيمة (0–100%).
• CMYK: سيان، ماجنتا، أصفر، أسود (0–100%).
• LAB: L* (0–100)، a* و b* (حوالي -128 إلى 127).

الحالات الحدية والقواعد:

• إذا أدخلت قيمة غير صالحة (مثلاً #xyz أو #12345 أو red)، يظهر الخطأ: "Enter a hex color like #4f46e5 or #abc."
• إذا انتقلت إلى فضاء لوني آخر (مثل LAB أو CMYK) وأدخلت قيمة خارج النطاق المرئي المعروض (خارج نطاق RGB gamut)، يتم تعديل اللون تلقائيًا إلى أقرب لون قابل للعرض. عند تحويل هذا اللون المعدل مرة أخرى إلى HEX، قد تلاحظ اختلافًا طفيفًا—وهذا أمر متوقع لأن بعض الألوان في LAB أو CMYK لا يمكن تمثيلها بدقة على الشاشات.
• قيم CMYK المعروضة هي تقديرات للشاشة فقط، ولا ينبغي استخدامها للطباعة الاحترافية دون معايرة دقيقة. كل تحويل CMYK في المتصفحات هو تقريب، وقد يختلف عن المخرجات الفعلية للطابعة.

من يحتاج إلى هذه الأداة؟

• مطورو الواجهات الأمامية (Front‑end developers) الذين يكتبون CSS ويحتاجون إلى تحويل اللون السداسي عشر من نموذج تصميم إلى HSL حتى يتمكنوا بسهولة من ضبط الإضاءة لحالات التمرير (hover) أو متغيرات الثيم المختلفة. مثلاً، يمكنهم تعريف متغير CSS مثل --primary: hsl(230, 80%, 55%) ثم إنشاء نسخة أفتح بإضافة --primary-light: hsl(230, 80%, 75%).
• مصممو واجهات المستخدم وتجربة المستخدم (UI/UX designers) الذين يفكرون من حيث درجة اللون والتشبع والإضاءة، ويحتاجون إلى مطابقة لون العلامة التجارية المعطى بصيغة HEX.
• أي شخص يبني لوحة ألوان—HSL يجعل من السهل إنشاء أنظمة ألوان متكاملة (مكملة، مماثلة، أحادية اللون) عن طريق تعديل درجة اللون أو التشبع فقط.
• مدققو إمكانية الوصول (Accessibility auditors) الذين يحتاجون إلى التحقق من نسب التباين (contrast ratios). بما أن الإضاءة في HSL واضحة ومباشرة، يمكنهم بسرعة حساب ما إذا كان النص مقروءًا على خلفية معينة دون الحاجة إلى حسابات RGB معقدة. معيار WCAG يتطلب نسب تباين معينة، وHSL يسهل رؤية الإضاءة النسبية.

نصائح عملية لاستخدام HSL

عندما تحصل على القيمة المحولة من هذه الأداة، إليك بعض الاستخدامات الشائعة:

• إنشاء ثيمات داكنة وخفيفة: خذ لونك الأساسي HEX، حوله إلى HSL، ثم اطرح أو أضف 20–30% من الإضاءة للحصول على نسخ أفتح أو أغمق مع الحفاظ على نفس درجة اللون والتشبع. هذا أفضل من تغيير RGB بشكل عشوائي.
• ضبط التشبع دون تغيير الإضاءة: أحيانًا تريد لونًا أقل حيوية (مثلاً في الخلفيات). باستخدام HSL، يمكنك خفض التشبع بسهولة مع بقاء الإضاءة كما هي، مما يحافظ على السطوع المتسق.
• توليد ألوان مكملة: ببساطة أضف 180 درجة إلى درجة اللون الأصلية. مثلاً إذا كان اللون الأساسي hsl(200, 50%, 50%)، فإن المكمل له هو hsl(20, 50%, 50%). هذه العملية بديهية في HSL ولكنها معقدة في HEX.
• تجنب الأخطاء الشائعة: تذكر أن HSL ليس HSV. في HSV، القيمة (Value) تعني السطوع الأقصى، بينما في HSL الإضاءة (Lightness) هي متوسط القيم. لذلك لا تخلط بين الصيغتين. أداتنا توفر كلا التحويلين جنبًا إلى جنب، مما يسمح لك بمقارنة الفروق.

الأسئلة الشائعة

س: هل يمكنني استخدام الصيغة المختصرة مثل #abc؟ نعم، تعمل الصفحة مع كل من الصيغة الكاملة (ستة أرقام) والمختصرة (ثلاثة أرقام). يتم توسيع المختصرة تلقائيًا إلى الصيغة الكاملة قبل التحويل.

س: لماذا تختلف قيمة CMYK المعروضة عن ما أراه في برنامج Photoshop؟ قيم CMYK في المتصفح هي تقديرات رياضية ولا تعتمد على ملفات تعريف الألوان (Color profiles) الخاصة بالطابعة. للطباعة الاحترافية، استخدم دائمًا قيم CMYK المعايرة من برنامج تحرير متخصص.

س: ماذا يحدث إذا أدخلت لونًا مثل #00FF00؟ يتم تحويله إلى HSL: h=120°, s=100%, l=50%. هذا هو اللون الأخضر النقي. يعمل بشكل طبيعي.

س: هل الصفحة تدعم الألوان الشفافة (مثل #00FF0080)؟ لا، صيغة HEX ذات 8 أرقام (ARGB) غير مدعومة. الصفحة تتعامل فقط مع الألوان المعتمة الكاملة. للشفافية، ستحتاج إلى أدوات أخرى تدعم RGBA أو HSLA.

س: إذا قمت بتعديل قيم HSL يدويًا، هل سيتغير HEX وفقًا لذلك؟ نعم، جميع الحقول مترابطة. أي تغيير في أي من القيم (HEX، RGB، HSV، CMYK، LAB) يؤدي إلى تحديث باقي الحقول فورًا. هذا يسمح لك بالتجربة في أي صيغة تفضلها ورؤية النتيجة في الصيغ الأخرى.

س: هل يتم حفظ الألوان التي أدخلتها؟ لا، كل شيء يحدث داخل متصفحك فقط. لا يتم تخزين أي بيانات أو رفعها إلى خادم خارجي. يمكنك إعادة تحميل الصفحة بثقة تامة.