اللون

The CSS Podcast - 006: Color Part One

يُعدّ اللون جزءًا مهمًا من أيّ موقع إلكتروني، وفي CSS، تتوفّر العديد من الخيارات لأنواع الألوان والدوالّ والمعالجات.

كيف تحدّد نوع اللون المراد استخدامه؟ كيف تجعل الألوان شبه شفافة؟ في هذا الدرس، ستتعرّف على الخيارات المتاحة لك لمساعدتك في اتخاذ القرارات الصحيحة لمشروعك وفردك.

تتضمّن CSS أنواع بيانات مختلفة، مثل السلاسل والأرقام. واللون هو أحد هذه الأنواع ويستخدم أنواعًا أخرى، مثل الأرقام لتعريفاته الخاصة.

الألوان الرقمية

من المرجّح جدًا أن يكون أول استخدام لك للألوان في CSS من خلال الألوان الرقمية. يمكننا العمل مع قيم الألوان الرقمية في بضع أشكال مختلفة.

الألوان السداسية العشرية

h1 {
  color: #b71540;
}

يُعدّ الترميز السداسي العشري (الذي غالبًا ما يتم اختصاره إلى hex) بنية مختصرة لنموذج RGB، ويحدّد قيمة رقمية لكل من الأحمر والأخضر والأزرق، وهي الألوان الأساسية الثلاثة.

النطاقات الست عشرية هي 0-9 وA-F. عند استخدامها في تسلسل من ستة أرقام، تتم ترجمة هذه الأرقام إلى النطاقات الرقمية لنموذج RGB التي تتراوح بين 0 و255، والتي تتوافق مع قنوات الألوان الأحمر والأخضر والأزرق على التوالي.

يمكنك أيضًا تحديد قيمة شفافية باستخدام أي ألوان رقمية. قيمة ألفا هي نسبة مئوية للشفافية. في الرمز السداسي عشري، تضيف رقمين آخرين إلى التسلسل المكوّن من ستة أرقام، لإنشاء تسلسل مكوّن من ثمانية أرقام. على سبيل المثال، لضبط اللون الأسود في رمز سداسي عشري، اكتب #000000. لإضافة شفافية بنسبة% 50، غيِّر الرمز إلى #00000080.

بما أنّ المقياس السداسي العشري هو 0-9 وA-F، من المحتمل أنّ قيم الشفافية لا تتوافق مع توقعاتك. في ما يلي بعض القيم الرئيسية الشائعة التي تمت إضافتها إلى الرمز السداسي للأسود، #000000:

  • قيمة شفافية العنصر التي تبلغ% 0، أي شفافة كاملة، هي 00: #00000000
  • ‫50% من ألفا هي 80: #00000080
  • ‫الإصدار التجريبي بنسبة% 75 هو BF: #000000BF

لتحويل رقم سداسي عشري مكوّن من رقمَين إلى رقم عشري، اخذ الرقم الأول واضربه في 16 (لأنّ الأساس السداسي العشري هو 16)، ثم أضِف الرقم الثاني. باستخدام BF كمثال على نسبة 75% من الإصدار التجريبي:

  1. يُساوي "ب" 11، وعند ضربه في 16 يساوي 176.
  2. F يساوي 15
  3. 176 + 15 = 191
  4. قيمة الشفافية هي 191، أي% 75 من 255.

RGB (الأحمر والأخضر والأزرق)

h1 {
  color: rgb(183, 21, 64);
}

يتم تحديد ألوان RGB باستخدام دالة اللون rgb()، باستخدام الأرقام أو النِسب المئوية كمَعلمات. يجب أن تكون الأرقام ضمن النطاق 0-255 وأن تتراوح النسب المئوية بين 0% و100%‌. تعمل ألوان RGB على مقياس من 0 إلى 255، ويكون الرقم 255 مكافئًا لنسبة %100، ويكون الرقم 0 مكافئًا لنسبة %0.

لضبط اللون الأسود بتنسيق RGB، حدِّده على أنّه rgb(0 0 0)، أي صفر للّون الأحمر وصفر للّون الأخضر وصفر للّون الأزرق. يمكن أيضًا تعريف اللون الأسود على أنّه rgb(0%, 0%, 0%). واللون الأبيض هو العكس تمامًا: rgb(255, 255, 255) أو rgb(100%, 100%, 100%).

يتم ضبط قيمة ألفا في rgb() بطريقتَين: أضِف / بعد المَعلمات red وgreen وblue، أو استخدِم الدالة rgba(). يمكن تحديد مُعامل ألفا باستخدام نسبة مئوية أو قيمة عشرية تتراوح بين 0 و1. على سبيل المثال، لضبط قيمة شفافية بنسبة% 50 للون الأسود في المتصفّحات الحديثة، اكتب: rgb(0 0 0 / 50%) أو rgb(0 0 0 / 0.5). للحصول على دعم أوسع، استخدِم الدالة rgba()، واكتب: rgba(0, 0, 0, 50%) أو rgba(0, 0, 0, 0.5).

الفضاء اللوني (الصبغة والإشباع والإضاءة)

h1 {
  color: hsl(344, 79%, 40%);
}

تشير HSL إلى الصبغة والتشبّع والإضاءة. يصف تدرج اللون القيمة على عجلة الألوان، من 0 إلى 360 درجة، بدءًا من الأحمر (أي القيمة 0 و360). سيكون اللون 180 أو% 50 ضمن النطاق الأزرق. وهو مصدر اللون الذي نراه.

عجلة ألوان تتضمّن تصنيفات لقيم الدرجات بزيادة 60 درجة لمساعدة العناصر المرئية في معرفة ما تمثله كل قيمة زاوية

التشبّع هو مدى حيوية درجة اللون المحدّدة. سيظهر اللون بدرجات الرمادي إذا تم إزالة التشبّع منه بالكامل (بدرجة تشبّع 0%). وأخيرًا، فإنّ السطوع هو المَعلمة التي تصف مقياس الضوء المُضاف من الأبيض إلى الأسود. سيؤدي مستوى السطوع 100% إلى الحصول على اللون الأبيض دائمًا.

باستخدام دالة الألوان hsl()، يمكنك تحديد اللون الأسود الحقيقي عن طريق كتابة hsl(0 0% 0%) أو حتى hsl(0deg 0% 0%). يرجع ذلك إلى أنّ مَعلمة hue تحدّد درجة على عجلة الألوان، وتكون 0-360 إذا كنت تستخدم نوع الرقم. يمكنك أيضًا استخدام نوع الزاوية، وهو (0deg) أو (0turn). يتم تحديد كل من التشبع والسطوع بالنسب المئوية.

دالة الألوان HSL مقسّمة بصريًا يستخدم تدرج اللون عجلة الألوان. يعرض التشبع مزيجًا من الرمادي والأزرق المخضر. يعرض مقياس السطوع اللون الأسود إلى الأبيض.

يتم تعريف مَعلمة ألفا في hsl()، بالطريقة نفسها المستخدَمة في rgb() من خلال إضافة / بعد مَعلمات درجة اللون والتشبع والسطوع أو باستخدام الدالة hsla(). يمكن تحديد مُعامل ألفا باستخدام نسبة مئوية أو قيمة عشرية تتراوح بين 0 و1. على سبيل المثال، لضبط قيمة شفافية سوداء بنسبة% 50، استخدِم: hsl(0 0% 0% / 50%) أو hsl(0 0% 0% / 0.5). باستخدام الدالة hsla()، اكتب: hsla(0, 0%, 0%, 50%) أو hsla(0, 0%, 0%, 0.5).

الكلمات الرئيسية للألوان

هناك 148 لونًا مُعنوَنًا في CSS. هذه أسماء بسيطة باللغة الإنجليزية، مثل البنفسجي والطماطم والقضبان الذهبية. وفقًا لموسوعة الويب، تشمل بعض الأسماء الأكثر شيوعًا أسود وأبيض وأحمر وأزرق ورمادي. تشمل الألوان المفضّلة لدينا goldenrod وaliceblue وhotpink.

بالإضافة إلى الألوان العادية، تتوفّر أيضًا كلمات رئيسية خاصة:

  • transparent هو لون شفاف بالكامل. وهي أيضًا القيمة الأولية لـ background-color.
  • ‫currentColor هي القيمة الديناميكية المحسوبة حسب السياق للسمة color. إذا كان لون النص هو red ثم ضبط border-color على currentColor، سيكون اللون أيضًا أحمر. إذا لم يكن للعنصر الذي تحدّد فيه currentColor قيمة color محدّدة، سيتم احتساب currentColor من خلال التسلسل بدلاً من ذلك.

مواضع استخدام اللون في قواعد CSS

إذا كانت خاصية CSS تقبل نوع البيانات <color> كقيمة، ستقبل أيًا من الطرق المذكورة أعلاه للتعبير عن اللون. لتنسيق النص، استخدِم السمات color وtext-shadow وtext-decoration-color التي تقبل جميعها اللون كقيمة أو كجزء من القيمة.

بالنسبة إلى الخلفيات، يمكنك ضبط لون كقيمة لسمة background أو background-color. يمكن أيضًا استخدام الألوان في التدرجات، مثل linear-gradient. التدرجات هي نوع من الصور التي يمكن تحديدها آليًا في CSS. تقبل التدرجات اللونية لونَين أو أكثر في أيّ تركيبة من تنسيقات الألوان، مثل تنسيقات hex أو rgb أو hsl.

أخيرًا، يمكنك استخدام border-color وoutline-color لضبط لون الحدود والمخططات على المربّعات. تقبل السمة box-shadow أيضًا اللون كإحدى القيم.

التحقّق من فهمك

اختبِر معلوماتك حول الألوان

أيّ من الألوان التالية صالحة؟

rbga(400 0 1)
rbga هو خطأ إملائي في rgba و400 أكبر من الحد الأقصى المسموح به، ما يجعله غير صالح.
#0f08
🎉
#OOFZ2
هذه ليست قيمة سداسية عشرية، بل هي 5 أرقام فقط وتتضمّن الحرف Z، ما يجعلها غير صالحة.
rgb(255, 0, 0)
🎉
hsl(180deg 50% 50%)
🎉
hotpink
🎉

رصد لون hsl غير صالح

hsl(5, 0%, 90%)
هذه قيمة hsl صالحة.
hsl(.5turn 40% 60%)
هذه قيمة hsl صالحة.
hsl(0, 0, 0)
🎉 لقد نجحت في العثور على القيمتين الثانية والثالثة اللتين يجب أن تكونا نسبًا مئوية.
hsl(2rad 50% 50%)
هذه قيمة hsl صالحة.
hsl(0 0% 0% / 20%)
هذه قيمة hsl صالحة.

الموارد