محول الألوان من RGB إلى HSL

تُظهر قيمة تدرج اللون (H) موضع لونك على عجلة الألوان، ويُظهر التشبع (S) مدى حيوية اللون أو باهتته، بينما تُظهر الإضاءة (L) مدى قربه من الأسود أو الأبيض. يمكن استخدام هذه القيم الثلاث معًا مباشرة في CSS بصيغة hsl(H, S%, L%).

أولًا يتم تحجيم قيم R وG وB إلى نطاق من 0 إلى 1. الإضاءة (L) هي متوسط أعلى وأدنى قناة. التشبع (S) هو الفرق بين القنوات بالنسبة إلى الإضاءة، أما تدرج اللون (H) فيُحسب ضمن نطاق من 0 إلى 360 درجة بناءً على القناة المهيمنة.

• تُقسم قيم R وG وB على 255 لتحجيمها إلى نطاق من 0 إلى 1.
• يتم تحديد أكبر (max) وأصغر (min) القيم المحجّمة.
• تُحسب الإضاءة (L) كمتوسط لقيمتي max وmin.
• يتم إيجاد التشبع (S) بتطبيع الفرق بين max وmin بالنسبة إلى الإضاءة.
• يُحسب تدرج اللون (H) ضمن نطاق من 0 إلى 360 درجة بناءً على القناة المهيمنة (R أو G أو B).

القيم R=52، G=152، B=219 (لون أزرق زاهٍ) تعادل تقريبًا H=204 درجة، S=70%، L=53%.

• أدخل قيم R وG وB كأعداد صحيحة بين 0 و255؛ القيم خارج هذا النطاق لا تمثل لونًا صالحًا.
• تدرج اللون (H) هو موضع على عجلة الألوان من 0 إلى 360 درجة: 0 يعني الأحمر، 120 يعني الأخضر، 240 يعني الأزرق.
• تُقرأ قيم التشبع والإضاءة كنسبة مئوية؛ تشبع 0% يعني درجة من الرمادي، وإضاءة 100% تعني اللون الأبيض.

يعكس نموذج RGB (أحمر، أخضر، أزرق) بدقة الطريقة التي تنتج بها الشاشات الألوان عبر إصدار الضوء: تأخذ كل قناة قيمة شدة من 0 إلى 255، ويؤدي دمج القنوات الثلاث إلى إنتاج ملايين الألوان المختلفة. مع ذلك، هذا النموذج ليس بديهيًا عندما تريد جعل لون ما 'أفتح' أو 'أكثر حيوية'، لأنك ستحتاج إلى تعديل القنوات الثلاث في آن واحد.

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

تقوم هذه الأداة بتحجيم مدخلات RGB إلى نطاق من 0 إلى 1، ثم تجد أعلى وأدنى قيم القنوات لحساب الإضاءة والتشبع. بعد ذلك تحدد أي قناة هي المهيمنة لإيجاد الموضع الدقيق لتدرج اللون على عجلة الألوان.

أكبر ميزة لصيغة HSL هي إمكانية استخدامها مباشرة في CSS بصيغة hsl(تدرج اللون، التشبع%، الإضاءة%). فعلى سبيل المثال، لإنشاء نسخة أغمق من اللون الأساسي لعلامة تجارية، يكفي خفض قيمة الإضاءة فقط؛ أما في RGB فستحتاج إلى إعادة حساب القنوات الثلاث كل على حدة.

تُستخدم تحويلات الألوان مثل هذه بكثرة في تصميم الويب، وأعمال الشعارات، وتصور البيانات، وأنظمة سمات واجهات المستخدم. يُعد تحويل RGB إلى HSL نقطة انطلاق عملية للمطورين الراغبين في بناء نسخ فاتحة/داكنة من السمات أو لوحة ألوان متسقة.