التعامل مع الألوان في CSS

عند تصميم المواقع الإلكترونية، تُعدّ طريقة استخدام نموذج الألوان HSL واحدة من أكثر الطرق مرونة وبديهية للتعامل مع الألوان. يرمز الاختصار HSL إلى "درجة اللون" (Hue)، و"التشبع" (Saturation)، و"السطوع" (Lightness)؛ وهي المكونات الثلاثة الأساسية التي تحدد أي لون.

يمثّل نموذج الألوان HSL الألوان بطريقة تتوافق بشكل أكبر مع كيفية إدراك البشر للألوان. في هذا الدرس، سنتعرف على ماهية نموذج الألوان HSL وكيفية استخدام الدالة hsl() في لغة CSS.

فهم نظام HSL

يُشير مصطلح "درجة اللون" (Hue) إلى نوع اللون، ويُمثَّل كزاوية على عجلة الألوان (color wheel) تتراوح قيمتها بين 0 و360 درجة. فعلى سبيل المثال، تُمثِّل الزاوية 0 درجة اللون الأحمر Red، بينما تُمثِّل الزاوية 120 درجة اللون الأخضر Green، وتُمثِّل الزاوية 240 درجة اللون الأزرق Blue. ومن خلال تعديل درجة اللون، يمكنك التنقل بين ألوان مختلفة عبر الطيف اللوني (the spectrum).

يشير "التشبع" (Saturation) إلى كثافة اللون أو نقائه. ويُقاس كنسبة مئوية تتراوح من 0% (لون فاقد للتشبع تماماً، أي درجة من درجات الرمادي) إلى 100% (أكثر صور اللون حيويةً). فاللون ذو التشبع بنسبة 100% يكون فائق الحيوية، بينما يظهر اللون ذو التشبع بنسبة 0% كدرجة من درجات الرمادي (shade of gray).

تُحدد "السطوع" (Lightness) مدى كون اللون فاتحاً أو داكناً، ويُعبَّر عنها أيضاً كنسبة مئوية. فقيمة السطوع 0% تُنتج اللون الأسود، بينما تمنحك قيمة 50% الدرجة الطبيعية للون، وتؤدي قيمة 100% إلى اللون الأبيض.

دالة hsl()

في لغة CSS، تُستخدم الدالة hsl() لتحديد الألوان باستخدام نموذج الألوان HSL. وتستخدم الصيغة الحديثة قيماً مفصولة بمسافات:

element {
 color: hsl(hue saturation lightness);
}
            

قد تصادف أيضًا الصيغة القديمة التي تستخدم الفواصل للفصل بين العناصر في الأكواد البرمجية الموجودة، وهي صيغة لا تزال المتصفحات تدعمها:

element {
 color: hsl(hue, saturation, lightness);
}
            

لنُوضِّح ذلك من خلال مثال:

<link rel="stylesheet" href="styles.css">

<p>هذه فقرة.</p>
            

body {
 background-color: hsl(0 0% 1% / 1);
}

p {
 color: hsl(120 100% 50%);
}
            

معاينة:

في هذه الحالة، تبلغ (hue) درجة اللون 120 درجة، وهو ما يقابل اللون الأخضر Green. وبما أن درجة التشبع (saturation) تبلغ 100% ، فسيكون اللون الأخضر فائق الحيوية (fully vivid). أما درجة السطوع (lightness) فتبلغ 50% ، مما يعني أن اللون في درجته الطبيعية؛ أي ليس داكناً جداً ولا فاتحاً جداً. ونتيجة لذلك، سيكون لون نص الفقرة أخضر زاهياً (bright green).

إنشاء الظلال Shades والألوان الفاتحة Tints

تتمثل إحدى المزايا الرئيسية لنظام الألوان HSL في طبيعته البديهية؛ فهو يسهّل تعديل حيوية اللون أو درجة سطوعه من خلال تغيير قيم التشبع (saturation) والسطوع (lightness)، وذلك دون الحاجة إلى تغيير اللون الأساسي (hue).

على سبيل المثال، إذا أردت إنشاء درجات أو ألوان فرعية مختلفة من اللون نفسه، فيمكنك ببساطة تعديل قيمة السطوع (lightness value).

<link rel="stylesheet" href="styles.css">

<div class="light">هذا عنصر div باللون الأزرق الفاتح (light blue).</div>
<div class="dark">هذا عنصر div باللون الأزرق الداكن (dark blue).</div>
            

div.light {
 background-color: hsl(240 100% 80%);
}

div.dark {
 background-color: hsl(240 100% 20%);
 color: hsl(0 0% 100%);
}
            

معاينة:

هنا، يستخدم كلا عنصري div نفس درجة اللون (240 درجة، وهي اللون الأزرق)، لكن أحدهما يتمتع بقيمة سطوع (lightness) تبلغ 80% (درجة أفتح من الأزرق)، بينما يتمتع الآخر بقيمة سطوع (lightness) تبلغ 20% (درجة أغمق من الأزرق).

العمل مع الشفافية Transparency

تماماً مثل نموذج RGB، تدعم الدالة hsl() أيضاً قيمة "ألفا" (alpha) اختيارية للتحكم في الشفافية (transparency). يمكنك إضافتها بعد فاصل من نوع / كمعامل رابع. إليك الصيغة الأساسية:

element {
 background-color: hsl(hue saturation lightness / alpha);
}
            

لنلقِ نظرةً على مثالٍ:

<link rel="stylesheet" href="styles.css">

<div>هذا عنصر div.</div>
            

div {
 background-color: hsl(0 100% 50% / 0.5);
}
            

معاينة:

يمنح هذا الكود العنصر div خلفيةً حمراء شبه شفافة (semi-transparent)؛ حيث تُضبط درجة اللون (hue) عند 0 درجة (اللون الأحمر)، والتشبع (saturation) عند 100% ، والسطوع (lightness) عند 50%، بينما تُحدد قيمة ألفا (alpha) بـ 0.5 (أي بنسبة تعتيم قدرها 50%). يمكنك أيضاً تحديد قيمة ألفا كنسبة مئوية؛ فعلى سبيل المثال، الصيغة hsl(0 100% 50% / 50%) تعادل الصيغة hsl(0 100% 50% / 0.5).

دالة hsla()

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

element {
 background-color: hsla(hue, saturation, lightness, alpha);
}
            

على سبيل المثال، تُعدّ الصيغة hsla(0, 100%, 50%, 0.5) المكافئ القديم للصيغة hsl(0 100% 50% / 0.5). ورغم أن المتصفحات تدعم كلتيهما، إلا أن صيغة hsl() الحديثة التي تستخدم الفاصل المائل / أصبحت هي المفضلة حالياً.

مزايا HSL

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

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

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

يمنحك نموذج الألوان HSL مرونة أكبر في التحكم في درجات الألوان، والتشبع، والسطوع؛ مما يجعله أداةً قويةً لإنشاء تصاميم غنية وديناميكية باستخدام CSS.