تحويل HEX إلى HSL
حوّل كود لون HEX إلى صبغة وتشبع وإضاءة، الصيغة التي تجعل بناء درجات اللون أمرًا سهلًا.
تحويل ألوان HEX إلى HSL
أكواد HEX مختصرة لكن التفكير بها صعب: لا أحد يعرف بمجرد النظر إلى #0A84FF كيف يجعله أغمق بنسبة 10 بالمئة. أما HSL فتصف اللون نفسه بالطريقة التي يفكّر بها الناس، فتصبح حالة التمرير أو حالة التعطيل أو نسخة الوضع الداكن تغييرًا في رقم واحد.
تفتح هذه الصفحة محوّل الألوان مع اختيار إدخال HEX وتحميل مثال جاهز.
قراءة قيمة HSL
| الجزء | المدى | في hsl(210, 100%, 52%) |
|---|---|---|
| الصبغة | 0–360° | 210°: أزرق بين السماوي (180°) والأزرق الصافي (240°) |
| التشبع | 0–100% | 100%: أقصى حيوية ممكنة، بلا أي رمادي ممزوج |
| الإضاءة | 0–100% | 52%: فوق نقطة المنتصف بين الأسود والأبيض بقليل |
كيف يتحوّل HEX إلى HSL
يحوّل المحوّل كود HEX أولًا إلى RGB، ثم يحجّم كل قناة إلى المدى 0–1. الإضاءة هي متوسط أكبر قناة وأصغرها. ويعتمد التشبع على مقدار التباعد بين هاتين القناتين نسبةً إلى الإضاءة. أما الصبغة فتُستمد من القناة الأكبر ومن طريقة مقارنة القناتين الأخريين. وبالنسبة إلى #0A84FF تكون النتيجة 210.1° و100% و51.96%، وتُقرَّب إلى hsl(210, 100%, 52%).
بناء درجات اللون باستخدام HSL
- حالة التمرير أو الضغط: اخفض الإضاءة بمقدار 5 إلى 10 نقاط.
- حالة التعطيل: اخفض التشبع وارفع الإضاءة.
- درجات فاتحة للخلفيات: ثبّت الصبغة والتشبع، واضبط الإضاءة بين 90 و97%.
- الوضع الداكن: ارفع الإضاءة ليبقى اللون مقروءًا على الأسطح الداكنة.
يؤتمت تبويب «لوحة الألوان» هذا كله بسلّم من إحدى عشرة درجة من 50 إلى 950، وتدوّر التناسقات اللونية أسفله الصبغة لتجد الألوان المتكاملة والمتجاورة.
تنبيه حول الإدراك البصري
إضاءة HSL ليست الإضاءة التي تدركها العين: فالأصفر والأزرق عند 50% يبدوان مختلفين جدًا في السطوع. وحين يهمّ التباين، اختبر الزوج الفعلي في فاحص تباين الألوان أو استخدم قيمة OKLCH التي يعرضها المحوّل أيضًا. ولقيم القنوات المجردة، راجع HEX إلى RGB.