👨‍🔬 👦🏻 🔵 نسيان RGB و HEX ℹ️ 👱🏿 ⛸️

هناك عدة طرق لتمثيل الألوان في CSS. واحد منهم هو نظام HSL. في هذه المقالة ، سأوضح لك الإمكانيات التي يفتحها لمصمم التخطيط.

ما هو HSL؟

يتم اشتقاق اسم تنسيق HSL من مزيج من الأحرف الأولى Hue (hue) و Satate (saturation) و Lightness (lightness أو brightness).

الصبغة هي قيمة اللون في عجلة الألوان ويتم ضبطها بالدرجات. يتوافق 0 ° مع اللون الأحمر و 120 ° إلى اللون الأخضر و 240 ° إلى اللون الأزرق. يمكن أن تختلف قيمة الصبغة من 0 إلى 359.

التشبع هو كثافة الألوان ، مقاسة من 0٪ إلى 100٪. يحدد مدى بعد اللون عن نفس السطوع. يميز

السطوع مدى سطوع اللون ويشار إليه كنسبة مئوية من 0٪ إلى 100٪. القيم الصغيرة تجعل اللون أغمق والقيم العالية أفتح ، والقيم المتطرفة 0٪ و 100٪ تتوافق مع الأسود والأبيض.

فوائد HSL ()

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

بعض الأمثلة

الألوان المشتقة من نفس اللون

واحدة من أكثر المهام شيوعًا: لعمل مكون يأخذ ظلًا أساسيًا واحدًا ، ولكنه يتكون من عدة أشكال مختلفة منه. في المثال الخاص بي ، هذا تنبيه نموذجي ، حيث يكون لون النص والخلفية والحدود لهما نفس اللون والتشبع ولكن مع سطوع مختلف:

.success {  
  border-color:     hsl(120, 50%, 40%);
  color:            hsl(120, 50%, 20%);
  background-color: hsl(120, 50%, 90%);
}

انظر كم هي جميلة وواضحة؟ من الواضح على الفور أن هذه "عائلة" من الزهور. في تنسيقات أخرى ، ستبدو كما يلي:

/* rgb */
.alert {
  border-color:     rgb(51, 153, 51);
  color:            rgb(25, 77, 25);
  background-color: rgb(217, 242, 217);
}

/* hex */
.alert {
  border-color:     #339933;
  color:            #194d19;
  background-color: #d9f2d9;
}

أنا لا أعرف عنك ، ولكن من الصعب بالنسبة لي أن أنظر إلى مثل هذا الرمز لأقول ما إذا كانت هذه الألوان مرتبطة بطريقة أو بأخرى.

لكن هذه تفاهات. يتم الكشف عن القوة الحقيقية عند استخدام خصائص مخصصة المغلق.

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

.alert {
  border-color:     hsl(var(--hue), 50%, 40%);
  color:            hsl(var(--hue), 50%, 20%);
  background-color: hsl(var(--hue), 50%, 90%);
}

التبييض

في هذا المثال ، يحتوي زر الإيقاف على تشبع أقل. لا يزال لديها لون أزرق خفي ، لكنه رمادي تقريبًا. وعندما تحوم ، يحافظ الزر على درجة اللون والتشبع ، ولكنه يصبح أكثر قتامة.

لحل هذه المشكلة ، يكفي تغيير واحد فقط من المعلمات الثلاث للحصول على لون مشتق ، ولكن مماثل. ماذا عند استخدام rgb أو hex ليس من السهل القيام به.

كما في المثال الأول ، يمكنك بسهولة تغيير تدرج الألوان بدون التأثير على جميع خصائص الألوان الأخرى في المكون الخاص بك.

وراثة اللون

واحدة من أروع التقنيات: إنشاء ظل واحد ، بدءًا من الآخر. يتم تحقيق ذلك عن طريق الإضافة البسيطة في calc ().

:root{
  --hue: 120;
}

header {
  background-color: hsl(var(--hue), 30%, 20%)
}

header button {
  background-color: hsl(calc(var(--hue) + 130), 80%, 50%)
}

في هذا المثال ، يعتمد تدرج الزر (+ 130 ° على عجلة الألوان) على تدرج الحاوية.

لذلك ، بطريقة بسيطة ، يمكنك إنشاء لوحات ألوان مرنة كاملة لمواقعك ، وتعيين ظل أساسي واحد فقط والبدء من ذلك.

وستحتفظ جميع مكوناتك بالتشبع والسطوع ، كما هو موضح في الأمثلة السابقة.

مستقبل

في مواصفات المستوى 4 من وحدة ألوان CSS ، تم وصف الوظائف الجديدة: lab () و lch () لتحديد الألوان بتنسيقات الاسم نفسه. تتمتع LCH بنفس المرونة مثل hsl ، ولكنها تجلب عددًا من التحسينات ، مع التركيز على الأجهزة الحديثة. يمكنك قراءة المزيد عن هذا في مقال " ألوان LCH في CSS: ماذا ولماذا وكيف؟ ".

مجموع

في رأيي ، فإن تنسيق hsl يتمتع بمرونة رائعة مقارنة بالبدائل. بالاقتران مع المتغيرات ، يمكنك عمليا جلب جميع الاحتمالات للعمل باستخدام الألوان من المعالجات الأولية إلى CSS الأصلية.

PS آسف على العنوان الصاخب :)

نسيان RGB و HEX