اللون

The CSS Podcast - 006: Color Part One

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

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

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

اختيار الألوان

الألوان المُسمّاة

إنّ أبسط طريقة لاختيار لون هي اختيار أحد الألوان المُسمّاة الـ 148 في CSS. هذه أسماء بسيطة باللغة الإنجليزية، مثل purple وtomato وgoldenrod. وفقًا لكتاب Web Almanac، تشمل بعض الأسماء الأكثر رواجًا black وwhite وred وblue وgray. تشمل قنواتنا المفضّلة goldenrod aliceblue وhotpink.

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

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

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

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
• ‫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).

‫HSL (درجة اللون، التشبع، الإضاءة)

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

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

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

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

يتم تعريف مَعلمة ألفا في 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).

ألوان بدقة عالية

يحدِّد نموذجا RGB وHSL الألوان في نطاق sRGB. تتيح الشاشات الحديثة عرض مزيد من الألوان التي لا يمكن وصفها باستخدام هذه التنسيقات، وخارج نطاق sRGB. يمكنك اختيار هذه الألوان باستخدام مجموعة متنوعة من دوال CSS.

دالة color()

h1 {
  color: color(srgb 0.9 0.2 0.4);
}

تتيح لك دالة color() في CSS اختيار لون في مساحة ألوان معيّنة. الوسيطة الأولى هي مساحة الألوان التي سيتم استخدامها، والتي تحدّد خيارات القنوات التالية. مثل rgb()، يمكنك ضبط قناة الشفافية من خلال ضبط رقم بين 0 و1، أو نسبة مئوية، بعد /.

على سبيل المثال، يمكن تحديد لون RGB الأحمر الداكن في مقتطف الرمز السابق، والذي يتم تحديده على أنّه rgb(183 21 64)، باستخدام النسب المئوية على النحو التالي: rgb(72% 8% 25%). يمكنك استخدام الدالة color() مع الكلمة الرئيسية srgb لتحديد اللون نفسه باستخدام color(srgb .72 .08 .25).

يحدّد العنصر srgb مساحة اللون ويخبرنا بأنّ الوسيطات الثلاث التالية هي الأحمر والأخضر والأزرق. تتراوح القيم من 0 إلى 1 بدلاً من 0 إلى 255.

على غرار rgb()، يمكننا ضبط شفافية العنصر باستخدام / ونسبة مئوية أو قيمة عشرية بين 0 و1.

هناك العديد من مساحات الألوان التي يمكنك استخدامها مع الدالة color()، ولكل منها نقاط قوة وحالات استخدام مختلفة.

Display P3

h1 {
  color: color(display-p3 0.9 0.2 0.4);
}

تحتوي مجموعة ألوان Display P3 على ألوان أكثر بنسبة% 50 من sRGB. يمكنك تحديد جميع الألوان في نطاق Display P3 باستخدام مساحة ألوان Display P3 باستخدام الدالة color().

لضبط اللون الأسود في Display P3، حدِّده على أنّه color(display-p3 0 0 0). بعد تحديد مساحة ألوان display-p3 لدالة color()، ستتوفّر لديك ثلاث قنوات: الأحمر والأخضر والأزرق، تمامًا مثل color(srgb). ولكن بما أنّ قيم قناة العميل represent coordinates in a wider color space، ستعني قيم قناة العميل نفسها معاني مختلفة.

color(srgb 1 .5 0) هو لون برتقالي يعادل color(display-p3 0.93596 0.52724 0.1983). يمكننا جعل اللون البرتقالي أكثر حيوية من خلال توسيع نطاقه خارج مساحة sRGB إلى color(display-p3 1 .5 0).

Oklab

يتمّ تحديد Oklab باستخدام الدالة oklab()، مع قنوات Lightness وa وb. وهي مفيدة لإنشاء تدرّجات ألوان سلسة ولتعديل تشبُّع اللون مع الحفاظ على تدرّج اللون والإضاءة.

h1 {
  color: oklab(75% 0.1 0.1)
}

تتراوح قناة السطوع بين 0 و1 أو 0% و100%. ستكون الألوان التي تبلغ 0 للون الأبيض دائمًا سوداء.

تمتد قناة a من -0.4 إلى 0.4 أو من 0% إلى 100%. تكون القيم الأقل باللون الأخضر، والقيم الأعلى باللون الأحمر.

تمتد قناة b من -0.4 إلى 0.4 أو من 0% إلى 100%. تكون القيم الأقل أزرق، والقيم الأعلى أكثر صفراء.

OkLCh

OkLCh هو الشكل القطبي أو الأسطواني لـ OKLab، ويتم تحديده من خلال قنوات السطوع والتشبع والصبغة. وهو مفيد لضبط الألوان بطريقة متسقة من الناحية الإدراكية. وهذا يعني أنّ التغييرات التي يتم إجراؤها على درجة اللون لن تؤثّر في مدى سطوع اللون أو تشبعه.

h1 {
  color: oklch(80% 0.1 200)
}

لقد عملت على الإضاءة والصبغة في نظام الألوان HSL، ويشبه المقياس اللوني التشبع. يمكنك ضبط اللون الأسود باستخدام oklch(0 0 0) والأبيض باستخدام oklch(1 0 0).

تتراوح قناة السطوع بين 0 و1 أو 0% و100%. ستكون الألوان التي تبلغ 0 للون الأبيض دائمًا سوداء.

تحدّد قناة الألوان الزاهية مدى حيوية اللون، وسيتم إزالة التشبّع عند القيمة 0 أو ‎0%، وسيكون للقيم الأعلى ألوان أكثر. القيمة 100% هي نفسها القيمة .4، ولكن من الممكن الخروج بسرعة من النطاق باستخدام قيم قريبة من .4.

يتم تحديد درجة اللون بالدرجات، تمامًا مثل hsl().

لا يخضع OkLCh لمجموعة ألوان مثل Display P3، لذا عليك التأكّد من إنشاء ألوان يمكن عرضها. oklch(80% 50% 200) هو لون أزرق فاتح يبدو رقميًا أنّه لون معقول، ولكنه خارج نطاق Display P3.

المساحات الأخرى

هناك العديد من الطرق لتحديد الألوان في CSS، ولا تحتاج إلى تعلمها كلها. يُستخدم تنسيق rgb() وتنسيق Hex بشكل شائع في أدوات التصميم وفي الرمز البرمجي الحالي، ومن المفيد معرفة كيفية استخدامهما. من المفيد أيضًا أن تكون على دراية بتنسيق يمكن التلاعب به بشكل متوقّع. يمكنك تغيير قيم hsl أو oklch بشكل مباشر، والتعرّف على اللون الناتج.

اطّلِع على مزيد من المعلومات في مقالة الوصول إلى المزيد من الألوان والمساحات الجديدة.

ألوان النظام

بالإضافة إلى الألوان المُسمّاة مثل البنفسجي أو الأزرق المخضر، تتوفّر أيضًا كلمات رئيسية خاصة:

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

التلاعب بالألوان

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

color-mix()

لاستخدام نتيجة مزج لونَين، يمكنك استخدام الطريقة color-mix(). وهذا مفيد لخلط لون مع الأبيض أو الأسود لإنشاء لون أفتح أو أغمق.

لاستخدام color-mix()، عليك تحديد اللونَين وطريقة مزجهما (طريقة الاستقراء) ومقدار كل لون تريده.

بالنسبة إلى مساحات الألوان التي تحتوي على صبغة، يمكنك أيضًا تحديد الاتجاه الذي تريد اتّباعه في عجلة الألوان. الإعداد التلقائي هو استخدام مسار shorter، ولكن يمكنك أيضًا اختيار longer أو increasing وdecreasing.

يشكّل نطاق الألوان والاتجاه معًا طريقة الاستقراء.

يمكنك أيضًا تقديم مقدار كل لون لمزجه.

بنية الألوان النسبية

يمكنك أيضًا العمل بشكل مباشر أكثر مع لون باستخدام بنية اللون النسبية التي تسمح لك باختيار أي لون وإجراء عمليات حسابية عليه لإنشاء لون جديد.

h1 {
  color: oklch(from red l c h);
}

يعني استخدام الدالة oklch() أنّك ستتعامل مع قنوات السطوع والتشبع والصبغة. بعد الكلمة الرئيسية from، يمكنك تحديد أي لون بأي بنية نحوية. يمنحك ذلك بعد ذلك كل قيمة قناة لاستخدامها كحرف. سيؤدي ذلك إلى ظهور اللون الأحمر بدون أي تعديلات.

لإجراء تعديلات، يمكنك استخدام الدالة calc() لتغيير قيم channel ، أو استبدال القناة بالكامل. هنا نستخدم red اللون نفسه، ولكنّنا نحدّده باستخدام oklch(62% 0.25 29).

h1 {
  color: oklch(from oklch(62% 0.25 29) calc(l / 2) c 180);
}

قناة السطوع هي 62% / 2 أو 31%. لم يتم تغيير قناة التظليل، لذا هي 0.25. قناة تدرج اللون هي 180. يؤدي ذلك إلى إنشاء اللون الجديد oklch(31% 0.25 180)، وهو لون أخضر داكن جديد.

غالبًا ما ستستخدم خاصيّة مخصّصة كسمة إدخال اللون. يتيح لك ذلك إنشاء نُسخ مختلفة من الألوان بشكل ديناميكي.

يمكنك إجراء ذلك باستخدام أيّ دالة ألوان، ومن المفيد إجراء ذلك باستخدام الدوالّ الألوان التي تحتوي على قنوات تصف التغييرات التي تريد إجراؤها. على سبيل المثال، إذا كنت تريد تعديل درجة سطوع لون معيّن، اختَر oklch أو hsl، لأنّه يمكنك تغيير قناة السطوع مباشرةً.

h1 {
  color: oklch(from var(--primary-color) calc(l * 0.9) c h);
}

باستخدام بنية الألوان النسبية (RCS)، يمكنك إنشاء لوحة ألوان لاستخدامها في موقعك الإلكتروني.

ألوان خارج النطاق

سيتم عرض المحتوى الخاص بك على شاشات مختلفة قد تتيح أو لا تتيح ألوانًا عريضة النطاق. إذا حدّدت لونًا لا تتوافق معه الشاشة، سيتم خضوعه لعملية تُعرف باسم "تعيين النطاق اللوني" للعثور على لون مشابه يمكنه الظهور على الشاشة. إذا كنت تريد تحديد ألوان معيّنة في هذه الحالات، يمكنك استخدام استعلام الوسائط color-gamut.

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

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

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

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

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

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

الموارد

• عرض توضيحي مفيد يعرض كيفية استخدام الزوايا مع HSL
• دليل شامل حول الألوان
• دليل شامل حول الألوان ذات النطاق الواسع
• [فيديو] شرح لكيفية قراءة الرموز الستّ عشرية
• آلية عمل الرموز الست عشرية