الدرس السادس: الألوان CSS Colors

يتم تطبيق الألوان داخل CSS بذكر اسم اللون المعتمد مسبقاً أو استخدام قَيم الألوان بواسطة أحد أنظمة الألوان: (RGB, HEX, HSL, RGBA, HSLA).

أنظمة الألوان الأكثر شيوعاً:

أسماء الألوان المعتمدة في CSS

وهي الألوان المعتمدة في صفحات الويب والمسماه مسبقاً ومنها (Red, Black, Blue, Orange, Tomato, Gray).

مثال (6):

<h2 style=”color:Tomato”> Hello Tomato Color </h2>

النتيجة:

 Hello Tomato Color 

1- ألوان RGB 

وهو نظام ألوان يمثل إضاءة الألوان (الأحمر Red - الأخضر Green – الأزرق Blue) والصورة العامة لتمثل اللون:

Rgb(red, green, blue)

يتم تعيين درجة اللون  من الألوان الثالثة بواسطة درجة رقم اللون (من 0 وحتى 255).

مثال (7):

<h2 style=”color: rgb(121, 169, 0)”> Hello Green Color </h2>

النتيجة:

Hello Green Color

2- ألوان HEX

 في هذا النظام يمكن تحديد اللون باستخدام قيمة سداسية عشرية، والصورة العامة لتمثل اللون:

#rrggbb

حيث تكون rr هي مكان اللون الأحمر و gg للون الأخضر و bb هي مكان لقيم اللون الأزرق، ويتم وضع قيم سداسية عشرية بين 00 وff  مثل النظام العشري (0-255).

مثال (8):

<h2 style=”color: #ff0000”> Hello Red Color </h2>

النتيجة:

Hello Red Color 

من خلال المثال أعلاه، يتم عرض #ff0000 باللون الأحمر، لأنه تم ضبط اللون الأحمر على أعلى قيمة له وهي ff ويتم تعيين الآخرين على أقل قيمة (00).

يمكن عرض اللون الأسود عند ضبط جميع القيم على 00، هكذا: #000000

لعرض اللون الأبيض، اضبط جميع القيم على ff، هكذا: #ffffff