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.)。

向本文提出修改或勘误建议