محول HSL إلى RGB

يصف نموذج HSL اللون بالتدرج على العجلة، والتشبع كمدى حيوية اللون، والإضاءة كمدى قربه من الأسود أو الأبيض. غالبًا ما يختار المصممون ومهندسو الواجهة الأمامية الألوان بـ HSL لأن تدوير التدرج يُبقي التشبع والإضاءة ثابتين؛ ومع ذلك تحتاج المتصفحات واللوحات ووسائط الصور ومعظم واجهات الرسوم في النهاية إلى قنوات أحمر وأخضر وأزرق على مقياس من صفر إلى مئتين وخمسة وخمسين. يأخذ هذا المحول ثلاثة أرقام — التدرج بالدرجات من صفر إلى ثلاثمئة وستين، والتشبع والإضاءة كنسب مئوية من صفر إلى مئة — ويعيد قنوات RGB صحيحة وسلسلة CSS بصيغة rgb() ورمز hex بأحرف صغيرة، باستخدام المسار المغلق نفسه الذي تستخدمه المتصفحات لـ hsl() في CSS. يُرفض التدرج خارج الفترة المغلقة من صفر إلى ثلاثمئة وستين بخطأ تحقق واضح حتى لا تُلفّ الرموز الخاطئة بصمت.

كيف يُسقَط HSL على الأحمر والأخضر والأزرق

التدرج زاوية على عجلة الألوان: صفر درجة أحمر نقي، ومئة وعشرون أخضر نقي، ومئتان وأربعون أزرق نقي، وثلاثمئة وستون تغلق الدائرة عائدة إلى الأحمر. يمدّ التشبع رماديًا عند الإضاءة المختارة نحو اللون كامل التلون عند ذلك التدرج؛ أما صفر بالمئة تشبع فهو دائمًا رمادي أو أسود أو أبيض عديم اللون يعتمد فقط على الإضاءة. تمتد الإضاءة من الأسود عند صفر بالمئة مرورًا بالدرجة المتوسطة النقية قرب خمسين بالمئة وصولًا إلى الأبيض عند مئة بالمئة.

تتبع خوارزمية التحويل المستخدمة هنا وحدة ألوان CSS وصياغة W3C: تُقاس التشبع والإضاءة إلى الفترة الوحدوية، وتُحسب حدود الكروما الوسيطة p وq من الإضاءة والتشبع، ثم تُؤخذ ثلاث عينات مزاحمة على الدائرة الوحدوية بالمساعد الكلاسيكي hue2rgb لقنوات الأحمر والأخضر والأزرق. عندما يكون التشبع صفرًا تنهار القنوات الثلاث إلى الرمادي نفسه المشتق من الإضاءة، وهو اختصار أداء وربح في الاستقرار العددي معًا. تُضرب كل قناة في الفترة الوحدوية بمئتين وخمسة وخمسين وتُقرَّب إلى أقرب عدد صحيح ليطابق الناتج توقعات مخازن الإطارات ثمانية البتات وCSS بصيغة rgb().

يجب أن يقع كل من التشبع والإضاءة بين صفر ومئة بالمئة شمولًا، مطابقة للنسب المئوية التي يكتبها المصممون في أوراق الأنماط.

ما ترسله وما تستقبله

أرسل ثلاثة أرقام منتهية تحت الحقول h وs وl. الحقل h هو التدرج بالدرجات وهو مطلوب؛ ويجب أن يقع بين صفر وثلاثمئة وستين شمولًا. الحقلان s وl هما التشبع والإضاءة كنسب مئوية من صفر إلى مئة.

عندما يكون التدرج خارج النطاق القانوني توضح الاستجابة أن h يجب أن يكون بين صفر وثلاثمئة وستين درجة حتى يتمكن العميل من تقييد الرمز أو إصلاحه قبل إعادة المحاولة. عند النجاح تعيد الاستجابة قيم h وs وl المنظّفة، وقنوات صحيحة r وg وb كل منها من صفر إلى مئتين وخمسة وخمسين، وسلسلة rgb قابلة للطباعة بالشكل rgb(R, G, B)، وسلسلة hex بأحرف صغيرة بالشكل #rrggbb، وملاحظة صيغة قصيرة تسمّي مسار CSS وW3C.

تشمل الفحوصات الكلاسيكية الأحمر النقي بتدرج صفر وتشبع مئة وإضاءة خمسين فيعطي مئتين وخمسة وخمسين وصفرًا وصفرًا؛ والرمادي المتوسط بأي تدرج وتشبع صفر وإضاءة خمسين فيعطي مئة وثمانية وعشرين على كل قناة؛ والأخضر العميق قرب تدرج مئة وعشرين مع تشبع عالٍ وإضاءة معتدلة. استخدم نموذج المتصفح المجاني لاستكشاف اللوحات ومراجعات التصميم، ثم استدعِ العقد نفسه من السكربتات عندما تحتاج تحويلًا جماعيًا لرموز التصميم إلى جداول RGB أو مثبتات انحدار.

أين يظهر تحويل HSL إلى RGB في العمل الحقيقي

تخزّن أنظمة التصميم منحدرات العلامة والرموز الدلالية بصيغة HSL حتى تتمكن فرق المنتج من تدوير التدرج للسمات مع الإبقاء على خطوات إضاءة ملائمة للتباين؛ ولا يزال التسليم إلى خصائص CSS المخصصة وألوان الجوال الأصلية وأنماط ملء اللوحة يتطلب RGB وhex موثوقين. تولّد مكتبات تصور البيانات لوحات فئوية بخطوة التدرج عند تشبع وإضاءة ثابتين ثم تحوّل كل خطوة إلى RGB لمحركات SVG وWebGL والرسوم. غالبًا ما تقبل قوالب البريد ومولدات PDF فقط hex أو rgb()، لذا تحوّل خطوط أتمتة التسويق مواصفات HSL للعلامة مرة واحدة وتخزّن ثلاثي القنوات في الذاكرة المؤقتة.

تعرض أدوات الألعاب ومحررات المستويات عجلات تدرج للفنانين ويجب أن تُفرغ RGB صحيحًا في تعريفات المواد وصبغات النسيج دون واجهات تقتصر على المتصفح. تحسب مسارات إمكانية الوصول نسب التباين على RGB أو الإضاءة النسبية؛ والبدء من HSL لضبط الإضاءة الإدراكي ينتهي أيضًا بقيم القنوات التي يوفّرها هذا المحول. تحتاج المناهج ودروس المعسكرات التعليمية إلى مرجع موثوق واحد يطابق عرض CSS لمفاتيح الواجبات وهي تعلّم نماذج الألوان جنبًا إلى جنب.

إذا احتجت لاحقًا تحويلًا متعدد الصيغ بين HEX وLAB وCMYK أو العكس من RGB إلى HSL أو فحوصات تباين WCAG، فاعاملها كنوايا بحث وصفحات هبوط منفصلة بدل إثقال صفحة محول HSL إلى RGB المخصصة هذه.