محول RGB إلى HSL

تحويل RGB إلى HSL: من لغة الشاشة إلى لغة الإدراك البصري

ما يميز هذه الأداة عن غيرها

تعمل هذه الصفحة على تحويل الألوان من نموذج RGB (الأحمر-الأخضر-الأزرق) إلى نموذج HSL (الدرجة اللونية-التشبع-الإضاءة). الفرق الجوهري بين النموذجين هو أن RGB صُمم لوصف كيفية عمل الشاشات – خلط ضوئي بمقادير عددية بين 0 و255 – بينما صُمم HSL ليتوافق مع طريقة تفكير البشر في الألوان. في RGB، تغيير قيمة قناة واحدة (مثلاً رفع اللون الأحمر) قد يغير لون الصبغة الأساسي بدرجة يصعب توقعها. أما في HSL، فالإضاءة (Lightness) مستقلة تماماً عن الدرجة اللونية (Hue)، مما يسمح بتعديل السطوع دون المساس بهوية اللون. هذه الخاصية تجعل HSL النموذج المفضل لتوليد لوحات الألوان والسمات الداكنة/الفاتحة والتحقق من تباين الوصولية (Accessibility).

كيفية عمل التحويل: من أرقام إلى درجات ونسب مئوية

الإدخال

تستقبل الأداة ثلاثة أعداد صحيحة بين 0 و255 للقنوات الأحمر والأخضر والأزرق، مفصولة بفواصل أو مسافات. مثال: 79, 70, 229 – وهو لون أرجواني قريب من النيلي.

الإخراج

بمجرد الإدخال، تعرض الأداة القيم المحولة في خمسة نماذج لونية، مع إمكانية تعديل أي حقل لتحديث الباقي فوراً:

• HSL: الدرجة اللونية 0–360°، التشبع %، الإضاءة %
• HEX: ستة أرقام سداسية عشرية (مثال: #4F46E5)
• HSV: صبغة 0–360°، تشبع %، قيمة %
• CMYK: نسبة مئوية لكل من السماوي والأرجواني والأصفر والأسود (تقدير شاشة فقط)
• LAB: قيم CIE Lab \L* و\a و\b

جميع التحويلات تجري في متصفح المستخدم، ولا تُرفع أي بيانات إلى خادم.

صيغة التحويل من RGB إلى HSL (المبدأ العام)

1. تطبيع القيم: تقسيم كل قناة على 255 للحصول على أعداد عشرية بين 0 و1.
2. إيجاد الحدين الأعلى والأدنى بين القنوات الثلاث.
3. حساب الإضاءة: متوسط الحد الأعلى والأدنى.
4. حساب التشبع: الفرق بين الحدين مقسوماً على (1 - |2×الإضاءة – 1|) (تختلف الصيغة حسب إضاءة اللون ما بين 0.5).
5. حساب الدرجة اللونية: تعتمد على أي قناة تساوي الحد الأعلى، وتستخدم نسب الفروق بين القنوات لإيجاد الزاوية على دائرة الألوان (0° أحمر، 120° أخضر، 240° أزرق).

قواعد الإدخال والأخطاء الشائعة

أخطاء RGB

• إدخال أرقام غير صحيحة أو خارج النطاق 0–255. ستعرض الأداة الرسالة: "Enter RGB as three numbers 0–255, like 79, 70, 229."
• إدخال أرقام مفصولة بأحرف غير فواصل أو مسافات (مثلاً نقطة أو شرطة).

أخطاء HSL

• إدخال قيم HSL في الحقل المخصص للتحويل العكسي. يجب أن تكون الدرجة بين 0 و360، والتشبع والإضاءة كنسب مئوية (مثلاً 243, 75%, 59%). الخطأ يظهر: "Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%."

حالات خاصة للتحويل من LAB/CMYK

عند إدخال قيمة LAB أو CMYK تقع خارج النطاق القابل للعرض على شاشات sRGB، تقوم الأداة بضبطها تلقائياً إلى أقرب لون قابل للعرض. قد يؤدي هذا الضبط إلى إزاحة طفيفة عند تحويل اللون الناتج مرة أخرى إلى النموذج الأصلي. لا يُستخدم إخراج CMYK لهذه الصفحة في الطباعة الاحترافية دون معايرة.

لماذا يستخدم المصممون HSL بدلاً من RGB في اللوحات والسمات

تدرجات الإضاءة دون تغيير الصبغة

في سير عمل تصميم السمات (Themes)، غالباً ما تحتاج إلى توليد خمسة تدرجات من لون العلامة التجارية: فاتح للخلفية، عادي للنص، داكن للتباين العالي. باستخدام HSL، يمكنك تثبيت Hue وSaturation وتغيير Lightness فقط. مثلاً إذا كان لون العلامة hsl(243, 75%, 59%)، فالتدرج الفاتح سيكون hsl(243, 75%, 90%) والداكن hsl(243, 75%, 20%) – دون أي تحول في اللون الأساسي. في RGB، تغيير القنوات الثلاث للحصول على تدرج مشابه سيكون تخميناً غير موثوق.

الوصولية والتباين (WCAG)

تتطلب معايير الوصولية (WCAG 2.1) نسب تباين لا تقل عن 4.5:1 للنصوص العادية. باستخدام HSL، يمكن رفع الإضاءة أو خفضها مع الحفاظ على هوية اللون، ثم اختبار النسبة بسهولة. مصممو واجهات المستخدم يستخدمون HSL لضمان أن النصوص على خلفية داكنة تحقق التباين المطلوب دون التضحية بالصورة البصرية العامة.

الألواح اللونية المتسلسلة (Sequential Palettes)

في تصور البيانات، تحتاج أحياناً إلى سلم لوني متدرج من الفاتح إلى الداكن لتمثيل كميات متصاعدة. HSL يعطي سيطرة بديهية على الإضاءة – ما يجعله خياراً شائعاً في مكتبات مثل D3.js وChart.js، رغم أن نماذج أكثر اتساقاً إدراكياً مثل LAB هي الأفضل نظرياً.

القيود والاعتبارات العملية

ليس نموذجاً موحداً إدراكياً

رغم سهولة بديهته، فإن HSL ليس متسقاً إدراكياً: لونان لهما نفس قيمة الإضاءة العددية قد يبدوان مختلفين في السطوع الظاهري. على سبيل المثال، الأصفر النقي (Hue 60°) عند إضاءة 50% يبدو أفتح بكثير من الأزرق النقي (Hue 240°) عند نفس الإضاءة. هذا يحدث لأن نموذج HSL يفترض أن الإضاءة الخطية لـ RGB تترجم مباشرة إلى سطوع متساوٍ، وهذا غير صحيح في النظام البصري البشري. للمهام التي تتطلب اتساقاً إدراكياً دقيقاً (مثل خرائط الحرارة)، يُفضل استخدام CIE Lab* أو OKLCH.

القيود الإضافية: التحويل من CMYK

قيم CMYK المعروضة هي تقدير شاشة يعتمد على تحويلات افتراضية لمساحة لونية sRGB. تختلف هذه النتائج عن ملفات ICC الاحترافية للطباعة. لا تستخدم الأداة لتصحيح ألوان الإخراج الطباعي دون مراجعة.

الاستخدام العملي في تطوير الويب: دالة CSS hsl()

تدعم CSS الحديثة دالتين hsl() وhsla() (تم دمج ألفا اختيارياً في CSS Color Level 4). يمكن للواجهة الأمامية تخزين الألوان كمتغيرات CSS باستخدام HSL، ثم تعديل الإضاءة ديناميكياً عبر JavaScript أو باستخدام دالة calc() داخل CSS. مثال:

:root {
  --brand-hue: 243;
  --brand-saturation: 75%;
  --brand-lightness: 59%;
}
.button {
  background-color: hsl(var(--brand-hue), var(--brand-saturation), var(--brand-lightness));
}
.button:hover {
  background-color: hsl(var(--brand-hue), var(--brand-saturation), calc(var(--brand-lightness) + 10%));
}

هذا الأسلوب يقلل تكرار الأكواد ويحسن قابلية الصيانة، خاصة في أنظمة التصميم الكبيرة.

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

س: لماذا أحتاج إلى تحويل RGB إلى HSL بدلاً من استخدام أداة انتقاء لون بصرية؟

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

س: هل تحويل HSL إلى RGB متطابق عبر المتصفحات؟

ج: نعم، صيغة التحويل محددة في مواصفات CSS Color Level 3 وتنفذ بشكل موحد في جميع المتصفحات الرئيسية. النتائج هنا مطابقة لـ hsl() في CSS.

س: ماذا يحدث إذا أدخلت قيماً عشرية لـ RGB مثل 45.5؟

ج: الأداة تتوقع أعداداً صحيحة فقط. أي إدخال غير صحيح سيؤدي إلى ظهور رسالة الخطأ المذكورة أعلاه.

س: هل يمكن استخدام الأداة لتحويل ألوان الصور؟

ج: لا، هذه الأداة تتعامل مع قيم لونية مفردة فقط. لتحويل صورة كاملة، تحتاج إلى مكتبة معالجة صور مثل Sharp أو Canvas.

س: لماذا يظهر إخراج CMYK أرقاماً مختلفة عن برامج الطباعة؟

ج: هذا تقدير شاشة معتمد على نموذج تحويل ثابت غير معاير لجهاز طباعة معين. للحصول على CMYK دقيق، استخدم برامج متخصصة مع ملفات ICC خاصة بالطابعة والورق.

س: متى يجب أن أستخدم LAB بدلاً من HSL؟

ج: عند الحاجة إلى مسافة لونية موحدة إدراكياً، مثل تحسين الصور أو إنشاء سلالم لونية لا تشويه. LAB ليس بديهياً مثل HSL ولكنه أكثر دقة من الناحية البصرية.