CSS属性参考 | <color>

CSS数据类型<color>用于表示标准色彩空间的颜色值。

一个<color>的值可以是一个关键字，也可以是某种数值规范（十六进制数值）。一种颜色可以用以下任意的方式来描述：

颜色关键字

颜色关键字是不区分大小写的标识符，它表示一个具体的颜色，例如 red, white, brown 。

在使用关键字时有几个需要留意的注意事项：

• 除了通常的16个HTML基本颜色，其它的不能被用于HTML页面。HTML将通过一个特定的计算程序转换这些未知的值，这将导致成为完全不同的颜色。这些关键字应只被用在SVG和CSS中。
• 未知的关键字会让CSS属性无效。无效的属性将被忽略，该颜色将没有作用。这是一个和HTML相比不同的行为。
• 未使用关键字定义的颜色在CSS中有任意的透明度，它们是单实色。
• 某些关键字表示同样的颜色：
  • darkgray / darkgrey
  • darkslategray / darkslategrey
  • dimgray / dimgrey
  • lightgray / lightgrey
  • lightslategray / lightslategrey
  • gray / grey
  • slategray / slategrey
• 虽然关键字的名称取自常见的X11颜色名，然而由于生产商为具体的硬件所做的定制，颜色可能与X11系统上相应的颜色有所偏差。

在CSS1规范中有16个颜色关键字。在CSS2规范中，增加了orange关键字，有17个标准的颜色关键字，它们是：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, 和 yellow。下面是这17种颜色在页面中的样本：

在CSS3规范中，支持的颜色关键字达到147个，这147种颜色关键字包括17种标准颜色和130种扩展颜色。下表是这些颜色的样本：

transparent关键字

transparent关键字表示一个完全透明的颜色，即该颜色看上去和背景色一样。从技术上说，它是带有阿尔法通道为最小值的黑色，是rgba(0,0,0,0) 的简写。例如要创建一个透明的背景色可以使用下面的代码：

.el{
    border-color: transparent;
}                             
                            

currentColor关键字

currentColor关键字代表原始的color属性的计算值。它作为继承的值，允许子元素继承父元素的颜色值。

例如，你在一个父元素上设置了一个背景色为蓝色，你还想为该元素的子元素设置相同的背景颜色。此时就可以将子元素的background-color属性设置为currentColor，使子元素继承父元素的背景色。

.parent {
    color: blue;
}
.child {
    background-color: currentColor; 
}                              
                            

rgb()颜色

颜色可以使用红绿蓝（red-green-blue (RGB)）模式的两种方式来定义颜色：

第一种使用16进制表示方法：#RRGGBB或#RGB：

• "#" 后跟6位十六进制字符（0-9, A-F）
• "#" 后跟3位十六进制字符（0-9, A-F）

三位数的 RGB 符号（#RGB）和六位数的形式（#RRGGBB）是相等的。例如， #f03 和 #ff0033 代表同样的颜色。

第二种是通过函数rgb(R,G,B)来定义颜色，RGB可以是整数值或百分比值，整数255相当于100%，和十六进制符号里的F或FF。

#f03
#F03
#ff0033
#FF0033
rgb(255,0,51)
rgb(255, 0, 51)
rgb(255, 0, 51.2) /* 错误的写法，不能是浮点数 */ 
rgb(100%,0%,20%)
rgb(100%, 0%, 20%)
rgb(100%, 0, 20%) /* 错误的写法，不能混合使用整数和百分比值 */                              
                            

下面的例子通过rgb()函数来设置元素的背景色。

rgba()颜色

颜色也可以使用rgba()函数来表示。rgba()颜色扩展了RGB颜色模式，它包含了阿尔法通道，允许设定一个颜色的透明度。阿尔法通道0表示完全透明，1表示不透明。

例如下面的代码通过rgba()函数来设置颜色。

rgba(255,0,0,0.1)    /* 10%透明度的红色 */  
rgba(255,0,0,0.4)    /* 40%透明度的红色 */  
rgba(255,0,0,0.7)    /* 70%透明度的红色 */  
rgba(255,0,0,  1)    /* 红色 */                               
                            

下面的例子是通过rgba()函数为元素设置不同背景色的效果。

hsl()颜色

可以使用hsl()函数来定义颜色，hsl是指色相、饱和度和明度模式（Hue-saturation-lightness）。

要理解HSL颜色，你首先需要从另一个角度来理解颜色。注意观察上面的色盘，你可以看到红、绿和蓝三种颜色。红色在最上面，被设置为0度，绿色是120度，蓝色是240度。它们将色盘分为三个部分。在它们的中间分别是黄色、青色和洋红（CMYK颜色系统）。它们的角度分别为60度、180度和300度。

从色盘的顶部开始顺时针方向旋转，是彩虹的七彩颜色。从60度开始，分别是：黄色、绿色、青色、蓝色、洋红和红色。

HSL颜色就是指上面颜色色盘中的多少度的颜色值。

例如，紫色在蓝色（240°）和洋红（300°）之间，所以它的HSL颜色是hsl(270,100%,50%)。如果想要紫色偏蓝，就要往色盘蓝色方向移动角度值，得到hsl(255,100%,50%)。

关于色相、饱和度和明度总结如下：

• 色相（Hue）表示色环（即代表彩虹的一个圆环）的一个角度。这个角度是一个无单位的整数。定义red=0=360其它颜色分散于圆环，所以green=120, blue=240以此类推。作为一个角度，它隐含像-120=240和480=120这样的回环。
• 饱和度使用百分数来表示。100% 是满饱和度，而 0% 是一种灰度。
• 明度使用百分数来表示。100% 明度是白色， 0% 明度是黑色。

例如下面的例子中为元素的背景设置不同的饱和度值，色相和亮度值相等的效果。

下面的例子是为元素的背景设置不同的亮度，色相和饱和度相等的效果。

hsla()颜色

颜色可以使用hsla()函数来表示。hsla()颜色扩展了HSL颜色模式，它包含了阿尔法通道，允许设定一个颜色的透明度。阿尔法通道0表示完全透明，1表示不透明。

下面的代码是使用hsla()函数的例子。

hsla(240,100%,50%,0.05)   /* 5%透明度的蓝色 */   
hsla(240,100%,50%, 0.4)   /* 40%透明度的蓝色 */  
hsla(240,100%,50%, 0.7)   /* 70%透明度的蓝色 */  
hsla(240,100%,50%,   1)   /* 蓝色 */                             
                            

下面的例子是通过hsla()函数为元素设置不同背景色的效果。

浏览器支持

所有的现代浏览器都支持颜色属性。包括：Chrome, Firefox, Safari, Opera, IE 和 Android 和 iOS。

在IE浏览器中，只有IE9+浏览器才支持hsl()，hsla()，rgba()，transparent关键字和currentColor关键字。

IE 8.0及以上的IE浏览器支持“e”版本的灰色关键字：grey, darkgrey, darkslategrey, dimgrey, lightgrey, lightslategrey。

IE3-IE6的IE浏览器仅支持“a”版本的灰色关键字：gray, darkgray, darkslategray, dimgray, lightgray, lightslategray。

IE7和IE8只有background和border这两个属性支持transparent关键字。在IE中使用color:transparent会被渲染为黑色。IE6渲染透明边框也是黑色。

相关阅读

• CSS Color Module Level 3
• The CSS Transitions Module Level 3
• MDN <color>