W3C

CSS3 module: Color

W3C Working Draft 18 April 2002

This version:
http://www.w3.org/TR/2002/WD-css3-color-20020418
Latest version:
http://www.w3.org/TR/css3-color
Previous version:
http://www.w3.org/TR/2002/WD-css3-color-20020219
Editors:
Tantek Çelik (Microsoft Corporation) <tantekc@microsoft.com>
Chris Lilley (W3C) <chris@w3.org>
Additional Authors:
Steven Pemberton (CWI) <steven.pemberton@cwi.nl>
Brad Pettit (Microsoft Corporation) <bradp@microsoft.com>

Abstract

CSS (Cascading Style Sheets) is a language for describing the rendering of HTML and XML documents on screen, on paper, in speech, etc. 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 CSS working group which is part of the style activity (see summary). This is a W3C Last Call Working Draft. Last call means that the working 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 group plans to submit it for consideration as a W3C Candidate Recommendation. Comments can be sent until the 17th of May, 2002.

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

To find the latest version of this working draft, please follow the "Latest version" link above, or visit the list of W3C Technical Reports.

Table of contents


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.

2. Dependencies

This CSS3 module depends on the following other CSS3 modules:

The following CSS3 modules depend on this CSS3 module:

3. Color properties

3.1. Foreground color: the 'color' property

Name: color
Value: <color> | inherit | attr(X,color)
Initial: depends on user agent
Applies to: all elements
Inherited: yes
Percentages: N/A
Media: visual
Computed value: The computed value for HTML4 keywords, RGB hex values and X11 keywords is the equivalent six digit hex value. 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.

This property describes the foreground color of an element's text content. There are different ways to specify red:

Example(s):

em { color: red }              /* predefined color name */
em { color: rgb(255,0,0) }     /* RGB range 0-255   */
<color>
Color units are defined in a following section.
attr(X,color)
This function returns as a color the value of attribute X 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 X, or if the value of attribute X 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 symbol 'color'.

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:

PC using MS-Windows
none
Unix using X11
none
Mac using QuickDraw
apply gamma 1.45 [ICC3.2] (ColorSync-savvy applications may simply pass the sRGB ICC profile to ColorSync to perform correct color correction)
SGI using X
apply the gamma value from /etc/config/system.glGammaVal (the default value being 1.70; applications running on Irix 6.2 or above may simply pass the sRGB ICC profile to the color management system)
NeXT using NeXTStep
apply gamma 2.22

"Applying gamma" means that each of the three R, G and B must be converted to R'=Rgamma, G'=Ggamma, B'=Bgamma, before being handed to the OS.

This may rapidly be done by building a 256-element lookup table once per browser invocation thus:

for i := 0 to 255 do
  raw := i / 255.0;
  corr := pow (raw, gamma);
  table[i] := trunc (0.5 + corr * 255.0)
end

which then avoids any need to do transcendental math per color attribute, far less per pixel.

3.2. Transparency: the 'opacity' property

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> <priority-index>? | 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>
A decimal value [0.0,1.0]. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clipped to this range.
<priority-index>
An optional positive integer value or the keyword 'none'. The <priority-index> value indicates the priority for this element to make use of any hardware acceleration for its opacity effect. A priority of 'none' means the hardware opacity acceleration may be ignored for this element. Positive integer values are treated similarly to HTML's tabindex. Any hardware opacity acceleration capabilities are allocated in order of the elements with the lowest priority-index. When elements earlier in the document tree have the same priority-index as latter elements, the earlier elements take priority.

The opacity property is applied across an entire element including its outline, border, background and text-decoration if any. If the element is a container element, then the effect is as if the contents of the element were blended against the current rendering composite using a mask where the value of each pixel of the mask is <alphavalue>.

3.3. ICC Color Profile: the 'color-profile' property

Name: color-profile
Value: auto | sRGB | <name> | <uri> | inherit
Initial: auto
Applies to: all elements
Inherited: yes
Percentages: N/A
Media: visual
Computed value: specified value

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.
<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") }

3.4. The 'rendering-intent' property

Name: rendering-intent
Value: auto | perceptual | relative-colorimetric | saturation | absolute-colorimetric | inherit
Initial: auto
Applies to: all elements
Inherited: yes
Percentages: N/A
Media: visual
Computed value: specified value

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 [ICC3.2].

auto
This is the default behavior. The user-agent determines the best intent based on the content type. 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-profile style) 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 following are the descriptors for a <color-profile-description>:

'name' (Descriptor)
Values: <name>
Initial: undefined
Media: visual
<name>
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. 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.
'src' (Descriptor)
Values: sRGB | <local-profile> | <uri> | (<local-profile> <uri>)
Initial: sRGB
Media: visual
sRGB
The source profile is the sRGB color space. 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.
(<local-profile> <uri>)
Two profiles are specified. If <local-profile> cannot be found on the local system, then the <uri> is used.
'rendering-intent' (Descriptor)
Values: auto | perceptual | relative-colorimetric | saturation | absolute-colorimetric
Initial: auto
Media: visual

See the description of the 'rendering-intent' property.

4. Color units

A <color> is either a keyword or a numerical specification.

4.1. HTML4 color keywords

The list of HTML4 keyword color names is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. The color names are case-insensitive.

Color names and sRGB values
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

Example(s):

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

4.2. Numerical color values

4.2.1. RGB color values

The RGB color model is used in numerical color specifications. These examples all specify the same color:

Example(s):

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

The format of an RGB value in hexadecimal notation is a '#' 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.

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: the red, green, and blue values must 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:

Example(s):

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

Other devices, such as printers, have different gamuts to sRGB; 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:

Example(s):

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

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:

Example(s):

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

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.

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 [OEB] extended the 'color' property to also accept the 'transparent' keyword. CSS3 extends the color value 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:

There are several other color schemes possible. Advantages of HSL are: it is symmetrical to 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). By definition Red=0=360, and the other colors are spread around the circle, so Green=120, Blue=240, etc. Saturation and Lightness are represented as percentages. 100% is full saturation, and 0% is a shade of grey. 0% lightness is black, 100% lightness is white, and 50% lightness is 'normal'

So for instance:

Example(s):

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

The advantage of HSL over RGB is that it is far more intuitive: you can guess at the colors you want, 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 ABC which was used to generate the tables.) In these algorithms, all three values (H, S and L) have been normalized to fractions 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<1: 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
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 X axis of each table represents the saturation (100%, 75%, 50%, 25%, 0%).

The Y axis represents the lightness. 50% is 'normal'.

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:

Example(s):

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

The format of an HSLA color value in the functional notation is 'hsla(' followed by the hue in degrees, saturation and lightness as a percentage, 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:

Example(s):

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

4.3. X11 color keywords

The table below provides a list of the X11 colors [X11COLORS] supported by popular browsers. 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 numeric color value, which should be the same.

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
    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
    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
    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
    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
    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
    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
    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. CSS System Colors

4.4.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:

  1. They produce pages that fit the user's defined look and feel.
  2. 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.

ActiveBorder
Active window border.
ActiveCaption
Active window caption.
AppWorkspace
Background color of multiple document interface.
Background
Desktop background.
ButtonFace
Face color for three-dimensional display elements.
ButtonHighlight
Dark shadow for three-dimensional display elements (for edges facing away from the light source).
ButtonShadow
Shadow color for three-dimensional display elements.
ButtonText
Text on push buttons.
CaptionText
Text in caption, size box, and scrollbar arrow box.
GrayText
Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color.
Highlight
Item(s) selected in a control.
HighlightText
Text of item(s) selected in a control.
InactiveBorder
Inactive window border.
InactiveCaption
Inactive window caption.
InactiveCaptionText
Color of text in an inactive caption.
InfoBackground
Background color for tooltip controls.
InfoText
Text color for tooltip controls.
Menu
Menu background.
MenuText
Text in menus.
Scrollbar
Scroll bar gray area.
ThreeDDarkShadow
Dark shadow for three-dimensional display elements.
ThreeDFace
Face color for three-dimensional display elements.
ThreeDHighlight
Highlight color for three-dimensional display elements.
ThreeDLightShadow
Light color for three-dimensional display elements (for edges facing the light source).
ThreeDShadow
Dark shadow for three-dimensional display elements.
Window
Window background.
WindowFrame
Window frame.
WindowText
Text in windows.

Example(s):

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. In addition, in future CSS specifications, the color property may accept additional System Color values.

4.4.2. CSS3 User preferences for hyperlink colors

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 are camel-cased 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:

:link    { 
  color: HyperlinkText; 
  background-color: Hyperlink 
}
:visited { 
  color: VisitedHyperlinkText; 
  background-color: VisitedHyperlink 
}

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

4.5. Notes on using colors

Although colors can add significant amounts of information to document and make them more readable, please consider the following guidelines when including color in your documents:

5. Sample style sheet for HTML 4.0

This appendix is informative, not normative.

body { 
	color: black;
	background: white;
	color-profile: sRGB;
	rendering-intent: auto 
}

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

/* user preferences for hyperlinks */
:link    { 
  color: HyperlinkText; 
  background-color: Hyperlink 
}
:visited { 
  color: VisitedHyperlinkText; 
  background-color: VisitedHyperlink 
}
:link:hover,:visited:hover { 
  color: HoverHyperlinkText; 
  background-color: HoverHyperlink 
}
:link:active,:visited:active { 
  color: ActiveHyperlinkText; 
  background-color: ActiveHyperlink 
}

img,object {
 	color-profile: auto;
 	rendering-intent: auto
}

/* default focus outline */
:focus {
	outline: 1px dotted gray; 
	outline: 1px solid flavor;
}

6. Profiles

Each specification using CSS3 Color must define the subset of CSS3 Color features it allows and excludes, and describe the local meaning of all the components of that subset.

Non normative examples:

CSS3 Color profile
Specification HTML4
Accepts HTML4 color keywords
RGB six digit hex color values
Excludes

'color' property
'opacity' property
'color-profile' property
'rendering-intent' property
@color-profile rule
RGB three digit hex color values and RGB functional notation color values
RGBA color values
HSL and HSLA color values
X11 color keywords
CSS2 UI Colors
CSS3 Hyperlink Colors
'transparent' color value
'flavor' color value

Extra constraints none.
CSS3 Color profile
Specification CSS level 1
Accepts 'color' property
HTML4 color keywords
RGB color values
Excludes

'opacity' property
'color-profile' property
'rendering-intent' property
@color-profile rule
RGBA color values
HSL and HSLA color values
X11 color keywords
CSS2 UI Colors
CSS3 Hyperlink Colors
'transparent' color value
'flavor' color value

Extra constraints none.
CSS3 Color profile
Specification CSS level 2
Accepts 'color' property
HTML4 color keywords
RGB color values
CSS2 UI Colors
'transparent' color value
Excludes

'opacity' property
'color-profile' property
'rendering-intent' property
@color-profile rule
RGBA color values
HSL and HSLA color values
X11 color keywords
CSS3 Hyperlink Colors
'flavor' color value

Extra constraints 'transparent' color value not valid for 'color' property.
CSS3 Color profile
Specification SVG 1.0
Accepts 'color' property
'opacity' property
@color-profile rule
HTML4 color keywords
RGB color values
CSS2 UI Colors
Excludes

'color-profile' property
'rendering-intent' property
RGBA color values
HSL and HSLA color values
X11 color keywords
CSS3 Hyperlink Colors
'transparent' color value
'flavor' color value

Extra constraints none.

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 both writing up color-profiles, and for implementing it. Thanks to Steven Pemberton for his write up on HSL colors. Thanks to feedback from Marc Attinasi, David Baron, Bert Bos, Ian Hickson, Steve Zilles. And thanks to Chris Lilley for being the resident CSS Color expert.

9. References

9.1. Normative

[COLORIMETRY]
Colorimetry, Second Edition. CIE Publication 15.2-1986. ISBN 3-900-734-00-3 URL: http://www.hike.te.chiba-u.ac.jp/ikeda/CIE/publ/abst/15-2-86.html
[HTML401]
Raggett, D.; Le Hors, A.; Jacobs, I.. HTML 4.01 Specification. Dec 1999. W3C Recommendation. URL: http://www.w3.org/TR/1999/REC-html401-19991224
[ICC3.2]
ICC Profile Format Specification, version 3.2. 1995. URL: http://www.color.org/icc32.pdf
[PNG1.0]
T. Boutell ed. PNG (Portable Network Graphics) Specification, Version 1.0. 1 October 1996. W3C Recommendation. URL: http://www.w3.org/TR/REC-png-multi.html
[SRGB]
Multimedia systems and equipment - Colour measurement and management - Part 2-1: Colour management - Default RGB colour space - sRGB. IEC 61966-2-1 (1999-10). ISBN: 2-8318-4989-6 ­ ICS codes: 33.160.60, 37.080 ­ TC 100 ­ 51 pp. URL: http://www.iec.ch/nr1899.htm

9.2. Informative

[CSS2]
Bert Bos; Hċkon Wium Lie; Chris Lilley; Ian Jacobs. Cascading Style Sheets, level 2. 1998. W3C Recommendation. URL: http://www.w3.org/TR/REC-CSS2
[CSS3-UI]
Tantek Çelik. User Interface for CSS3. 16 February 2000. W3C Working Draft. (Work in progress.) URL: http://www.w3.org/TR/2000/WD-css3-userint-20000216
[CSSICCPROF]
Brad Pettit; Tantek Çelik; Chris Lilley. Color Profiles for CSS3. 22 June 1999. W3C Working Draft. (Work in progress.) URL: http://www.w3.org/1999/06/WD-css3-iccprof-19990623
[HTMLICCPROF]
Apple Computer with input from Microsoft Corporation. Proposal for HTML support of ICC profiles. URL: http://www.apple.com/colorsync/benefits/web/icc-profiles.html
[OEB]
Open eBook(tm) Publication Structure 1.0.1. Open eBook Forum(tm). 02 July 2001. URL: http://www.openebook.org/oebps/oebps1.0.1/download/2001-07-02_OEBPS1.0.1_recommended/hoeb101.htm
[SVG1.0]
Various. Scalable Vector Graphics (SVG) 1.0 Specification. Sep 2001. W3C Recommendation. URL: http://www.w3.org/TR/2001/REC-SVG-20010904
[X11COLORS]
Robert B. Hess. Colors By Name. MSDN Online Web Workshop. 02 November 1996. URL: http://msdn.microsoft.com/workshop/design/color/x11_names.asp

Index

Property index

Property Values Initial Applies to Inh. Percentages Media
color <color> | inherit | attr(X,color) depends on user agent all elements yes N/A visual
color-profile auto | sRGB | <name> | <uri> | inherit auto all elements yes N/A visual
opacity <alphavalue> <priority-index>? | inherit 1 none all elements no N/A visual
rendering-intent auto | perceptual | relative-colorimetric | saturation | absolute-colorimetric | inherit auto all elements yes N/A visual