اللون

بودكاست CSS - 006: اللون الأول

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

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

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

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

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

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

h1 {
  color: #b71540;
}

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

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

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

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

• قيمة ألفا 0% - التي تكون شفافة تمامًا - 00: #00000000
• قيمة ألفا 50% هي 80: #00000080
• قيمة ألفا 75% هي BF: #000000BF

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

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

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

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

يتم تحديد ألوان النموذج اللوني أحمر أخضر أزرق (RGB) باستخدام 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٪ في النطاق الأزرق. إنه أصل اللون الذي نراه.

تشبع اللون هو مدى حيوية تدرج اللون المحدد. سيظهر لون غير مشبّع تمامًا (بتشبع 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).

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

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

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

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

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

الموارد

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