CSS3 Color Module (original) (raw)

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 specification 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 specification is one of the "modules" for the upcoming CSS level 3 (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 specification is the result of the merging of relevant parts of the following Recommendations and Working Drafts, and the addition of some new features.

• HTML 4.01 [HTML401]
• CSS 2.0 [CSS2]
• SVG 1.0 [SVG10]
• Color Profiles for CSS3 (22 June 1999) [CSSICCPROF]
• User Interface for CSS3 (16 February 2000) [CSSUI]

This specification is being put forth as a W3C Candidate Recommendation by the CSS Working Group (part of the Style Activity, see summary). This document is a revision of the Last Call Working Draft dated 2003 February 14, and has incorporated suggestions received during Last Call Review, comments by implementors, and further deliberations of the W3C CSS Working Group.

All persons are encouraged to review and implement this specification and send comments to the (archived) public mailing list www-style (see instructions). W3C Members can also send comments directly to the CSS Working Group.

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

For this specification to exit the CR stage, the following conditions shall be met:

1. There must be at least two interoperable implementations for every feature in the Color Module.
   For the purposes of this criterion, we define the following terms:
   feature
   a section or subsection in the Color Module.
   interoperable
   passing the respective test case(s) in the Color Module test suite, or, if the implementation is not a web browser, an equivalent test. Every relevant test in the test suite should have an equivalent test created if such a user agent (UA) is to be used to claim interoperability. In addition if such a UA is to be used to claim interoperability, then there must one or more additional UAs which can also pass those equivalent tests in the same way for the purpose of interoperability. The equivalent tests must be made publically available for the purposes of peer review.
   implementation
   a user agent which:
   1. implements the feature.
   2. is available (i.e. publicly downloadable or available through some other public point of sale mechanism). This is the "show me" requirement.
   3. is shipping (i.e. development, private or unofficial versions are insufficient).
   4. is not experimental (i.e. is intended for a wide audience and could be used on a daily basis.)
2. A minimum of sixth months of the CR period must have elapsed. This is to ensure that enough time is given for any remaining major errors to be caught.

The CSS Working Group believes this document addresses all last call comments, and can be considered stable. It can still be updated by the Working Group, but only to clarify its meaning. If, unexpectedly, serious problems are found, it will be returned to Working Draft status. Otherwise, as soon as the exit criteria is met, it will progress to become Proposed Recommendation. In either case, the duration of the Candidate Recommendation phase will be at least six months (April 2003 - October 2003).

Patent disclosures relevant to CSS may be found on the Working Group's public patent disclosure page.

A list of current W3C Recommendations and other technical documents can be found at http://www.w3.org/TR.

Table of Contents

• 1. Introduction
• 2. Dependencies
• 3. Color properties
  • 3.1. Foreground color: the 'color' property
    * 3.1.1. Gamma correction
  • 3.2. Transparency: the'opacity' property
  • 3.3. ICC Color Profile: the 'color-profile' property
  • 3.4. The 'rendering-intent' property
  • 3.5. The '@color-profile' at-rule
• 4. Color units
  • 4.1. HTML4 color keywords
  • 4.2. Numerical color values
    * 4.2.1. RGB color values
    * 4.2.2. RGBA color values
    * 4.2.3. 'transparent' color keyword
    * 4.2.4. HSL color values
    * 4.2.4.1. HSL Examples
    * 4.2.5. HSLA color values
  • 4.3. SVG color keywords
  • 4.4. 'currentColor' color keyword
  • 4.5. CSS System Colors
    * 4.5.1. CSS2 System Colors
    * 4.5.2. 'flavor' system color
  • 4.6. Notes on using colors
• 5. Sample style sheet for (X)HTML
• 6. Profiles
• 7. Test Suite
• 8.Acknowledgments
• 9. References
  • 9.1. Normative
  • 9.2. Informative
• Index
• Property index

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 value type.

2. Dependencies

This CSS3 module depends on the following other CSS3 modules:

• CSS3 Syntax
• CSS3 Values and Units

The following CSS3 modules depend on this CSS3 module:

• CSS3 Backgrounds
• CSS3 Borders
• CSS3 Box Model
• CSS3 Basic User Interface

3. Color properties

3.1. Foreground color: the'color' property

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.

There are different ways to specify lime green:

Example(s):

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

Color units are defined in a following section.

attr(,color)

This function returns as a color the value of attribute for the subject of the selector. The attribute value is parsed by the CSS processor as a . If the subject of the selector doesn't have an attribute , or if the value of attribute is not a valid , 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 keyword '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:

PC using MS-Windows

none

Unix using X11

none

Mac using QuickDraw

apply gamma 1.45 [ICC32](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)

"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 value, far less per pixel.

3.2. Transparency: the 'opacity' property

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

Syntactically a . 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 .

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

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 fromauto 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.

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

The location of a standard ICC profile resource. Just like specifyingsRGB, 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

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. 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-profileat-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 { }

where the 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 :

'name'(Descriptor)

The name which can be the value of the 'color-profile' property. Note that if is not provided, it will be impossible to reference the given color profile description. The name "sRGB" is predefined; any color profile descriptions with set to "sRGB" will be ignored.

'src'(Descriptor)

sRGB

The source profile is the sRGBcolor 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.

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

"local(" + + ")"

where is the profile's unique ID as specified by the 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.)

The source profile is a URI reference to a color profile.

( )

Two profiles are specified. If cannot be found on the local system, then the is used.

'rendering-intent'(Descriptor)

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

4. Color units

A 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. White space 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 , followed by ')'. The integer value 255 corresponds to 100%, rgba(255,255,255,0.8) = rgba(100%,100%,100%,0.8). White space 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 [OEB101] 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 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 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). This angle is so typically measured in degrees that the unit is implicit in CSS; syntactically, only a is given. By definition red=0=360, and the other colors are spread around the circle, so green=120, blue=240, etc. As an angle, it implicitly wraps around such that -120=240 and 480=120. One way an implementation could normalize such an angle x to the range [0,360) is to compute ((x mod 360) + 360) mod 360). 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 [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<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

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 , followed by ')'. White space 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: hsla(30, 100%, 50%, 0.1) } / very transparent solid orange */

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.

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 value. This simplifies the definition of those properties in CSS3.

currentColor

The value of the 'color' property. The computed value of the 'currentColor' keyword is the computed 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 System Colors

Deprecated. In addition to being able to assign pre-defined color values to text, backgrounds, etc., CSS2 allowed authors to specify colors in a manner that integrated them into the user's graphic environment.

For systems that do not have a corresponding value, the specified value should be mapped to the nearest system color value, 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 values 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.

DEPRECATED 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.

The CSS2 System Color values have been deprecated in favor of the CSS3 UI 'appearance' property for specifying the complete look of user interface related elements.

4.5.2. '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.

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

• Guideline 2. Don't rely on color alone.

5. Sample style sheet for (X)HTML

This appendix is informative, not normative. This style sheet could be used by an implementation as part of its default styling of HTML4, XHTML1, XHTML1.1, XHTML Basic, and other XHTML Family documents.

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

body[text] { color: attr(text,color}; }

body[bgcolor],table[bgcolor],tr[bgcolor],td[bgcolor],th[bgcolor] { background-color: attr(bgcolor,color); }

font[color] { color: attr(color,color); }

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

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:

7. Test Suite

This specification shall refer to 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 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, David Baron, Bert Bos, Joe Clark, fantasai, Ian Hickson, Susan Lesch, Christoph Päper, Jonathan Stanley, Andrew Thompson, Russ Weakley, Etan Wexler, David Woolley, Boris Zbarsky, Steve Zilles, and all the rest of the www-stylecommunity. 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

[ICC32]

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

[ABC]

Leo Geurts; Lambert Meertens; Steven Pemberton. The ABC Programmer's Handbook. ISBN: 0-13-000027-2. URL: http://www.cwi.nl/~steven/abc/

[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

[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

[CSSUI]

Tantek �elik; Peter Linss; Sho Kuwamoto. User Interface for CSS3. 16 February 2000. W3C Working Draft. (Work in progress.) URL: http://www.w3.org/TR/2000/WD-css3-userint-20000216

[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

[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

[OEB101]

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/oeb101-xhtml.htm

[SVG10]

Various. Scalable Vector Graphics (SVG) 1.0 Specification.Sep 2001. W3C Recommendation. URL: http://www.w3.org/TR/2001/REC-SVG-20010904

[WCAG]

Wendy Chisholm; Gregg Vanderheiden; Ian Jacobs. Web Content Accessibility Guidelines 1.0. 5-May-1999. W3C Recommendation. URL: http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505

[X11COLORS]

Robert B. Hess. Colors By Name. MSDN Online Web Workshop. 02 November 1996. URL: http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwebgen/html/X11_names.asp

Index

• color, #
  • names of, #
• color-profile, #
• * definition of, [**#**](#valuea-def-color)
• 'name', #
• opacity, #
• rendering-intent, #
• 'rendering-intent', #
• 'src', #

Property index