CSS 颜色值全面解析

颜色值在 CSS 中应用得非常广泛，例如 color, background, border, box-shadow 等属性都接受颜色作为属性值。但是当 CSS 发展至今，颜色值的设置也变得多样化，在浏览器兼容问题的催化下，很多人对颜色值的设置越来越迷惑。本文列举了到目前为止 CSS 中颜色值设置的所有可用项，详细阅读全文，你也许会考虑以前的书写习惯是不是应该改一改了。

SVG颜色关键词

W3C定义了一组SVG的颜色列表，同样是 CSS 颜色模块所指定的颜色，他们是一些指向特定颜色的单词，例如常见的 white, black ,red 等等。下面是其中的一部分，鼠标移动到这些色块上面，将会呈现出它们所对应的名称。

                                                                              !!                                                                                        !!                                           !!                                                                      !!    !!                                                                                                                !!                              

事实上我个人更倾向于在某些时候使用颜色关键词来代码颜色编码，原因在于关键词更适合于人类阅读。在W3C Color Module详细地罗列了所有的颜色关键词，以及它们所分别对应的十六进位和十进位编码。他们有很好的浏览器兼容性，唯一值得注意的是，灰色在 IE8 之前的版本中使用的是 gray 表示，所以与灰色相关的颜色关键词在 IE6/7 稍有不同，它们在上面色块中以两个惊叹号标识出来。

currentColor 关键字

currentColor 用来表示与当前元素的 color 属性相同的值，当然这个 color 属性可以使被继承下来的，下面是一个例子：

	<div style=" color : darkred " >

		I'm dark red.

		<div style=" border-top:3px solid currentcolor; ">

			My border top is dark red, too.

		</div>

	</div>

I'm dark red.

My border top is dark red, too.

transparent 关键字

使用 transparent 表示完全透明，在 CSS1 中，它只能在 background 属性中使用，CSS2中，添加到了 border 属性，而在 CSS3 中，transparent 能够在任何可以写颜色的属性中被使用。

使用 RGB 色彩模式

以 RGB 标记颜色，即描述一个颜色中红色R，绿色G，蓝色B 的强度值。当使用这种模式表示颜色时，有以下2种方式可选：
1. 十六进制标记法
2.函数式标记法

当使用十六进制标记法的时候，可以采用简写的方式，同时该方法对大小写不敏感，下面的几个例子定义的都是完全相同的颜色。

element {

     color : #f03;

     color : #F03;

     color : #ff0033;

     color : #FF0033;

}

在函数式标记法中，可以使用十进制整数或者百分比来表示，但是主要注意的是，两者不能混用，例如在用百分比表示一组颜色，那么请使用0%来代替0

element {

    color : rgb(255,0,51);

    color : rgb(255, 0, 51);

    color : rgb(100%, 0%, 20%);

    color : rgb(100%, 0, 20%);  /* 错误的写法，整数和百分比方式不能混用*/

}

RGBa

RGBa 是扩展了 alpha 通道，即扩展了透明度的 RGB 色彩模式，其中的 a 定义了该颜色的透明度。下面的代码标记了一个元素的 color 属性为透明度是 10 的红色。

element {

     color : rgba(255,0,0,0.1);

}

使用 HSL 色彩模式

HSL 是完全不同于 RGB 的色彩模式，H -> hue, S -> saturation, L -> lum 分别描述的一个颜色的色调，饱和度，明度，正因为如此，HSL 与 RGB 相比，它的优势在于，人们可以大致的猜测这个颜色的情况。H 代表了一个色环上的一个角度，这个色环从红色开始，最后再回到红色，所以 0 和 360 都代表了红色，而 S 和 L 都是用百分比来表示，这不难理解。

element {

     hsl(30, 100%,50%);

}

HSLa

与 RGBa 相同，HSLa 是在 HSL 模式上扩展了对透明度的支持。

element {

    hsla(240,100%,50%, 0.4);

}

浏览器兼容性

到目前为止，你也许发现了，上面所列举的一些内容在实施到某些浏览器中不会产生任何效果。事实上，关于色彩这一模块，在不同的浏览器中存在着较大的差异，特别是 IE 家族。下面的表格列举了不同的值在不同浏览器（核心）与不同版本的兼容情况。

Browser	#RRGGBB	rgb	hsl	rgba	hsla	currentColor	transparent
IE	3.0	4.0	---	---	---	---	[*]
Gecko	1.0	1.0	1.5	1.9	1.9	1.8	1.9
Opera	3.5	3.5	9.5	10.0	10.0	9.5	10.0
WebKit	85	85	525	525	525	528	525

[*] IE 7-8 的 transparent 属性只能被应用于 background 和 border 属性

更多资料：W3C --- CSS Color Module Level 3