CSS 中的颜色属性 color 知多少？

本文摘自 勾三股四 更早时期的 不老歌 博客。

---

真相在此：http://www.w3.org/TR/2003/CR-css3-color-20030514/#colorunits
----------------------------------------------
首先，css 的 color 属性值，可以是一个关键字定义，也可以通过数值来定义。且两者都有多种定义的形式。

HTML 4 颜色关键字(HTML 4 color keywords)

■ Black = #000000
■ Green = #008000
■ Silver = #C0C0C0
■ Lime = #00FF00
■ Gray = #808080
■ Olive = #808000
□ White = #FFFFFF
■ Yellow = #FFFF00
■ Maroon = #800000
■ Navy = #000080
■ Red = #FF0000
■ Blue = #0000FF
■ Purple = #800080
■ Teal = #008080
■ Fuchsia = #FF00FF
■ Aqua = #00FFFF
例如：

body {color: black; background: white }
h1 { color: maroon }
h2 { color: olive }

数值定义

RGB颜色值

这个最常见了，不过一共有两种写法，例如：

em { color: #f00 }              /* #rgb */
em { color: #ff0000 }           /* #rrggbb */
em { color: rgb(255,0,0) }      /* integer range 0 - 255 */
em { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */

还有一点需要注意，如果数值超出了正常范围(比如负数或超过255的整数等等)，则会取合理范围内的极限值，比如：

em { color: rgb(255,0,0) }       /* integer range 0 - 255 */
em { color: rgb(300,0,0) }       /* clipped to rgb(255,0,0) */
em { color: rgb(255,-10,0) }     /* clipped to rgb(255,0,0) */
em { color: rgb(110%, 0%, 0%) }  /* clipped to rgb(100%,0%,0%) */

RGBA颜色值

在RGBA的基础上，多了一个alpha通道透明度的定义，例如：

em { color: rgb(255,0,0) }      /* integer range 0 - 255 */
em { color: rgba(255,0,0,1)     /* the same, with explicit opacity of 1 */

穿插：transparent 关键字

透明，无颜色，相当于rgba(0,0,0,0)

HSL颜色值

一个整数 + 两个百分数，分别表示色相、饱和度和亮度。例如：

* { color: hsl(0, 100%, 50%) }   /* red */
* { color: hsl(120, 100%, 50%) } /* green */
* { color: hsl(120, 100%, 25%) } /* light green */
* { color: hsl(120, 100%, 75%) } /* dark green */
* { color: hsl(120, 50%, 50%) }  /* pastel green, and so on */

这样的写法目前还不太常见，但这样的定义方式给颜色渐变的计算带来了很多方便，或许将来会大有所为哦：）

HSLA颜色值

同理，在HSL的基础上加入了alpha透明通道。比如：

em { color: hsl(120, 100%, 50%) }     /* green */
em { color: hsla(120, 100%, 50%, 1) } /* the same, with explicit opacity of 1 */

SVG颜色关键字

道理和HTML4的颜色关键字类似但范围更广，这里略去。

currentColor颜色关键字

表示与当前元素的color属性值相同，多用在使得边框颜色和文字颜色一直等地方。

系统颜色(CSS System Colors)

这些颜色很神奇，它会根据你的运行环境，代表与之相匹配颜色。比如我们希望某个div的文字颜色、背景色和操作系统tooltip的颜色保持一致，就可以写

.tooltip {color: InfoText; background: InfoBackground}

有的时候我们希望页面样式和我们的操作系统完美融合到一体，不妨试试这些属性值：

CSS 2 系统颜色

■ ActiveBorder
■ ActiveCaption
■ AppWorkspace
■ Background
■ ButtonFace
■ ButtonHighlight
■ ButtonShadow
■ ButtonText
■ CaptionText
■ GrayText
■ Highlight
■ HighlightText
■ InactiveBorder
■ InactiveCaption
■ InactiveCaptionText
■ InfoBackground
■ InfoText
■ Menu
■ MenuText
■ Scrollbar
■ ThreeDDarkShadow
■ ThreeDFace
■ ThreeDHighlight
■ ThreeDLightShadow
■ ThreeDShadow
■ Window
■ WindowFrame
■ WindowText

Flavor系统颜色

这个关键字有点生僻了，我自己都没用过也没见过，文档里第一次看到，暂不细说了

最后，尽管color属性值可以有很多种方式，可以显示出各种效果，但别让网页的内容过分依赖于颜色，尽量让网页内容不通过颜色的修饰，也可以正常的表达意思(Ensure that text and graphics are understandable when viewed without color.)。