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。颜色名称是大小写不敏感的。

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

‘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%表示正常亮度。

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扩展了它们的定义。左侧的两个颜色样本分别通过两种方式设置了单元格的背景色：第一列使用了颜色的名称值，第二列使用了相应的数字化颜色值。

‘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 }

使用颜色时的注意事项

虽然颜色可以用来强调文档的信息，使其更好的被阅读，我们还是希望在您为文档着色之前参考一下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特性的子集，并描述其子集的所有组件的本地意义。

非正式的例子；

测试套件

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.