CSS/color

خاصية color في CSS تضبط القيمة اللونية للأمامية (foreground) للمحتوى النصي للعنصر وللزخرفة النصية (text decorations)، وستضبط أيضًا قيمة الكلمة المحجوزة currentColor، والتي يمكن أن تستخدم كقيمة غير مباشرة في الخاصيات الأخرى التي لا تأخذ لونها من الخاصية color مباشرةً (مثل الخاصية border-color).

p {
  color: red;
}

بطاقة الخاصية

القيمة الابتدائية	تختلف من متصفحٍ لآخر.
تُطبَّق على	جميع العناصر.
قابلة للوراثة	نعم
قابلة للحركة	نعم
القيمة المحسوبة	إذا كانت القيمة نصف شفافة، فستكون القيمة المحسوبة تكافئ الدالة rgba()‎، وإن لم تكن كذلك فستكافئ الدالة rgb()‎. الكلمة المحجوزة transparent ستكافئ ‎rgba‎(0,0,0,0)‎.

/* كلمة محجوزة */
color: currentcolor;

/* أسماء الألوان */
color: red;
color: orange;
color: tan;

/* قيم ست عشرية */
color: #090;
color: #009900;
color: #090a;
color: #009900aa;

/* استخدام الدوال */

/* <rgb()> */
color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.3);

/* <hsl()> */
color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);

/* القيم العامة */
color: inherit;
color: initial;
color: unset;

لاحظ أنَّ القيمة يجب أن تكون لونًا، ولا يجوز أن تكون تدرجًا لونيًا (gradient).

استخدام الكلمة المحجوزة:

color: currentcolor

استخدام أسماء الألوان:

color: red

color: orange

color: tan

استخدام القيم الست عشرية:

color: #090

color: #009900

color: #090a

color: #009900aa

استخدام الدوال rgb()‎ و rgba()‎ و hsl()‎ و hsla()‎:

color: rgb(34, 12, 64)

color: rgba(34, 12, 64, 0.6)

color: hsl(30, 100%, 50%)

color: hsla(30, 100%, 50%, 0.6)

يجدر بالذكر أنَّ قيمة اللون هي قيمة انسيابية، أي لو ضبطت الخاصية color على أحد العناصر، فسيرثها جميع أبنائه وسيكون لهم لون العنصر الأب نفسه ما لم تغيّر ذلك.

أمثلة

القواعد الآتية ستجعل نص الفقرات باللون الأحمر:

p { color: red; }
p { color: #f00; }
p { color: #ff0000; }
p { color: rgb(255,0,0); }
p { color: rgb(100%, 0%, 0%); }
p { color: hsl(0, 100%, 50%); }

/* 50% شفافية */
p { color: rgba(255, 0, 0, 0.5); } 
p { color: hsla(0, 100%, 50%, 0.5); }

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Safari	Opera
الدعم الأساسي	1.0	1.0	3.0	3.5	1.0
الدالة rgb()‎ و hsl()‎	1.0	1.0	9.0	9.5	3.1
الدالة rgba()‎ و hsla()‎	1.0	1.0	9.0	10.0	3.1
الصيغة ‎#RRGGBBAA أو ‎#RGBA‎	غير مدعومة	49	؟	غير مدعومة	9.1
الدالتان rgb()‎ و hsl()‎ تقبل تحديد الشفافية فيها	غير مدعومة	52	؟	؟	؟

البنية العامة

تقبل الخاصية color قيمةً واحدةً تُحدِّد اللون.

<color>

تضبط هذه القيمة اللون للمحتوى النصي ولزخرفة النص في العنصر.

البنية الرسمية

color: <color>;

إذ يمكن أن تكون القيمة اللونية <color> مُحدَّدة عبر الدالة rgb()‎ أو rgba()‎ أو hsl()‎ أو hsla()‎ أو كقيمة ست عشرية أو اسم أحد الألوان أو القيمة currentcolor:

<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

حيث:

<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )

حيث:

<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

انظر أيضًا

• نوع البيانات <color>.
• الخاصيات الأخرى المتعلقة بالألوان: background-color و border-color و outline-color و text-decoration-color و text-emphasis-color و text-shadow و caret-color و column-rule-color.

مصادر ومواصفات

• مسودة CSS Color Module Level 4، أبرز ما جاء فيها هو السماح بإضافة قيم الشفافية (عبر alpha) في الدالتين rgb()‎ و hsl()‎ مما يجعل الدالتين rbga()‎ و hsla()‎ مهملتين؛ وسمحت باستخدام قيم ست عشرية ذات أربع أو ثماني أرقام، حيث سيُعدّ آخر محرف (أو محرفين) على أنه قيمة الشفافية alpha؛ وأضافت الدوال hwb()‎ و device-cmyk()‎ و color()‎.
• مسودة CSS Transitions.
• مواصفة CSS Color Module Level 3، أبرز ما جاء فيها هو إضافة الدوال rgba()‎ و hsl()‎ و hsla()‎.
• مواصفة ‎CSS Level 2 (Revision 1)‎.
• مواصفة CSS Level 1.