Abstract

CSS (Cascading Style Sheets) is a language for describing the rendering of
HTML and
XML
documents on screen, on paper, in speech, etcand so forth. To color elements
in a document, it uses color-related properties and
respective values. This
draft describes the properties and values that are proposed for
CSS
level 3. It includes and extends them from properties and values of
CSS
level 2.

Status of this document

This document is a draft of one of the
"modules" for the upcoming
CSS3
specification. It not only describes the
color-related properties and values
that already exist in CSS1 and CSS2, but also proposes new
properties and values for CSS3 as well.
The Working Group doesn't expect that
all implementations of CSS3 will implement all
properties or values. Instead,
there will probably be a small number of variants of CSS3, so-called
"profiles".
For example, it may be that only the profile for 32-bit color
user agents will include all of the proposed color-related properties and
values.

The current draft is the result of the merging of relevant parts of the
following Recommendations and Working Drafts, and the addition of some new
features.

This document is a working draft of the CSSworking groupWorking Group
which is part of
the style activityStyle Activity (see summary). This is a W3CLast Call Working DraftLast
Call Working Draft. This is the second last callLast Call for this document,
because, in response to comments on the previous draft, sufficient changes
were made (see Changes below) as to justify reissuing
a last callLast Call
before advancing the document to candidate
recommendationCandidate Recommendation. The
working groupWorking Group
requests that anyone who made comments on the previous
last callLast Call
draft who believes their comments to still apply to please reiterate
their comments on this draft. Last callCall means that the working groupWorking Group believes
that this specification is ready and therefore wishes this to be the last
call for comments. If the feedback is positive, the working groupWorking Group plans to
submit itthis specification
for consideration as a W3C
Candidate RecommendationW3CCandidate Recommendation. Comments can be sent until the 28th of
February, 2003.

Comments on, and discussions of this draft should take place on the (archived) public
mailing list www-style@w3.org (see
instructions). W3C Members can
also send comments directly to the CSS working group.

Changes

To assist readers who are familiar with the previous draft of this
document, this section outlines the major (non-editorial) changes that were
made, and the reasons for making them.

Color names/values harmonized with SVG 1.0. There was substantial
feedback on the previous draft that requested that CSS3 Color normatively
list all the normative color names/values which are accepted by SVG 1.0. This
document now contains the following additional named colors: darkgrey,
darkslategrey, dimgrey, lightgray, lightslategrey, slategrey. Note that this
change was also made in accordance with the TAG finding regarding Consistency
of Formatting Property Names, Values, and Semantics.

Optional <priority-index> dropped from 'opacity' property and thus
harmonized with SVG 1.0. There was feedback indicating that this optional
extension to the 'opacity' property was not desired, nor would it necessarily
be the best way to solve the problem it was trying to address. A better way
to enable authors to control the styling of elements dependent upon
(potentially) hardware-dependent support for opacity would be to extend Media
Queries to enable style(sheet/rule)sstyling based on the presence/absence of such
support. In addition the prose description of <alphavalue> has been
harmonized with the SVG 1.0 description of the same.

1. Introduction

CSS3 is a set of modules, divided up and profiled in order to simplify
the specification, and to allow implementors the flexibility of supporting
the particular modules appropriate for their implementations.

This module describes CSS properties which allow authors to specify the
foreground color and opacity of an element. Additional properties allow
specification of the ICC color profile and rendering intent of image content.
This module also describes in detail the CSS <color> value type.

The computed value for HTML4 keywords, RGB hex values and SVG color
keywords is the equivalent six digit hex value.
I'd like that the computed value be of the form
rgba(<number>,<number>,<number>,<alphavalue>). I
suppose that computing to a hex value is a concession made to implementations
of the downlevel profiles with no alpha channel support. Even so, the form
rgba(<number>,<number>,<number>) is a better choice than the
hex hash as the former exposes the components individually.
The computed value of the
keyword 'transparent' is rgba(0,0,0,0). If the color is specified using the
attr() syntax then the computed value is the result of evaluating the
attribute's value as a <color>. For all other values, the computed
value is the specified value.
<percentage> terms should compute to <number>
terms. <alphavalue> terms are clamped to [0,1].

This property describes the foreground color of an element's text content.
In addition it is used to provide a potential indirect value (currentColor) for any other properties that
accept color values. If the 'currentColor' keyword is set on the 'color'
property itself, it is treated as 'color:inherit' at parse time.

This function returns as a color the value of attribute
<identifier> for the subject of the selector. The attribute value is
parsed by the CSS processor as a <color>. If the subject of the
selector doesn't have an attribute <identifier>, or if the value of
attribute <identifier> is not a valid <color>, then the value is
treated as the keyword 'inherit'. The case-sensitivity of attribute names
depends on the document language. Note. In CSS3, it is not
possible to refer to attribute values for other elements of the selector.
Note. The second parameter to the "attr()" function is the
literal symbolkeyword 'color'.

To refer to a 'text' attribute on a body element to set the color:

Example(s):

body { color: attr(text,color); } /* use 'text' attribute */

3.1.1. Gamma correction

For information about gamma issues, please consult the Gamma Tutorial
in the PNG specification ([PNG1.0]).

In the computation of gamma correction, UAs displaying on a CRT may assume an ideal CRT and ignore any
effects on apparent gamma caused by dithering. That means the minimal
handling they need to do on current platforms is:

Opacity can be thought of conceptually as a postprocessing operation.
Conceptually, after the element is rendered into an RGBA offscreen image, the
opacity setting specifies how to blend the offscreen rendering into the
current composite rendering.

Name:

opacity

Value:

<alphavalue> | inherit

Initial:

1 none

Applies to:

all elements

Inherited:

no

Percentages:

N/A

Media:

visual

Computed value:

The same as the specified value after clipping the <alphavalue> to
the range [0.0,1.0].

<alphavalue>

Syntactically a <number>.
The uniform opacity setting to be applied across an entire object. Any
values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will
be clamped to this range. If the object is a container element, then the
effect is as if the contents of the container element were blended against
the current background using a mask where the value of each pixel of the mask
is <alphavalue>.

This property permits the specification of a source color profile other
than the default.

auto

This is the default behavior. All colors are presumed to be defined in
the sRGB color space unless a more precise embedded profile is specified
within content data. For images that do have a profile built into their data,
that profile is used. For images that do not have a profile, the sRGB profile
is used so that the colors in these images can be kept "in synch" with the
colors specified in CSS and HTML.

sRGB

The source profile is assumed to be sRGB. This differs from
auto in that it overrides an embedded profile inside an
image. For
consistency with CSS lexical scanning and parsing rules, the keyword "sRGB"
is case-insensitive; however, it is recommended that the mixed capitalization
"sRGB" be used for consistency with common industry practice.

<name>

What is the syntax, for goodness' sake?
Is this an <identifier>, a <string>, a sequence of tokens like
a <family-name>?
A name corresponding to a defined color profile that is in the user
agent's color profile description database. The user agent searches the color
profile description database for a color profile
description entry whose name descriptor matches <name> and uses the
last matching entry that is found. If a match is found, the corresponding
profile overrides an embedded profile inside an image. If no match is found,
then the embedded profile inside the image is used.

<uri>

The location of a standard ICC profile resource. Just like specifying
sRGB, it overrides an embedded profile.

Example(s):

/* use the specified profile,
even if the image contains an embedded profile */
IMG { color-profile: url("http://example.com/profiles/eg.icm") }

This property permits the specification of a color profile rendering
intent other than the default. The behavior of values other than
auto and inherit are defined by the International Color
Consortium standard [ICC32].

auto

This is the default behavior. The user-agent determines the best intent
based on the content type.
(Easily confused with MIME/HTTP 'Content-Type' header
field.) For image content containing an embedded profile,
it should be assumed that the intent specified within the profile is the
desired intent. Otherwise, the user agent should use the current profile
(based on the color-profilestyleproperty) and
force the intent, overriding any intent that may be stored in the profile
itself.

3.5. The '@color-profile'
at-rule

SVG 1.0 introduced the @color-profile
at-rule as a method for grouping the color-profile and rendering-intent
properties.

The @color-profile rule can
be used to specify a color profile description. The general form is:

@color-profile { <color-profile-description> }

where the <color-profile-description> has the form:

descriptor: value;
[...]
descriptor: value;

Each @color-profile rule specifies a value for every color profile
descriptor, either implicitly or explicitly. Those not given explicit values
in the rule take the initial value listed with each descriptor in this
specification. These descriptors apply solely within the context of the
@color-profile rule in which they are defined, and do not apply to document
language elements. Thus, there is no notion of which elements the descriptors
apply to, or whether the values are inherited by child elements.

The name which can be the value of the 'color-profile' property. Note
that if <name> is not provided, it will be impossible to reference the
given color profile description. The name "sRGB" is predefined; any color
profile descriptions with <name> set to "sRGB" will be ignored.
There should be a reference to whatever syntax that is
eventually assigned to the first <name>.For
consistency with CSS lexical scanning and parsing rules, the keyword "sRGB"
is case-insensitive; however, it is recommended that the mixed capitalization
"sRGB" be used for consistency with common industry practice.

The source profile is the sRGBsRGB
color space [SRGB]. For consistency with CSS lexical scanning and parsing rules, the
keyword "sRGB" is case-insensitive; however, it is recommended that the mixed
capitalization "sRGB" be used for consistency with common industry practice.

<local-profile>

The source profile is a locally-stored profile. The syntax for
<local-profile> is:

"local(" + <string> + ")"

where <string> is the profile's unique ID as specified by International Color Consortium. (Note:
Profile description fields do not represent a profile's unique ID.
With current ICC proposals, the profile's unique ID is an MD5-encoded value
within the profile header.)

<uri>

The source profile is a URI reference to a color profile.The URI reference given identifies the color profile.

(<local-profile> <uri>)

Two profiles are specified. If <local-profile> cannot be found on
the local system, then the <uri> is used.

What happens when there are two or more declarations for a given descriptor?
I assume that the lattermost wins, but my assumption is just an assumption.
In the case of 'src', I rather assume that the winning declaration is the
lattermost declaration with a usable URI (the user agent can handle the
scheme and dereferencing is currently possible and the resource returned is
not an error indicator).

The comments are redundant given the following prose. Worse yet,
they are not clear.

The format of an RGB value in hexadecimal notation is a '#'number sign
('#', U+0023) immediately
followed by either three or six hexadecimal characters. The three-digit RGB
notation (#rgb) is converted into six-digit form (#rrggbb) by replicating
digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This
ensures that white (#ffffff) can be specified with the short notation (#fff)
and removes any dependencies on the color depth of the display.
In the six-digit form, the first two digits represent
the red component, the middle two digits represent the green component and the
last two digits represent the blue component. For all components, the first
digit is most significant.

The format of an RGB value in the functional notation is 'rgb(' followed
by a comma-separated list of three numerical values (either three integer
values or three percentage values) followed by ')'. The integer value 255
corresponds to 100%, and to F or FF in the hexadecimal notation:
rgb(255,255,255) = rgb(100%,100%,100%) = #FFF. Whitespace characters are
allowed around the numerical values.

All RGB colors are specified in the sRGB color space (see [SRGB]). User agents may vary in the fidelity with
which they represent these colors, but using sRGB provides an unambiguous and
objectively measurable definition of what the color should be, which can be
related to international standards (see [COLORIMETRY]).

Values outside the device gamut should be clipped in the actual value: the red, green, and
blue values mustshould
be changed to fall within the range supported by the device.
For a typical CRT monitor, whose device gamut is the same as sRGB, the three
rules below are equivalent:

Other devices, such as printers, have different gamuts tothansRGB; some
colors outside the 0..255 sRGB range will be representable (inside the device
gamut), while other colors inside the 0..255 sRGB range will be outside the
device gamut and will thus be clipped.

4.2.2. RGBA color values

The RGB color model is extended in this specification to include 'alpha'
to allow specification of the opacity of a color. These examples all specify
the same color:

Unlike RGB values, there is no hexadecimal notation for an RGBA value.

The format of an RGBA value in the functional notation is 'rgba('
followed by a comma-separated list of three numerical values (either three
integer values or three percentage values), followed by an <alphavalue>, followed by ')'. The integer
value 255 corresponds to 100%,;
rgb(255,255,255,0.8) =
rgb(100%,100%,100%,0.8). Whitespace characters are allowed around the
numerical values.

These examples specify new effects that are now possible with the new
rgba() notation:

Note.If RGBA values are not supported by a
user agent, they should be treated like unrecognized values per the CSS
forward compatibility parsing rules. RGBA values must NOT be treated as
simply an RGB value with the opacity ignored.If a user agent does not support RGBA values, it must treat them like
unrecognized values per the CSS forward compatibility parsing rules. The user agent must not ignore
the opacity component while using the other value components.

4.2.3. 'transparent' color
keyword

CSS1 introduced the 'transparent' value for the background-color property.
CSS2 allowed border-color to also accept the 'transparent' value. The Open
eBook(tm)™ Publication Structure 1.0.1 [OEB101] extended the 'color' property to also accept
the 'transparent' keyword. CSS3 extends the
color value<color>
value type to include the
'transparent' keyword to allow its use with all properties that accept a
<color> value. This simplifies the definition of those properties in
CSS3.

transparent

Fully transparent. This keyword can be considered a shorthand for
rgba(0,0,0,0) which is its computed value.

4.2.4. HSL color values

CSS3 adds numerical hue-saturation-lightness (HSL) colors as a complement
to numerical RGB colors. It has been observed that RGB colors have the
following limitations:

RGB is hardware-oriented: it reflects the use of CRTs.

RGB is non-intuitive. People can learn how to use RGB, but actually by
internalizing how to translate hue, saturation and lightness, or something
similar, to RGB.

There are several other color schemes possible. Advantages of HSL are
that it is symmetrical with respectto lightness and darkness (which is not the case with
HSV, for example), and it is trivial to convert HSL to RGB.

HSL colors are encoding as a triple (hue, saturation, lightness). Hue is
represented as an angle of the color circle (i.e. the rainbow represented in
a circle). This angle is so typically measured in degrees that the unit is
implicit in CSS; syntactically, only a <number> is given. By definition
red=0=360, and the other colors are spread around the circle, so green=120,
gblue=240, etc. Saturation and lightness are represented as percentages. The saturation value 100%
is full saturation, and 0% saturation is a shade of greygray. The value 0% lightness is black, 100%
lightness is white, and 50% lightness is 'normal'.

The advantage of HSL over RGB is that it is far more intuitive: youthe novice style sheet author can
guess at the colors you wantthat she wants, and then tweak. It is also easier to create
sets of matching colors (by keeping the hue the same and varying the
lightness/darkness, and saturation)

The algorithm to translate HSL to RGB is simple (here expressed in ABCABC [ABC] which was used to generate
the tables.) In these algorithms, all three valuescomponents (H, S and Lhue, saturation and lightness) have been
normalized to fractions 0..1:

4.2.4.1. HSL Examples

Each table below represents one hue. Twelve equally spaced colors (i.e.
at 30¡ intervals) have been chosen from the color circle: red, yellow,
green, cyan, blue, magenta, with all the intermediate colors (the last is the
color between magenta and red).

The Y axis represents the lightness. 50% is 'normal'.That second sentence is mere repetition of earlier prose.

It would be nice if the tables just went down the page in normal flow.
Why is the X axis labeled "Saturation" while the Y axis is unlabeled?
Why is the percent sign used with headings on the X axis but not used
with headings on the Y axis?

0¡ Red

Saturation

100%

75%

50%

25%

0%

100

88

75

63

50

38

25

13

0

30¡ Red-Yellow (=Orange)

Saturation

100%

75%

50%

25%

0%

100

88

75

63

50

38

25

13

0

60¡ Yellow

Saturation

100%

75%

50%

25%

0%

100

88

75

63

50

38

25

13

0

90¡ Yellow-Green

Saturation

100%

75%

50%

25%

0%

100

88

75

63

50

38

25

13

0

120¡ Green

Saturation

100%

75%

50%

25%

0%

100

88

75

63

50

38

25

13

0

150¡ Green-Cyan

Saturation

100%

75%

50%

25%

0%

100

88

75

63

50

38

25

13

0

180¡ Cyan

Saturation

100%

75%

50%

25%

0%

100

88

75

63

50

38

25

13

0

210¡ Cyan-Blue

Saturation

100%

75%

50%

25%

0%

100

88

75

63

50

38

25

13

0

240¡ Blue

Saturation

100%

75%

50%

25%

0%

100

88

75

63

50

38

25

13

0

270¡ Blue-Magenta

Saturation

100%

75%

50%

25%

0%

100

88

75

63

50

38

25

13

0

300¡ Magenta

Saturation

100%

75%

50%

25%

0%

100

88

75

63

50

38

25

13

0

330¡ Magenta-Red

Saturation

100%

75%

50%

25%

0%

100

88

75

63

50

38

25

13

0

4.2.5.
HSLA color values

Just as the 'rgb()' functional notation has the 'rgba()' alpha
counterpart, the 'hsl()' functional notation has the 'hsla()' alpha
counterpart. These examples specify the same color:

The format of an HSLA color value in the functional notation is 'hsla('
followed by a <number> representing the hue in degrees, saturation and lightness as a percentagea <percentage> representing saturation,
a <percentage> representing lightness,, and
an <alphavalue>, followed by ')'.
Whitespace characters are allowed around the numerical values.

These examples specify new effects that are now possible with the new
hsla() notation:

4.3. SVG color keywords

The table below provides a list of the X11 colors [X11COLORS] supported by popular browsers with the
addition of gray/grey variants from SVG 1.0. The resulting list is precisely
the same as the SVG 1.0 color
keyword names. The two color swatches on the left illustrate setting the
background color of a table cell in two ways: The first column uses the named
color value, and the second column uses the respective numeric color value.

The "Named" column is pointless here. The numeric value is normative and its
use is therefore sufficient for the definition. Use of named colors belongs in
a test suite, not in this specification.

Named

Numeric

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

4.4. 'currentColor' color
keyword

CSS1 and CSS2 defined the initial value of the 'border-color'
property to be the
value of the 'color' property but did not define a corresponding keyword.
This omission was recognized by SVG, and thus SVG1.0 introduced
the 'currentColor' value for the 'fill', 'stroke', 'stop-color',
'flood-color', 'lighting-color' properties. CSS3 extends the color value to
include the 'currentColor' keyword to allow its use with all properties that
accept a <color> value. This simplifies the definition of those
properties in CSS3.

currentColor

The value of the 'color' property. If the 'currentColor' keyword is set
on the 'color' property itself, it is treated as 'color:inherit' at parse
time.

4.5. CSS System Colors

4.5.1. CSS2 User preferences
for colors

In addition to being able to assign pre-defined color values to text,
backgrounds, etc., CSS3, like CSS2,
allows authors to specify colors in a manner that integrates them into the
user's graphic environment. Style rules that take into account user
preferences thus offer the following advantages:

They produce pages that fit the user's defined look and feel.

They produce pages that may be more accessible as the current user
settings may be related to a disability.

For systems that do not have a corresponding value, the specified value
should be mapped to the nearest system attribute, or to a default color. Note
that some profiles of CSS may not support System Colors at all.

The following lists additional values for color-related CSS attributes and
their general meaning. Any color property can take one of the following
names. Although these are case-insensitive, it is recommended that the mixed
capitalization shown below be used, to make the names more legible.

For example, to set the foreground and background colors of a paragraph
to the same foreground and background colors of the user's window, write the
following:

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

Note. The computed value of a System Color
keyword value is the keyword itself. This is necessary
because the result may not be a solid, constant color; it may, for instance, be
a gradient or a chronological sequence of colors.
In addition, in future CSS
specifications, the color property may accept additional System Color values.

4.5.2. CSS3 User preferences
for hyperlink colors

The case against the creation/inclusion of hyperlink color keywords
has emerged on www-style, not least of all from editor Tantek Çelik.
For my convenience I do not present the case here.
Please just eliminate this section.

Most desktop user agents allow the user to choose the default colors for
hyperlinks to be rendered in their various states. The following system
colors permit an author to explicitly style their hyperlinks in accordance
with those preferences. The color names, though case-insensitive, are
presented here in mixed case (camel-case in particular) in order to be
consistent with the CSS2 system colors.

ActiveHyperlink

Active hyperlink background.

ActiveHyperlinkText

Text of an active hyperlink.

HoverHyperlink

Hover hyperlink background.

HoverHyperlinkText

Text of a hyperlink in the hover state.

Hyperlink

Hyperlink background.

HyperlinkText

Hyperlink text.

VisitedHyperlink

Visited hyperlink background.

VisitedHyperlinkText

Text of a visited hyperlink.

Example(s):

For example, to set all links to their default visited and unvisited
colors, write the following:

4.5.3. 'flavor' system color

flavor

An accent color (typically chosen by the user) to customize the user
interface of the user agent itself. User agents may default the 'flavor'
color to the dominant accent color used on the physical machine/mechanism
that the user is interacting with (frequently a mouse, keyboard, monitor and
computer case, often just a laptop), if the UA is able to retrieve that
information from the platform and machine.
This suggestion is not very useful.
The best thing about this suggestion is that it is non-normative.
It is not expected that this value
will make sense on all platforms and machines.

DEPRECATED EXAMPLE:

:focus {outline: 1px solid flavor}
/* puts an outline around the currently focused element that color
coordinates with the browser accent color if any */

Why include deprecated examples when the feature for demonstration is not
deprecated?

Example:

:focus {border: 1px solid flavor}
/* puts an border around the currently focused element that color
coordinates with the browser accent color, if any */

4.6. Notes on using colors

Although colors can add significant amounts of information to document and
make them more readable, please consider the W3C Web Content Accessibility
Guidelines [WCAG] when including color
in your documents.

7. Test Suite

This specification contains a test suite allowing 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 [link forthcoming].

8. Acknowledgments

Thanks to Brad Pettit for bothboth for writing up color-profiles, and for
implementing it. Thanks to Steven Pemberton for his write-up on HSL colors.
Thanks tofor feedback from Marc Attinasi, David Baron, Bert Bos, Ian Hickson,
Steve Zilles. And thanks to Chris Lilley for being the resident CSS Color
expert.