Css3-color

介绍

CSS在level 2之后已经划分为了多个模块，每个模块可以制定自己的规范，并独立实现。本规范就是众多模块中的一个。

该模块描述了CSS中定义元素前景色和透明度的属性。也描述了CSS中<value>类型值的细节。

本规范不仅仅定义了CSS1和CSS2中已有的颜色相关的属性和属性值，同时也定义了一些新的属性和属性值。

工作组并不希望所有的CSS3实现都将包括所有的属性和属性值。而可能是一小部分的CSS3变化，被称为“profiles”。比如，可能只有32位颜色的用户代理才会包含所有的颜色相关属性和属性值。

本规范会所为下列推荐、草案和额外的一些新功能的相关部分内容合并的结果。

HTML 4.01 [HTML401]
CSS 2.0 [CSS2]
SVG 1.0 [SVG10]
User Interface for CSS3 (16 February 2000) [CSS3UI]

依赖

额外的术语定义于[CSS21]的定义章节。示例的文档源码和片段遵循[XML10]或[HTML401]语法。

颜色相关属性

前景色：‘color’属性

名称: color
取值: <color> | inherit
初始值: 取决于用户代理
应用于: 所有元素
继承性: 是
百分数: 不支持
媒介: 视觉
计算值 对于基本颜色关键字、16进制RGB值和扩展颜色关键字来说，计算值是其RGB的三个数字的组合，即6个十六进制数或rgb(...)函数值，同时alpha值为1。 关键字‘transparent’的计算值为所有值都为0的RGBA值，即rgba(0,0,0,0)。 ‘currentColor’的定义中描述了如何得出其计算值。 其余的值的计算值都是指定的值本身。

这个属性描述了一个元素的文本内容的前景色。除此之外它还为其它接受颜色值的属性提供了一个潜在的间接值(currentColor)。如果‘currentColor’关键字被设置在‘<color>’属性本身，则它相当于‘color: inherit’。

这里有几种不同的lime green颜色的定义方式：

em { color: lime }               /* color keyword */
em { color: rgb(0,255,0) }       /* RGB range 0-255   */

<color>: 颜色单位在接下来的章节会被定义。

透明度：‘opacity’属性

Opacity可以被认为是一个后续工序。概念上，当元素(及其子元素)被渲染为一个屏幕外的RGBA图形之后，opacity属性会决定如何将该图形和当前的渲染效果相混合。更多细节参见章节：简单alpha组合。

名称: opacity
取值: <alphavalue> | inherit
初始值: 1
应用于: 所有元素
百分数: 不支持
媒体: 视觉
计算值: 和指定的<alphavalue>值被修剪至[0.0 1.0]的范围之内后的值相同。

<alphavalue>: 语法上是一个<number>。对opacity的设定会统一应用在整个对象上。任何超出0.0(完全透明)到1.0(完全不透明)范围的值都会被裁剪回这个范围。如果对象是一个元素的容器，则效果相当于对这个元素上了一个蒙版，这个蒙版的颜色为元素的当前背景，透明度为<alphavalue>。

鉴于一个带有小于1的opacity值的元素是混合与一个单独的屏幕外的图形，其外部的内容无法通过z顺序放置在其内。同理，实现者必须为每个opacity小于1的元素创建一个新的堆叠上下文。如果一个opacity小于1的元素未被定位，则实现者必须在其父堆叠上下文中绘制这个创建的层，如果其元素被定为且‘z-index: 0’、‘opacity: 1’的情况下是相同的堆叠顺序。如果一个opacity小于1的元素被定位，则‘z-index’属性的应用描述于[CSS21]，除非创建一个新的堆叠上下文时‘auto’总是等同于‘0’对待。对于堆叠上下文的更多描述参见[CSS21]的9.9章和附录E。SVG元素并不使用这一规则，因为SVG有其自身的渲染模块([SVG11]，第三章)。

颜色单位

<color>是一个关键字或一个数字的规范。

基本颜色关键字

基本颜色关键字的列表是：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, 和 yellow。颜色名称是大小写不敏感的。

Color names and sRGB values
Color name	Hex rgb	Decimal
black	#000000	0,0,0
silver	#C0C0C0	192,192,192
gray	#808080	128,128,128
white	#FFFFFF	255,255,255
maroon	#800000	128,0,0
red	#FF0000	255,0,0
purple	#800080	128,0,128
fuchsia	#FF00FF	255,0,255
green	#008000	0,128,0
lime	#00FF00	0,255,0
olive	#808000	128,128,0
yellow	#FFFF00	255,255,0
navy	#000080	0,0,128
blue	#0000FF	0,0,255
teal	#008080	0,128,128
aqua	#00FFFF	0,255,255

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

数字化颜色值

RGB颜色值

RGB颜色模型在数字化颜色规范中使用。这几个例子全部是相同的颜色定义：

em { color: #f00 }              /* #rgb */
em { color: #ff0000 }           /* #rrggbb */
em { color: rgb(255,0,0) }
em { color: rgb(100%, 0%, 0%) }

RGB取值的16进制格式是一个‘#’紧跟3个或6个16进制字符。3数字的RGB符号(#rgb)会以重复每个数字的方式转换成6数字的RGB(#rrggbb)，而不是补0.比如，#fb0扩展成为#ffbb00。这是为了确保白色(#ffffff)可以以短符号(#fff)定义同时移除任何颜色深度上的显示依赖。

RGB取值的函数格式是一个‘rgb(’紧跟三个用逗号隔开的数字(3个整数值或3个百分数值)，再紧跟‘)’。整数值255相当于100%、和16进制的F或FF：rgb(255,255,255) = rgb(100%,100%,100%) = #FFF。数字旁边可以有空格。

所有的RGB颜色都被定义在了sRGB颜色中(参见[SRGB])。用户代理可以改变显示颜色的保真度，但是使用sRGB对应该是什么颜色以及那个颜色可以对应国际化标准提供了一个明确的可测量的定义(参见[COLORIMETRY])。

设备范围之外的颜色值将会被修剪至其可知的范围内：红绿蓝的值会为了回到设备支持的范围内而改变。可以展现高画质的用户代理也可以匹配颜色到另一个范围内。本规范并不精确定义裁剪行为。作为一个通用的CRT显示器，其设备范围和sRGB相同，下面四个规则是相同的：

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%) */

其它设备，如打印机，拥有不同于sRGB的范围；一些超出0..255的sRGB范围的颜色将变得可以显示(在设备的范围内)，而其它0..255的sRGB范围内但在设备范围之外的颜色会被匹配。

RGBA颜色值

RGB颜色模型在本规范中被扩展成为了包含“alpha”的颜色模型，以此允许设置一个带有透明度的颜色。参见简单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 */
em { color: rgb(100%,0%,0%) }   /* float range 0.0% - 100.0% */
em { color: rgba(100%,0%,0%,1) } /* the same, with explicit opacity of 1 */

和RGB值不同的是，RGBA值不支持16进制符号。

RGBA取值的函数格式是‘rgba(’紧跟一个逗号分割的3个数字(3个整数或3个百分数)，紧跟一个<alphavalue>，紧跟‘)’。整数255相当于百分数的100%，rgba(255,255,255,0.8) = rgba(100%,100%,100%,0.8)。数字左右可以有空格。

实现者必须根据RGB颜色的混合规则裁剪RGBA颜色值中的红绿蓝组件为设备相应的色域。

这些例子是rgba()可能定义的效果：

p { color: rgba(0,0,255,0.5) }        /* semi-transparent solid blue */
p { color: rgba(100%, 50%, 0%, 0.1) } /* very transparent solid orange */

注：如果用户代理不支持RGBA值，则会被CSS兼容解析规则([CSS21]，第四章)认作不可识别的值对待，而不会被认作忽略透明度的RGB值。

‘transparent’颜色关键字

CSS1介绍了背景色中的‘transparent’值。CSS2允许边框颜色为‘transparent’。 The Open eBook(tm) Publication Structure 1.0.1 [OEB101]将‘color’属性扩展为支持‘transparent’关键字。CSS3扩展了颜色值，其包含了‘transparent’关键字，该值可以用于任何<color>属性的值。这样这些属性的定义在CSSS3里被简化了。

transparent: 完全透明。该关键字可以被视为rgba(0,0,0,0)的简写，也是其计算值。

HSL颜色值

作为对数字化RGB颜色的完善，CSS3加入了数字化的色调-饱和度-亮度 (HSL)颜色。我们发现RGB颜色存在一些局限性：

RGB是面向硬件的：它反应了CRT的用法。
RGB并不直观。人们可以学习如何使用RGB，但事实上他们正是通过对色调、饱和度和亮度的换算或类似的感觉得出的RGB的值。

其实还有一些其它可能的配色方案。HSL优势在于它可以均匀的调节亮度(HSV这样的方案无法做到)，且HSL和RGB的转换很简单。

HSL颜色值是三个数(色调、饱和度、亮度)。色调代表了颜色盘上的一个角度(即把彩虹转成一个圈)。在CSS里这个角度也可以用度数来衡量，不错语法上只能写<number>。我们定义红色为0和360，其它颜色以此排布成一圈，则绿色是120，蓝色是240等等。从角度的算法上看，很明显-120等于240，480等于120。一个可以把角度x规范化到[0,360](包含0在内，但不包含360)之间的实现方法是计算(((x mod 360) + 360) mod 360)。饱和度和亮度则表示为百分数。对饱和度来说100%为完全饱和，0为灰色。对亮度来说0%是黑色，100%为白色，50%为正常。

看几个例子：

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

HSL颜色相对于RGB的优势在于它更加直观：你可以想象你想要的颜色，然后把它写出来。同样它还让颜色匹配变得容易(看准色调，然后调整亮度和饱和度就够了)。

如果饱和度小于0%，实现者必须让其变为0%。如果值的结果超出了设备的范围，实现者必须让其回到设备的范围内。上述改变需要保持相同的色调，仅此而已。(换句话说，我们将RGB颜色转换为HSL颜色后，调整的规则相对于RGB颜色是不同的。)

转换HSL为RGB的算法非常简单(here expressed in ABC [ABC] which was used to generate the tables.)在该算法中，全部三个值(H、S和L)都被限定在了小数0..1：

HOW TO RETURN hsl.to.rgb(h, s, l): 
       SELECT: 
	  l<=0.5: PUT l*(s+1) IN m2
	  ELSE: PUT l+s-l*s IN m2
       PUT l*2-m2 IN m1
       PUT hue.to.rgb(m1, m2, h+1/3) IN r
       PUT hue.to.rgb(m1, m2, h    ) IN g
       PUT hue.to.rgb(m1, m2, h-1/3) IN b
       RETURN (r, g, b)

    HOW TO RETURN hue.to.rgb(m1, m2, h): 
       IF h<0: PUT h+1 IN h
       IF h>1: PUT h-1 IN h
       IF h*6<1: RETURN m1+(m2-m1)*h*6
       IF h*2<1: RETURN m2
       IF h*3<2: RETURN m1+(m2-m1)*(2/3-h)*6
       RETURN m1

HSL例子

下面的每个表格都展示了一个色调。我们将色环十二等分(每份间隔30度)，并取了这十二个颜色：red, yellow, green, cyan, blue, magenta及其中间颜色，共12个。

每个表格的X轴表示饱和度(100%, 75%, 50%, 25%, 0)。

每个表格的Y轴表示亮度。50%表示正常亮度。

	0° Reds
	Saturation
	100%	75%	50%	25%	0%
100
88
75
63
50
38
25
13
0

	30° Red-Yellows (=Oranges)
	Saturation
	100%	75%	50%	25%	0%
100
88
75
63
50
38
25
13
0

	60° Yellows
	Saturation
	100%	75%	50%	25%	0%
100
88
75
63
50
38
25
13
0

	90° Yellow-Greens
	Saturation
	100%	75%	50%	25%	0%
100
88
75
63
50
38
25
13
0

	120° Greens
	Saturation
	100%	75%	50%	25%	0%
100
88
75
63
50
38
25
13
0

	150° Green-Cyans
	Saturation
	100%	75%	50%	25%	0%
100
88
75
63
50
38
25
13
0

	180° Cyans
	Saturation
	100%	75%	50%	25%	0%
100
88
75
63
50
38
25
13
0

	210° Cyan-Blues
	Saturation
	100%	75%	50%	25%	0%
100
88
75
63
50
38
25
13
0

	240° Blues
	Saturation
	100%	75%	50%	25%	0%
100
88
75
63
50
38
25
13
0

	270° Blue-Magentas
	Saturation
	100%	75%	50%	25%	0%
100
88
75
63
50
38
25
13
0

	300° Magentas
	Saturation
	100%	75%	50%	25%	0%
100
88
75
63
50
38
25
13
0

	330° Magenta-Reds
	Saturation
	100%	75%	50%	25%	0%
100
88
75
63
50
38
25
13
0

HSLA颜色值

和‘rgb()’之于‘rgba()’一样，‘hsl()’也有一个对应的‘hsla()’函数式来加入alpha定义。细节详见简单alpha组合。这里几个例子是相同的颜色：

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

HSLA颜色值的函数式格式是‘hsla(’紧跟色调度数、饱和度百分数、亮度百分数和一个<alphavalue>，最后跟一个‘)’。数字左右可以有空格。

这几个例子通过hsla()可能定义出的效果：

p { color: hsla(240, 100%, 50%, 0.5) } /* semi-transparent solid blue */
p { color: hsla(30, 100%, 50%, 0.1) }  /* very transparent solid orange */

扩展的颜色关键字

下面的表格提供了主流浏览器支持的X11颜色[X11COLORS]的列表，并额外的来自SVG 1.0的gray/grey变体。最终列表和SVG 1.0 颜色关键字名完全吻合。本规范基于SVG扩展了它们的定义。左侧的两个颜色样本分别通过两种方式设置了单元格的背景色：第一列使用了颜色的名称值，第二列使用了相应的数字化颜色值。

Color name	Hex rgb	Decimal
aliceblue	#f0f8ff	240,248,255
antiquewhite	#faebd7	250,235,215
aqua	#00ffff	0,255,255
aquamarine	#7fffd4	127,255,212
azure	#f0ffff	240,255,255
beige	#f5f5dc	245,245,220
bisque	#ffe4c4	255,228,196
black	#000000	0,0,0
blanchedalmond	#ffebcd	255,235,205
blue	#0000ff	0,0,255
blueviolet	#8a2be2	138,43,226
brown	#a52a2a	165,42,42
burlywood	#deb887	222,184,135
cadetblue	#5f9ea0	95,158,160
chartreuse	#7fff00	127,255,0
chocolate	#d2691e	210,105,30
coral	#ff7f50	255,127,80
cornflowerblue	#6495ed	100,149,237
cornsilk	#fff8dc	255,248,220
crimson	#dc143c	220,20,60
cyan	#00ffff	0,255,255
darkblue	#00008b	0,0,139
darkcyan	#008b8b	0,139,139
darkgoldenrod	#b8860b	184,134,11
darkgray	#a9a9a9	169,169,169
darkgreen	#006400	0,100,0
darkgrey	#a9a9a9	169,169,169
darkkhaki	#bdb76b	189,183,107
darkmagenta	#8b008b	139,0,139
darkolivegreen	#556b2f	85,107,47
darkorange	#ff8c00	255,140,0
darkorchid	#9932cc	153,50,204
darkred	#8b0000	139,0,0
darksalmon	#e9967a	233,150,122
darkseagreen	#8fbc8f	143,188,143
darkslateblue	#483d8b	72,61,139
darkslategray	#2f4f4f	47,79,79
darkslategrey	#2f4f4f	47,79,79
darkturquoise	#00ced1	0,206,209
darkviolet	#9400d3	148,0,211
deeppink	#ff1493	255,20,147
deepskyblue	#00bfff	0,191,255
dimgray	#696969	105,105,105
dimgrey	#696969	105,105,105
dodgerblue	#1e90ff	30,144,255
firebrick	#b22222	178,34,34
floralwhite	#fffaf0	255,250,240
forestgreen	#228b22	34,139,34
fuchsia	#ff00ff	255,0,255
gainsboro	#dcdcdc	220,220,220
ghostwhite	#f8f8ff	248,248,255
gold	#ffd700	255,215,0
goldenrod	#daa520	218,165,32
gray	#808080	128,128,128
green	#008000	0,128,0
greenyellow	#adff2f	173,255,47
grey	#808080	128,128,128
honeydew	#f0fff0	240,255,240
hotpink	#ff69b4	255,105,180
indianred	#cd5c5c	205,92,92
indigo	#4b0082	75,0,130
ivory	#fffff0	255,255,240
khaki	#f0e68c	240,230,140
lavender	#e6e6fa	230,230,250
lavenderblush	#fff0f5	255,240,245
lawngreen	#7cfc00	124,252,0
lemonchiffon	#fffacd	255,250,205
lightblue	#add8e6	173,216,230
lightcoral	#f08080	240,128,128
lightcyan	#e0ffff	224,255,255
lightgoldenrodyellow	#fafad2	250,250,210
lightgray	#d3d3d3	211,211,211
lightgreen	#90ee90	144,238,144
lightgrey	#d3d3d3	211,211,211
lightpink	#ffb6c1	255,182,193
lightsalmon	#ffa07a	255,160,122
lightseagreen	#20b2aa	32,178,170
lightskyblue	#87cefa	135,206,250
lightslategray	#778899	119,136,153
lightslategrey	#778899	119,136,153
lightsteelblue	#b0c4de	176,196,222
lightyellow	#ffffe0	255,255,224
lime	#00ff00	0,255,0
limegreen	#32cd32	50,205,50
linen	#faf0e6	250,240,230
magenta	#ff00ff	255,0,255
maroon	#800000	128,0,0
mediumaquamarine	#66cdaa	102,205,170
mediumblue	#0000cd	0,0,205
mediumorchid	#ba55d3	186,85,211
mediumpurple	#9370db	147,112,219
mediumseagreen	#3cb371	60,179,113
mediumslateblue	#7b68ee	123,104,238
mediumspringgreen	#00fa9a	0,250,154
mediumturquoise	#48d1cc	72,209,204
mediumvioletred	#c71585	199,21,133
midnightblue	#191970	25,25,112
mintcream	#f5fffa	245,255,250
mistyrose	#ffe4e1	255,228,225
moccasin	#ffe4b5	255,228,181
navajowhite	#ffdead	255,222,173
navy	#000080	0,0,128
oldlace	#fdf5e6	253,245,230
olive	#808000	128,128,0
olivedrab	#6b8e23	107,142,35
orange	#ffa500	255,165,0
orangered	#ff4500	255,69,0
orchid	#da70d6	218,112,214
palegoldenrod	#eee8aa	238,232,170
palegreen	#98fb98	152,251,152
paleturquoise	#afeeee	175,238,238
palevioletred	#db7093	219,112,147
papayawhip	#ffefd5	255,239,213
peachpuff	#ffdab9	255,218,185
peru	#cd853f	205,133,63
pink	#ffc0cb	255,192,203
plum	#dda0dd	221,160,221
powderblue	#b0e0e6	176,224,230
purple	#800080	128,0,128
red	#ff0000	255,0,0
rosybrown	#bc8f8f	188,143,143
royalblue	#4169e1	65,105,225
saddlebrown	#8b4513	139,69,19
salmon	#fa8072	250,128,114
sandybrown	#f4a460	244,164,96
seagreen	#2e8b57	46,139,87
seashell	#fff5ee	255,245,238
sienna	#a0522d	160,82,45
silver	#c0c0c0	192,192,192
skyblue	#87ceeb	135,206,235
slateblue	#6a5acd	106,90,205
slategray	#708090	112,128,144
slategrey	#708090	112,128,144
snow	#fffafa	255,250,250
springgreen	#00ff7f	0,255,127
steelblue	#4682b4	70,130,180
tan	#d2b48c	210,180,140
teal	#008080	0,128,128
thistle	#d8bfd8	216,191,216
tomato	#ff6347	255,99,71
turquoise	#40e0d0	64,224,208
violet	#ee82ee	238,130,238
wheat	#f5deb3	245,222,179
white	#ffffff	255,255,255
whitesmoke	#f5f5f5	245,245,245
yellow	#ffff00	255,255,0
yellowgreen	#9acd32	154,205,50

‘currentColor’颜色关键字

CSS1和CSS2定义了‘border-color’属性的初始值为其‘color’属性的值，但是没有定义其相应的关键字。这一疏忽被SVG发现了，也因此SVG 1.0介绍了‘fill’、‘stroke’、‘stop-color’、‘flood-color’、‘lighting-color’属性中的‘currentColor’值。CSS3在扩展颜色值时引入了‘currentColor’关键字，以此允许其用在所有接受<color>值的属性上。它简化了CSS3属性的定义。

currentColor: ‘color’属性的值。其计算值是当前‘color’属性的值。如果‘currentColor’被设置在‘color’属性上，则其相当于‘color:inherit’。

CSS系统颜色

CSS2系统颜色

已经被弃用。为了可以使用文字颜色、背景颜色等信息的关键字。CSS2允许作者集成用户图形环境中的颜色。

对于系统来说如果相应的值不存在，则被指定的值应该匹配到最接近系统颜色的值，或默认颜色值。注意一些CSS轮廓(profile)完全不支持系统颜色。

下面列出了颜色相关的额外的CSS值，以及它们的表意。任何颜色属性都可以使用下面的名字。虽然它们是大小写不敏感的，但是推荐使用下面的大小写混排的方式书写，这样看得更清楚。

ActiveBorder: 活跃的窗口边框
ActiveCaption: 活跃的窗口标题
AppWorkspace: 多文档界面的背景
Background: 桌面背景
ButtonFace: The face background color for 3-D elements that appear 3-D due to one layer of surrounding border.
ButtonHighlight: The color of the border facing the light source for 3-D elements that appear 3-D due to one layer of surrounding border.
ButtonShadow: The color of the border away from the light source for 3-D elements that appear 3-D due to one layer of surrounding border.
ButtonText: 按钮上的文字
CaptionText: 标题文字
GrayText: 灰色的文字。如果不支持灰色文字则该颜色为#000。
Highlight: 被选中的项目
HighlightText: 被选中的项目的文字
InactiveBorder: 非活跃的窗口边框
InactiveCaption: 非活跃的窗口标题
InactiveCaptionText: 非活跃的窗口标题文字
InfoBackground: 提示条的背景
InfoText: 提示条的文字
Menu: 菜单背景
MenuText: 菜单文字
Scrollbar: 滚动条灰色区域
ThreeDDarkShadow: The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
ThreeDFace: The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
ThreeDHighlight: The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
ThreeDLightShadow: The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
ThreeDShadow: The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
Window: 窗口背景
WindowFrame: 窗口框架
WindowText: 窗口的文本

比如，如果希望前景色和背景色的值和窗口的相同，可以这样写：

p { color: WindowText; background-color: Window }

注：注意，CSS2系统颜色值已经被弃用了，取而代之的是CSS3 UI的‘appearance’属性。如果你想模拟用户界面相关的元素效果，请使用‘appearance’属性替代系统颜色值。

使用颜色时的注意事项

虽然颜色可以用来强调文档的信息，使其更好的被阅读，我们还是希望在您为文档着色之前参考一下W3C的Web内容可访问性指南[WCAG20]。

1.4.1 使用颜色：颜色的使用不应该仅为了从视觉上传递信息、表明动作、提示回应或区分视觉元素。

简单的颜色组合

在绘制过程中，实现者必须根据[SVG11]的14.2章节简单的alpha组合来控制alpha。(如果其章节提到的‘color-interpolation’或‘color-rendering’属性并未实现或并不提供，则实现者必须在其初始值下做处理。)

(X)HTML的样式表示例

该附录是非正式的。这个样式表应该被实现者作为HTML4, XHTML1, XHTML1.1, XHTML Basic, 以及其它XHTML系列文档的默认样式表的一部分使用。

html { 
	color: black;
	background: white;
}


/* traditional desktop user agent colors for hyperlinks */
:link    { color: blue; }   
:visited { color: purple; }

/* default focus outline */
:focus {
	outline: 1px dotted;  /* or 1px dotted invert */
}

轮廓(Profiles)

每个使用CSS3 Color的规范必须定义其允许和不允许的CSS3 Color特性的子集，并描述其子集的所有组件的本地意义。

非正式的例子；

CSS3 Color profile
Specification	HTML4
Accepts	Basic color keywords RGB six digit hex color values
Excludes	‘`color`’ property ‘`opacity`’ property RGB three digit hex color values and RGB functional notation color value RGBA color values HSL and HSLA color values Extended color keywords ‘`currentColor`’ color value CSS2 UI Colors ‘`transparent`’ color value
Extra constraints	none.

CSS3 Color profile
Specification	CSS level 1
Accepts	‘`color`’ property Basic color keywords RGB color values
Excludes	‘`opacity`’ property RGBA color values HSL and HSLA color values Extended color keywords ‘`currentColor`’ color value CSS2 UI Colors ‘`transparent`’ color value
Extra constraints	none.

CSS3 Color profile
Specification	CSS level 2
Accepts	‘`color`’ property Basic color keywords RGB color values CSS2 UI Colors ‘`transparent`’ color value
Excludes	‘`opacity`’ property RGBA color values HSL and HSLA color values Extended color keywords ‘`currentColor`’ color value
Extra constraints	‘`transparent`’ color value not valid for ‘`color`’ property. ‘`orange`’ color value (part of Extended color keywords) is accepted in CSS level 2 revision 1

CSS3 Color profile
Specification	SVG 1.0 and 1.1
Accepts	‘`color`’ property ‘`opacity`’ property Basic color keywords RGB color values CSS2 UI Colors Extended color keywords ‘`currentColor`’ color value
Excludes	RGBA color values HSL and HSLA color values ‘`transparent`’ color value
Extra constraints	‘`currentColor`’ color value not valid for ‘`color`’ property.

测试套件

A CSS Color Module Test Suite has been developed, although further tests may be added. This test suite is intended to allow user agents to verify their basic conformance to the specification. This test suite does not pretend to be exhaustive and does not cover all possible numerical color values. These tests are available at http://www.w3.org/Style/CSS/Test/#css3-color.

Call for Implementations of dropped features

A number of features that were present in the 14 May 2003 Candidate Recommendation are no longer present in this specification. However, the call for implementations for these features remains, and they may be included in a future level of this specification given sufficient implementations and a test suite to demonstrate interoperability. These features are:

ICC Color Profile: the ‘color-profile’ property
The ‘rendering-intent’ property
The ‘@color-profile’ at-rule
‘flavor’ system color

致谢

Thanks to Brad Pettit both for writing up color-profiles, and for implementing it. Thanks to Steven Pemberton for his write up on HSL colors. Thanks especially to the feedback from Marc Attinasi, Bert Bos, Joe Clark, fantasai, Patrick Garies, Tony Graham, Ian Hickson, Susan Lesch, Alex LeDonne, Cameron McCormack, Krzysztof Maczyński, Chris Moschini, Chris Murphy, Christoph Päper, David Perrell, Jacob Refstrup, Dave Singer, Jonathan Stanley, Andrew Thompson, Russ Weakley, Etan Wexler, David Woolley, Boris Zbarsky, Steve Zilles, the XSL FO subgroup of the XSL working group, and all the rest of the www-style community. And thanks to Chris Lilley for being the resident CSS Color expert.

Css3-color

Contents

介绍

依赖