نوع البيانات `<color>`

نوع البيانات <color> في CSS يستعمل لتمثيل لون في مجال ألوان sRGB، ويمكن وصف اللون بإحدى الطرائق الآتية:

كلمة محجوزة.

باستخدام نظام RGB (يسمونه نظام الإحداثيات المكعبي cubic-coordinate system) عبر ذكر اللون بالصيغة الست عشرية وقبله رمز # أو عبر الدالتين rgb()‎ و rgba()‎.
باستخدام نظام HSL (يسمونه نظام الإحداثيات الأسطواني cylindrical-coordinate system) عبر الدالتين hsl()‎ و hsla()‎.

يمكن أن تتضمن قيمة اللون قيمةً للشفافية (عبر القناة alpha)، التي تُشير إلى كيفية اندماج اللون مع الخلفية.

صحيحٌ أنَّ الألوان في CSS تُعرَّف بدقة، لكن مظهرها قد يختلف (وقد يختلف كثيرًا) من جهاز إلى آخر، وهذا لأنَّ أغلبية الأجهزة لم تتم معايرتها ولأنَّ بعض المتصفحات لا تدعم أنماط الألوان (color profiles) لجهاز العرض.

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

الميزة	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

القيم

هنالك عدِّة طرائق لتحديد قيمة <color>.

الكلمات المحجوزة

الكلمات المحجوزة لتعريف الألوان في CSS غير حساسة لحالة الأحرف، ويشرح اسمها اللون الذي تمثله، مثل red و blue و brown و lightseagreen؛ يجدر بالذكر أنَّ قائمة القيم المسموحة تختلف باختلاف المواصفة:

مواصفة CSS Level 1 تقبل استخدام ستة عشر لونًا أساسيًا تسميها «ألوان VGA» لأنها مأخوذة من مجموعة من الألوان التي يمكن عرضها على بطاقات عرض VGA.
مواصفة CSS Level 2 أضافت الكلمة المحجوزة orange.
صحيحٌ أنَّ بعض الألوان لم تكن موجودةً في المواصفة (والتي أُخِذَ أغلبها من قائمة ألوان X11) لكنها كانت مدعومةً من المتصفحات القديمة، ولم تصبح هذه الألوان قياسيةً حتى مواصفة SVG 1.0 و CSS Colors Level 3، وكانوا يسمونها بأسماء مختلفة مثل extended color keywords أو X11 colors أو SVG colors.

هنالك بعض الأمور الذي يجب أن تضعها بالحسبان عند استخدام الكلمات المحجوزة السابقة:

باستثناء الألوان الأساسية الستة عشر: لا يجوز استخدام الكلمات المحجوزة إلا في CSS و SVG، إذ لا تتعرّف HTML عليها، وستستخدم خوارزمية معيّنة لتحويلها إلى ألوان مختلفة كليًّا.
وعلى النقيض من HTML، ستتجاهل CSS الكلمات المحجوزة غير المعروفة كليًّا.
لا توجد كلمات محجوزة في CSS تُمثِّل ألوانًا لها شفافية.
هنالك عدِّة كلمات محجوزة تُشير إلى اللون نفسه:
- aqua / cyan
- fuchsia / magenta
- darkgray / darkgrey
- darkslategray / darkslategrey
- dimgray / dimgrey
- lightgray / lightgrey
- lightslategray / lightslategrey
- gray / grey
- slategray / slategrey

المواصفة	اللون	الكلمة المحجوزة	القيم الست عشرية المكافئة
CSS Level 1		`black`	`#000000`
		`silver`	`#c0c0c0`
		`gray`	`#808080`
		`white`	`#ffffff`
		`maroon`	`#800000`
		`red`	`#ff0000`
		`purple`	`#800080`
		`fuchsia`	`#ff00ff`
		`green`	`#008000`
		`lime`	`#00ff00`
		`olive`	`#808000`
		`yellow`	`#ffff00`
		`navy`	`#000080`
		`blue`	`#0000ff`
		`teal`	`#008080`
		`aqua`	`#00ffff`
‎‎CSS Level 2 (Revision 1)‎		`orange`	`#ffa500`
CSS Color Module Level 3		`aliceblue`	`#f0f8ff`
		`antiquewhite`	`#faebd7`
		`aquamarine`	`#7fffd4`
		`azure`	`#f0ffff`
		`beige`	`#f5f5dc`
		`bisque`	`#ffe4c4`
		`blanchedalmond`	`#ffebcd`
		`blueviolet`	`#8a2be2`
		`brown`	`#a52a2a`
		`burlywood`	`#deb887`
		`cadetblue`	`#5f9ea0`
		`chartreuse`	`#7fff00`
		`chocolate`	`#d2691e`
		`coral`	`#ff7f50`
		`cornflowerblue`	`#6495ed`
		`cornsilk`	`#fff8dc`
		`crimson`	`#dc143c`
		`cyan` (مكافئة للقيمة `aqua`)	`#00ffff`
		`darkblue`	`#00008b`
		`darkcyan`	`#008b8b`
		`darkgoldenrod`	`#b8860b`
		`darkgray`	`#a9a9a9`
		`darkgreen`	`#006400`
		`darkgrey`	`#a9a9a9`
		`darkkhaki`	`#bdb76b`
		`darkmagenta`	`#8b008b`
		`darkolivegreen`	`#556b2f`
		`darkorange`	`#ff8c00`
		`darkorchid`	`#9932cc`
		`darkred`	`#8b0000`
		`darksalmon`	`#e9967a`
		`darkseagreen`	`#8fbc8f`
		`darkslateblue`	`#483d8b`
		`darkslategray`	`#2f4f4f`
		`darkslategrey`	`#2f4f4f`
		`darkturquoise`	`#00ced1`
		`darkviolet`	`#9400d3`
		`deeppink`	`#ff1493`
		`deepskyblue`	`#00bfff`
		`dimgray`	`#696969`
		`dimgrey`	`#696969`
		`dodgerblue`	`#1e90ff`
		`firebrick`	`#b22222`
		`floralwhite`	`#fffaf0`
		`forestgreen`	`#228b22`
		`gainsboro`	`#dcdcdc`
		`ghostwhite`	`#f8f8ff`
		`gold`	`#ffd700`
		`goldenrod`	`#daa520`
		`greenyellow`	`#adff2f`
		`grey`	`#808080`
		`honeydew`	`#f0fff0`
		`hotpink`	`#ff69b4`
		`indianred`	`#cd5c5c`
		`indigo`	`#4b0082`
		`ivory`	`#fffff0`
		`khaki`	`#f0e68c`
		`lavender`	`#e6e6fa`
		`lavenderblush`	`#fff0f5`
		`lawngreen`	`#7cfc00`
		`lemonchiffon`	`#fffacd`
		`lightblue`	`#add8e6`
		`lightcoral`	`#f08080`
		`lightcyan`	`#e0ffff`
	`lightgoldenrodyellow`	`#fafad2`
	`lightgray`	`#d3d3d3`
	`lightgreen`	`#90ee90`
	`lightgrey`	`#d3d3d3`
	`lightpink`	`#ffb6c1`
	`lightsalmon`	`#ffa07a`
	`lightseagreen`	`#20b2aa`
	`lightskyblue`	`#87cefa`
	`lightslategray`	`#778899`
	`lightslategrey`	`#778899`
	`lightsteelblue`	`#b0c4de`
	`lightyellow`	`#ffffe0`
	`limegreen`	`#32cd32`
	`linen`	`#faf0e6`
	`magenta` (مكافئة للقيمة `fuchsia`)	`#ff00ff`
	`mediumaquamarine`	`#66cdaa`
	`mediumblue`	`#0000cd`
	`mediumorchid`	`#ba55d3`
	`mediumpurple`	`#9370db`
	`mediumseagreen`	`#3cb371`
	`mediumslateblue`	`#7b68ee`
	`mediumspringgreen`	`#00fa9a`
	`mediumturquoise`	`#48d1cc`
	`mediumvioletred`	`#c71585`
	`midnightblue`	`#191970`
	`mintcream`	`#f5fffa`
	`mistyrose`	`#ffe4e1`
	`moccasin`	`#ffe4b5`
	`navajowhite`	`#ffdead`
	`oldlace`	`#fdf5e6`
	`olivedrab`	`#6b8e23`
	`orangered`	`#ff4500`
	`orchid`	`#da70d6`
	`palegoldenrod`	`#eee8aa`
	`palegreen`	`#98fb98`
	`paleturquoise`	`#afeeee`
	`palevioletred`	`#db7093`
	`papayawhip`	`#ffefd5`
	`peachpuff`	`#ffdab9`
	`peru`	`#cd853f`
	`pink`	`#ffc0cb`
	`plum`	`#dda0dd`
	`powderblue`	`#b0e0e6`
	`rosybrown`	`#bc8f8f`
	`royalblue`	`#4169e1`
	`saddlebrown`	`#8b4513`
	`salmon`	`#fa8072`
	`sandybrown`	`#f4a460`
	`seagreen`	`#2e8b57`
	`seashell`	`#fff5ee`
	`sienna`	`#a0522d`
	`skyblue`	`#87ceeb`
	`slateblue`	`#6a5acd`
	`slategray`	`#708090`
	`slategrey`	`#708090`
	`snow`	`#fffafa`
	`springgreen`	`#00ff7f`
	`steelblue`	`#4682b4`
	`tan`	`#d2b48c`
	`thistle`	`#d8bfd8`
	`tomato`	`#ff6347`
	`turquoise`	`#40e0d0`
	`violet`	`#ee82ee`
	`wheat`	`#f5deb3`
	`whitesmoke`	`#f5f5f5`
	`yellowgreen`	`#9acd32`

الكلمة المحجوزة `transparent`

تُمثِّل الكلمة المحجوزة transparent لونًا شفافًا تمامًا، مما يجعل اللون الموجود في الخلفية ظاهرًا تمامًا؛ وتقنيًا تكون الكلمة المحجوزة transparent اختصارًا للدالة ‎rgba(0,0,0,0)‎.

الكلمة المحجوزة `currentColor`

تُمثِّل الخاصية currentColor قيمة الخاصية color المُطبَّقة على العنصر؛ وتسمح لنا باستخدام القيمة المُسنَدة إلى الخاصية color في الخاصيات التي لا تستعملها افتراضيًا.

<div style="color: blue; border: 1px dashed currentColor;">
  The color of this text is blue.
  <div style="background: currentColor; height: 9px;"></div>
  This block is surrounded by a blue border.
</div>

الدالتان `rgb()‎` و `rgba()‎`

يمكن تعريف الدوال اعتمادًا على قيمة مكوِّناتها من اللون الأحمر والأخضر والأزرق (نموذج RGB للألوان) باستخدام التمثيل الست عشري أو عبر الدوال؛ وتُمثِّل قناة alpha مكوِّن الشفافية في اللون.

ملاحظة: في مسودة CSS Colors Level 4 أصبحت الدالة rgba()‎ مهملةً وأصبحت الدالة rgb()‎ تدعم الشفافية.

الصيغة الست عشرية الطويلة: `‎#RRGGBB[AA]‎`

قيمة اللون الأحمر R والأخضر G والأزرق B والشفافية A هي محارف في نظام العد الست عشري (من 0 إلى 9 ومن A إلى F)؛ يجدر بالذكر أنَّ الشفافية A هي اختيارية؛ ويكون اللون ‎#ff0000 مكافئًا للون ‎#ff0000ff.

الصيغة الست عشرية القصيرة: `‎#RGB[A]‎`

قيمة اللون الأحمر R والأخضر G والأزرق B والشفافية A هي محارف في نظام العد الست عشري (من 0 إلى 9 ومن A إلى F)؛ يجدر بالذكر أنَّ الشفافية A هي اختيارية.

هذه الصيغة المختصرة (‎#RGB) هي اختصار للصيغة الطويلة ‎#RRGGBB، فمثلًا اللون ‎#f09 هو نفس اللون ‎#ff0099؛ وبشكل مشابه تكون الصيغة المختصرة مع الشفافية (‎#RGBA) هي اختصار للصيغة الطويلة ‎#RRGGBBAA، فمثلًا اللون ‎#0f38 هو نفس اللون ‎#00ff3388.

صيغة الدالة rgb(R, G, B[, A])‎ أو rgba(R, G, B, A)‎

قيمة اللون الأحمر R والأخضر G والأزرق B تكون إما أعدادًا صحيحةً <integer> أو نسبًا مئويةً <percentage>، إذ يمثِّل الرقم 255 القيمة 100%؛ أما الشفافية A فيمكن أن تكون رقمًا <number> بين 0 و 1، أو نسبةً مئويةً <percentage>، إذ يمثِّل الرقم 1 القيمة 100% (أي أنَّ اللون غير شفاف أبدًا).

أمثلة

مثال عن الألوان بصيغة RGB:

/* هذه الأمثلة كلها تعطي اللون نفسه */

/* الصيغة الست عشرية */
#f09
#F09
#ff0099
#FF0099

/* استخدام الدوال */
rgb(255,0,153)
rgb(255, 0, 153)
rgb(255, 0, 153.0) /* خطأ! لا يجوز استخدام الأرقام العشرية */
rgb(100%,0%,60%)
rgb(100%, 0%, 60%)
rgb(100%, 0, 60%) /* خطأ! لا يجوز استعمال الأرقام الصحيحة مع النسب المئوية */
rgb(255 0 153)

/* الصيغة الست عشرية مع شفافية */
#f09f
#F09F
#ff0099ff
#FF0099FF

/* استخدام دوال مع شفافية */
rgb(255, 0, 153, 1)
rgb(255, 0, 153, 100%)

مثال عن الألوان مع شفافية:

/* الصيغة الست عشرية */
#3a30    
#3A3F 
#33aa3300 
#33AA3388

/* استخدام الدوال */
rgba(51, 170, 51, .1) 
rgba(51, 170, 51, .4) 
rgba(51, 170, 51, .7) 
rgba(51, 170, 51,  1)

الدالتان `hsl()‎` و `hsla()‎`

يمكن تعريف الدوال اعتمادًا على قيمة مكوِّناتها من الدرجة اللونية (hue) والإشباع (saturation) والإضاءة (lightness) باستخدام الدالتين hsl()‎ و hsla()‎؛ وإحدى الميزات الرئيسية لاستخدام نموذج HSL عوضًا عن RGB هو إمكانية اختيار لون معيّن ثم التحكم به بسهولة لإنشاء ألوان مشابهة له عبر تغيير الإشباع والإضاءة.

ملاحظة: في مسودة CSS Colors Level 4 أصبحت الدالة hsla()‎ مهملةً وأصبحت الدالة hsl()‎ تدعم الشفافية.

صيغة الدالة `hsl(R, G, B[, A])‎` أو `hsla(R, G, B, A)‎`

قيمة الدرجة اللونية H هي زاوية <angle> التي تُمثِّل اللون معطيةً بالدرجات deg أو الراديان rad أو الغراد grad أو الدورات turn، وعندما تعطى هذه القيمة كرقم <number> دون واحدة فستفسر على أنها بالدرجات.

يكون اللون الأحمر عند الدرجة 0 أو 360، وتتوزع بقية الألوان على الدائرة، فمثلًا يكون اللون الأخضر 120 درجة، والأزرق 240 درجة وهلم جرًا؛ ولمّا كانت هذه القيمة تعطى بالدرجات، فيمكن أن تكون الأرقام سالبة (الدوران بالاتجاه المعاكس) أو أكثر من 360 درجة (أكثر من دورة) مثل -120 درجة (التي تساوي 240 درجة) و 480 درجة (التي تساوي 120 درجة) ...إلخ.

أما الإشباع S والإضاءة L فتكون نسبًا مئويةً، فالقيمة 100% للإشباع تعني أنَّ اللون مشبع تمامًا بينما القيمة 0 تعني أنَّ اللون غير مشبع أبدًا (أي سيكون فضيًا). وإذا كانت قيمة الإضاءة تساوي 100% فستمثِّل اللون الأبيض، بينما 0% فتعطي اللون الأسود، والقيمة 50% تكون هي القيمة «الطبيعية».

أما الشفافية A فيمكن أن تكون رقمًا <number> بين 0 و 1، أو نسبةً مئويةً <percentage>، إذ يمثِّل الرقم 1 القيمة 100% (أي أنَّ اللون غير شفاف أبدًا).

أمثلة

مثال عن استخدام مختلف أنواع القيم مع الدالة hsl()‎:

/* جميع هذه الصيغ تُحدِّد اللون نفسه */
hsl(270,60%,70%)
hsl(270, 60%, 70%)
hsl(270 60% 70%)
hsl(270deg, 60%, 70%)
hsl(4.71239rad, 60%, 70%)
hsl(.75turn, 60%, 70%)

/* اللون السابق نفسه لكن مع شفافية */
hsl(270, 60%, 50%, .15)
hsl(270, 60%, 50%, 15%)

ألون كاملة الإشباع:

الصيغة	اسم اللون	مثال
`hsl(0, 100%, 50%)`	red
`hsl(30, 100%, 50%)`	orange
`hsl(60, 100%, 50%)`	yellow
`hsl(90, 100%, 50%)`	lime green
`hsl(120, 100%, 50%)`	green
`hsl(150, 100%, 50%)`	blue-green
`hsl(180, 100%, 50%)`	cyan
`hsl(210, 100%, 50%)`	sky blue
`hsl(240, 100%, 50%)`	blue
`hsl(270, 100%, 50%)`	purple
`hsl(300, 100%, 50%)`	magenta
`hsl(330, 100%, 50%)`	pink
`hsl(360, 100%, 50%)`	red

اللون الأخضر مع تدرجات فاتحة وغامقة:

الصيغة	اسم اللون	مثال
`hsl(120, 100%, 0%)`	black
`hsl(120, 100%, 20%)`
`hsl(120, 100%, 40%)`
`hsl(120, 100%, 60%)`
`hsl(120, 100%, 80%)`
`hsl(120, 100%, 100%)`	white

اللون الأخضر مع تدرجات بالإشباع:

الصيغة	اسم اللون	مثال
`hsl(120, 100%, 50%)`	green
`hsl(120, 80%, 50%)`
`hsl(120, 60%, 50%)`
`hsl(120, 40%, 50%)`
`hsl(120, 20%, 50%)`
`hsl(120, 0%, 50%)`	gray

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

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

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

القيم

الكلمات المحجوزة

الكلمة المحجوزة transparent

الكلمة المحجوزة currentColor

الدالتان rgb()‎ و rgba()‎

الصيغة الست عشرية الطويلة: ‎#RRGGBB[AA]‎

الصيغة الست عشرية القصيرة: ‎#RGB[A]‎

صيغة الدالة rgb(R, G, B[, A])‎ أو rgba(R, G, B, A)‎

أمثلة

الدالتان hsl()‎ و hsla()‎

صيغة الدالة hsl(R, G, B[, A])‎ أو hsla(R, G, B, A)‎

أمثلة

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

الكلمة المحجوزة `transparent`

الكلمة المحجوزة `currentColor`

الدالتان `rgb()‎` و `rgba()‎`

الصيغة الست عشرية الطويلة: `‎#RRGGBB[AA]‎`

الصيغة الست عشرية القصيرة: `‎#RGB[A]‎`

الدالتان `hsl()‎` و `hsla()‎`

صيغة الدالة `hsl(R, G, B[, A])‎` أو `hsla(R, G, B, A)‎`