قيم الألوان القانونية لـ CSS
ألوان CSS
يمكن تحديد الألوان في CSS بالطرق التالية:
- ألوان سداسية عشرية
- ألوان سداسية عشرية مع شفافية
- ألوان RGB
- ألوان RGBA
- ألوان HSL
- ألوان HSLA
- أسماء الألوان المحددة مسبقًا / عبر المستعرضات
- مع
currentcolorالكلمة
ألوان سداسية عشرية
يتم تحديد اللون الست عشري بـ: #RRGGBB ، حيث تحدد الأعداد الصحيحة السداسية العشرية RR (أحمر) و GG (أخضر) و BB (أزرق) مكونات اللون. يجب أن تكون جميع القيم بين 00 و FF.
على سبيل المثال ، يتم عرض القيمة # 0000ff باللون الأزرق ، لأنه تم تعيين المكون الأزرق على أعلى قيمته (ff) وتم تعيين المكونات الأخرى على 00.
مثال
تحديد ألوان HEX مختلفة:
#p1 {background-color: #ff0000;} /* red */
#p2 {background-color: #00ff00;} /* green */
#p3 {background-color: #0000ff;} /* blue */
الألوان السداسية العشرية مع الشفافية
يتم تحديد اللون السداسي عشري بـ: #RRGGBB. لإضافة الشفافية ، أضف رقمين إضافيين بين 00 و FF.
مثال
حدد ألوان HEX مختلفة بالشفافية:
#p1a {background-color: #ff000080;} /* red transparency */
#p2a {background-color: #00ff0080;} /* green
transparency */
#p3a {background-color: #0000ff80;} /* blue
transparency */
ألوان RGB
يتم تحديد قيمة لون RGB باستخدام وظيفة rgb () ، والتي لها الصيغة التالية:
rgb(red, green, blue)
تحدد كل معلمة (أحمر وأخضر وأزرق) كثافة اللون ويمكن أن تكون عددًا صحيحًا بين 0 و 255 أو قيمة النسبة المئوية (من 0٪ إلى 100٪).
على سبيل المثال ، يتم تقديم قيمة rgb (0،0،255) باللون الأزرق ، لأنه يتم تعيين المعلمة الزرقاء على أعلى قيمة لها (255) ويتم تعيين القيم الأخرى على 0.
أيضًا ، تحدد القيم التالية لونًا متساويًا: rgb (0،0،255) و rgb (0٪ ، 0٪ ، 100٪).
مثال
تحديد ألوان RGB المختلفة:
#p1 {background-color: rgb(255, 0, 0);} /* red */
#p2 {background-color: rgb(0, 255, 0);} /* green */
#p3 {background-color: rgb(0, 0, 255);} /* blue */
ألوان RGBA
قيم ألوان RGBA هي امتداد لقيم ألوان RGB مع قناة ألفا - والتي تحدد عتامة الكائن.
يتم تحديد لون RGBA بوظيفة rgba () ، والتي لها الصيغة التالية:
rgba(red, green, blue, alpha)
معامل ألفا هو رقم بين 0.0 (شفاف بالكامل) و 1.0 (معتم بالكامل).
مثال
تحديد ألوان RGB مختلفة مع عتامة:
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */
ألوان HSL
يشير HSL إلى تدرج الألوان والتشبع والخفة - ويمثل تمثيل تنسيق أسطواني للألوان.
يتم تحديد قيمة لون HSL باستخدام وظيفة hsl () ، والتي لها بناء الجملة التالي:
hsl(hue, saturation, lightness)
Hue هي درجة على عجلة الألوان (من 0 إلى 360) - 0 (أو 360) باللون الأحمر ، و 120 باللون الأخضر ، و 240 باللون الأزرق. التشبع هو قيمة النسبة المئوية ؛ 0٪ تعني ظل رمادي و 100٪ لون كامل. الخفة هي أيضا نسبة؛ 0٪ أسود ، 100٪ أبيض.
مثال
تحديد ألوان HSL المختلفة:
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */
ألوان HSLA
قيم ألوان HSLA هي امتداد لقيم ألوان HSL مع قناة ألفا - والتي تحدد عتامة الكائن.
يتم تحديد قيمة لون HSLA باستخدام وظيفة hsla () ، والتي لها بناء الجملة التالي:
hsla(hue, saturation, lightness, alpha)
معامل ألفا هو رقم بين 0.0 (شفاف بالكامل) و 1.0 (معتم بالكامل).
مثال
حدد ألوان HSL المختلفة مع التعتيم:
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */
أسماء الألوان المحددة مسبقًا / عبر المستعرضات
تم تحديد أسماء 140 لونًا مسبقًا في مواصفات ألوان HTML و CSS.
على سبيل المثال: blue، red، coral، brown، إلخ:
مثال
حدد أسماء ألوان مختلفة:
#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}
يمكن العثور على قائمة بجميع الأسماء المحددة مسبقًا في مرجع أسماء الألوان .
الكلمة الأساسية الحالية
تشير currentcolorالكلمة الأساسية إلى قيمة خاصية اللون لعنصر ما.
مثال
سيكون لون حدود عنصر <div> التالي باللون الأزرق ، لأن لون نص العنصر <div> أزرق:
#myDIV {
color: blue; /* Blue text color */
border: 10px solid currentcolor;
/* Blue border color */
}