دروس الألوان
يتم عرض الألوان التي تجمع بين الضوء الأحمر والأخضر والأزرق.
أسماء الألوان
باستخدام CSS ، يمكن ضبط الألوان باستخدام أسماء الألوان:
مثال
| Color | Name |
|---|---|
| Red | |
| Yellow | |
| Cyan | |
| Blue | |
| Magenta |
قيم ألوان CSS
باستخدام CSS ، يمكن تحديد الألوان بطرق مختلفة:
- بأسماء الألوان
- كقيم RGB
- كقيم سداسية عشرية
- كقيم HSL (CSS3)
- كقيم HWB (CSS4)
- مع
currentcolorالكلمة
ألوان RGB
قيم ألوان RGB مدعومة في جميع المتصفحات.
يتم تحديد قيمة ألوان RGB بـ: rgb ( RED ، GREEN ، BLUE ).
تحدد كل معلمة كثافة اللون على أنها عدد صحيح بين 0 و 255.
على سبيل المثال ، يتم تقديم rgb (0،0،255) باللون الأزرق ، لأنه تم تعيين المعلمة الزرقاء على أعلى قيمة لها (255) ويتم تعيين القيم الأخرى على 0.
مثال
| Color | RGB | Color |
|---|---|---|
| rgb(255,0,0) | Red | |
| rgb(0,255,0) | Green | |
| rgb(0,0,255) | Blue |
غالبًا ما يتم تحديد ظلال الرمادي باستخدام قيم متساوية لجميع مصادر الضوء الثلاثة:
مثال
| Color | RGB | Color |
|---|---|---|
| rgb(0,0,0) | Black | |
| rgb(128,128,128) | Gray | |
| rgb(255,255,255) | White |
ألوان سداسية عشرية
قيم الألوان السداسية العشرية مدعومة أيضًا في جميع المتصفحات.
يتم تحديد اللون السداسي عشري بـ: # RR GG BB .
RR (أحمر) ، GG (أخضر) و BB (أزرق) هي أعداد صحيحة سداسية عشرية بين 00 و FF تحدد شدة اللون.
على سبيل المثال ، يتم عرض # 0000FF باللون الأزرق ، لأنه تم تعيين المكون الأزرق على أعلى قيمة له (FF) ويتم تعيين المكونات الأخرى على 00.
مثال
| Color | HEX | RGB | Color |
|---|---|---|---|
| #FF0000 | rgb(255,0,0) | Red | |
| #00FF00 | rgb(0,255,0) | Green | |
| #0000FF | rgb(0,0,255) | Blue |
غالبًا ما يتم تحديد ظلال الرمادي باستخدام قيم متساوية لجميع مصادر الضوء الثلاثة:
مثال
| Color | HEX | RGB | Color |
|---|---|---|---|
| #000000 | rgb(0,0,0) | Black | |
| #808080 | rgb(128,128,128) | Gray | |
| #FFFFFF | rgb(255,255,255) | White |
الأحرف الكبيرة أم الصغيرة؟
يمكنك استخدام الأحرف الكبيرة أو الأحرف الصغيرة لتحديد القيم السداسية العشرية.
الأحرف الصغيرة أسهل في الكتابة. الأحرف الكبيرة أسهل في القراءة.
أسماء الألوان
يدعم CSS 140 اسمًا قياسيًا من الألوان.
ستجد في الفصل التالي قائمة أبجدية كاملة بأسماء الألوان ذات القيم السداسية العشرية:
| Color Name | Hex | Color |
|---|---|---|
| AliceBlue | #F0F8FF | |
| AntiqueWhite | #FAEBD7 | |
| Aqua | #00FFFF | |
| Aquamarine | #7FFFD4 | |
| Azure | #F0FFFF | |
| Beige | #F5F5DC | |
| Bisque | #FFE4C4 |
الكلمة الأساسية الحالية
تشير currentcolorالكلمة الأساسية إلى قيمة خاصية اللون للعنصر.
مثال
سيكون لون حدود عنصر <div> التالي باللون الأزرق ، لأن لون نص العنصر <div> أزرق:
#myDIV {
color: blue; /* Blue text color */
border: 10px solid currentcolor;
/* Blue border color */
}