استخدام ألوان HSL في CSS

من واقع خبرتي ، فإن معظم الألوان التي أراها الأشخاص الذين يستخدمونها في CSS هي الألوان السداسية واللون الأحمر والأخضر والأزرق. في الآونة الأخيرة ، بدأت أرى المزيد من استخدام ألوان HSL ، ومع ذلك ، ما زلت أعتقد أن الإمكانات الكاملة لـ HSL قد تم التغاضي عنها. بمساعدة هذه المقالة ، أود أن أوضح لك كيف يمكن أن يساعدنا HSL حقًا في العمل بشكل أفضل مع الألوان في CSS.

مقدمة

عادةً ما نستخدم أكواد الألوان السداسية العشرية (ألوان سداسية عشرية) وهي جيدة ، لكن بها مشكلتان:

• هم يحدون.
• يصعب فهمها من قراءتها.

أعني بكلمة "محدود" أنه ليس من السهل تغيير اللون دون فتح عجلة الألوان واختيار اللون بنفسك. إضافة إلى ذلك ، ليس من السهل تخمين اللون من النظر إلى الكود السداسي.

ضع في اعتبارك الشكل التالي:

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

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

لحسن الحظ ، يمكن أن تساعدنا ألوان HSL في حل هذه المشكلة المحددة ، وتفتح لنا الكثير من الاحتمالات.

ما هو HSL؟

HSL تعني تدرج اللون والتشبع والخفة. يعتمد على عجلة الألوان RGB. كل لون له زاوية وقيمة نسبة مئوية لقيم التشبع والإضاءة.

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

ملاحظة : أنا أستخدم تطبيق Sketch ، لكنك تستخدم أي أداة تصميم تريدها.

ضع في اعتبارك الشكل التالي:

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

التشبع

يتحكم التشبع في مدى تشبع اللون. 0% غير مشبع تمامًا ، بينما 100% مشبع تمامًا.

خفة

أما بالنسبة للخفة ، فهي تتحكم في درجة اللون الفاتح أو الغامق. 0% أسود ، و 100% أبيض.

ضع في اعتبارك الشكل التالي:

مع ذلك ، لدينا ثلاث قيم تمثل اللون والزاوية والتشبع والسطوع. إليك كيفية استخدام اللون في CSS:

 .element { background-color: hsl(196, 73%, 62%); }

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

ضع في اعتبارك الشكل التالي:

هل تشعر أن الألوان الثلاثة مرتبطة ببعضها البعض من حيث كيفية تشبع اللون ، وكيف يكون غامقًا أو فاتحًا؟ تم تحقيق ذلك من خلال تغيير زاوية اللون فقط. هذا هو ما يميز ألوان HSL. تعد القراءة والتعديل أكثر ملاءمة للإنسان من أي نوع لوني آخر.

حالات الاستخدام لألوان HSL

تغيير الألوان عند التمرير

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

 :root { --primary-h: 221; --primary-s: 72%; --primary-l: 62%; } .button { background-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l)); } .button:hover { --primary-l: 54%; }

لاحظ كيف جمعت متغيرات CSS مع ألوان HSL. عند التمرير ، أحتاج فقط إلى تغيير قيمة الخفة. تذكر ، كلما زادت القيمة ، أخف. للحصول على ظل أغمق ، نحتاج إلى تقليل القيمة.

مزيج من الألوان الملونة

يمكن أن يكون HSL مفيدًا عندما يكون لدينا تصميم يستخدم نفس اللون ولكن بظلال مختلفة. ضع في اعتبارك التصميم التالي:

يحتوي تنقل الرأس الرئيسي على اللون الأساسي ، بينما يحتوي التنقل الثانوي على ظل أفتح. مع HSL ، يمكننا الحصول على الظل الفاتح بسهولة عن طريق تغيير قيمة الإضاءة .

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

المحور الأول:

المحور الثاني:

لوحات الألوان

من خلال تغيير الإضاءة ، يمكننا إنشاء مجموعة من الظلال للون يمكن استخدامها في جميع أنحاء واجهة المستخدم حيثما أمكن ذلك.

هذا مفيد لأنظمة التصميم حيث يزود المصممون المطورين بظلال لكل لون من ألوان العلامة التجارية.

هنا عرض تفاعلي يوضح ذلك. يغير شريط تمرير الإدخال قيمة الصبغة فقط ، ويتغير باقي الظلال بناءً على ذلك.

لون أبيض مخصص

في كثير من الأحيان ، نحتاج إلى تلوين النص باللون الأبيض لإبراز النص. هذا اللون الأبيض ممل ، ويمكننا استبداله بدرجة فاتحة جدًا من اللون الموجود لدينا.

ضع في اعتبارك المثال التالي:

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

الاختلافات في الزر

حالة استخدام مفيدة أخرى لألوان HSL هي عندما يكون لدينا خيارات أولية وثانوية من نفس اللون ولكن بظلال مختلفة. في هذا المثال ، يكون الزر الثانوي خفيفًا جدًا للون الرئيسي. ألوان HSL مثالية لذلك.

 :root { --primary-h: 221; --primary-s: 72%; --primary-l: 62%; } .button { background-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l)); } .button--secondary { --primary-l: 90%; color: #222; } .button--ghost { --primary-l: 90%; background-color: transparent; border: 3px solid hsl(var(--primary-h), var(--primary-s), var(--primary-l)); }

التغيير والتبديل في اختلافات الزر الأساسي حيث يكون سريعًا ويمكن تمديده أكثر للاستخدام على نطاق أوسع. سيؤدي تغيير قيمة hue إلى تغيير سمات جميع الأزرار.

تأثيرات ديناميكية باهتة

في بعض الحالات ، قد نحتاج إلى التدرج اللوني للحصول على ظل فاتح جدًا للتوقف اللوني الآخر. مع HSL ، يمكننا استخدام نفس اللون ولكن بقيمة إضاءة مختلفة للون الثاني.

 .section { background: linear-gradient(to left, hsl(var(--primary-h), var(--primary-s), var(--primary-l)), hsl(var(--primary-h), var(--primary-s), 95%)); } .section-2 { --primary-h: 167; }

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

هذا كل شيء مع حالات الاستخدام. أتمنى أن تكون قد تعلمت شيئًا جديدًا ومفيدًا.

خاتمة

ألوان HSL قوية جدًا عندما نستخدمها بالطريقة الصحيحة. يمكنهم توفير الوقت والجهد وحتى مساعدتنا في استكشاف الخيارات الخاصة بكيفية تطبيق اللون على التصميم.