اللون

بودكاست CSS - 006: الجزء الأول من اللون

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

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

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

ألوان رقمية

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

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

h1 {
  color: #b71540;
}

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

النطاقات السداسية العشرية هي 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% alpha:

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

نموذج أحمر أخضر أزرق (أحمر، أخضر، أزرق)

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

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

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

يتم ضبط ألفا في rgb() بإحدى طريقتين. أضِف / بعد المعلَمات الحمراء والخضراء والأزرق، أو استخدِم الدالة 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).

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

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. إنها أسماء إنجليزية بسيطة مثل البنفسجي والطماطم والقضبان الذهبية. بعض الأسماء الأكثر شيوعًا، وفقًا لتقويم الويب، هي الأسود والأبيض والأحمر والأزرق والرمادي. تشمل التطبيقات المفضّلة لدينا اللون الذهبي اللون واللون أليس الأزرق واللون الوردي الساخن.

بالإضافة إلى الألوان القياسية، هناك أيضًا كلمات رئيسية خاصة متاحة:

  • 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)
🎉 وفقًا لذلك، يجب أن تكون القيمتان 2 و3 نِسبًا مئوية.
hsl(2rad 50% 50%)
هذه قيمة hsl صالحة.
hsl(0 0% 0% / 20%)
هذه قيمة hsl صالحة.

المراجِع