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

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث

نوع البيانات <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.