Abstract

CSS (Cascading Style Sheets) is a language for describing the rendering of HTML and XML documents on screen, on paper, in speech, etc. It uses color related properties and respective values to color the text, backgrounds, borders, and other parts of elements in a document. This specification describes color values and properties for foreground color and group opacity. These include properties and values from CSS level 2 and new values.

Status of This Document

This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.

Publication as a Working Draft does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.

The (archived) public mailing list www-style@w3.org (see instructions) is preferred for discussion of this specification. When sending e-mail, please put the text “css3-color” in the subject, preferably like this: “[css3-color] …summary of comment…”

This document was produced by the CSS Working Group (part of the Style Activity).

This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.

This specification is a Last Call Working Draft, although it was previously a Candidate Recommendation. It has been returned to Last Call Working Draft because this draft removes features that were not implemented sufficiently to advance to Proposed Recommendation, and had not been previously listed as at risk, as required by the W3C Process. This specification may advance directly to Proposed Recommendation following the last call, depending on comments and implementation reports. All persons are encouraged to review this document and send comments to the www-style mailing list as described above. The deadline for comments is 1 September 2008.

For this specification to enter the Proposed Recommendation stage, the following conditions shall be met:

1. There must be at least two interoperable implementations for every feature in the Color Module. Each feature may be implemented by a different set of products, there is no requirement that all features be implemented by a single product. For the purposes of this criterion, we define the following terms:

   feature

   A section or subsection in the Color Module.

   independent

   Each implementation must be developed by a different party and cannot share, reuse, or derive from code used by another qualifying implementation. Sections of code that have no bearing on the implementation of this specification are exempt from this requirement.

   interoperable

   Passing the respective test case(s) in the official official CSS Color 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 publicly available for the purposes of peer review.

   implementation

   A user agent that:

   1. implements the specification.
   2. is available to the general public. The implementation may be a shipping product or other publicly available version (i.e. beta version, preview release, or "nightly build"). Non-shipping product releases must have implemented the feature(s) for a period of at least one month in order to demonstrate stability.
   3. is not experimental (i.e. a version specifically designed to pass the test suite and not intended for normal usage going forward.)

2. A minimum of six months must have elapsed since entering Candidate Recommendation. (This happened on 14 November 2003.) This is to ensure that enough time is given for any remaining major errors to be caught.

The CSS Working Group believes this document 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 are met, it will progress to become Proposed Recommendation.

The comments received during the Last Call period (for the 14 February 2003 draft) and how they were addressed can be found in the disposition of comments.

The comments received during the Candidate Recommendation period (for the 14 May 2003 draft) and how they were addressed in this draft can be found in the disposition of comments.

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
• 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.6 Notes on using colors
• 5. Simple alpha compositing
• 6. Sample style sheet for (X)HTML
• 7. Profiles
• 8. Test Suite
• 9. Call for Implementations of dropped features
• 10. Acknowledgments
• 11. References
  • 11.1 Normative
  • 11.2 Informative
• Index
• Property index

1. Introduction

CSS beyond level 2 is a set of modules, divided up to allow the specifications to develop incrementally, along with their implementations. This specification is one of those modules.

This module describes CSS properties which allow authors to specify the foreground color and opacity of an element. This module also describes in detail the CSS <color> value type.

It not only defines the color related properties and values that already exist in CSS1 and CSS2, but also defines new properties and values.

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]
• User Interface for CSS3 (16 February 2000) [CSS3UI]

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

There are different ways to specify lime green:

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

<color>

Color units are defined in a following section.

3.1.1 Gamma correction

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

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 [ICC42] (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'=R^gamma, G'=G^gamma, B'=B^gamma, 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 descendants) is rendered into an RGBA offscreen image, the opacity setting specifies how to blend the offscreen rendering into the current composite rendering. See simple alpha compositing for details.

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

Since an element with opacity less than 1 is composited from a single offscreen image, content outside of it cannot be layered in z-order between pieces of content inside of it. For the same reason, implementations must create a new stacking context for any element with opacity less than 1. If an element with opacity less than 1 is not positioned, implementations must paint the layer it creates, within its parent stacking context, at the same stacking order that would be used if it were a positioned element with ‘z-index: 0’ and ‘opacity: 1’. If an element with opacity less than 1 is positioned, the ‘z-index’ property applies as described in [CSS21], except that ‘auto’ is treated as ‘0’ since a new stacking context is always created. See section 9.9 and Appendix E of [CSS21] for more information on stacking contexts. The rules in this paragraph do not apply to SVG elements, since SVG has its own rendering model [SVG11].

4. Color units

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

4.1 HTML4 color keywords

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

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:

em { color: #f00 }              /* #rgb */
em { color: #ff0000 }           /* #rrggbb */
em { color: rgb(255,0,0) }
em { color: rgb(100%, 0%, 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 or mapped into the gamut when the gamut is known: the red, green, and blue values must be changed to fall within the range supported by the device. User agents may perform higher quality mapping of colors from one gamut to another. This specification does not define precise clipping behavior. For a typical CRT monitor, whose device gamut is the same as sRGB, the four rules below are equivalent:

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

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. See simple alpha compositing for details. These examples all specify the same color:

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%, rgba(255,255,255,0.8) = rgba(100%,100%,100%,0.8). White space characters are allowed around the numerical values.

Implementations must clip the red, green, and blue components of RGBA color values to the device gamut according to the rules for the RGB color value composed of those components.

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

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 <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 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 <number> 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:

* { color: hsl(0, 100%, 50%) }   /* red */
* { color: hsl(120, 100%, 50%) } /* green */ 
* { color: hsl(120, 100%, 25%) } /* dark green */ 
* { color: hsl(120, 100%, 75%) } /* light green */ 
* { color: hsl(120, 75%, 75%) }  /* 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)

If saturation is less than 0%, implementations must clip it to 0%. If the resulting value is outside the device gamut, implementations must clip it to the device gamut. This clipping should preserve the hue when possible, but is otherwise undefined. (In other words, the clipping is different from applying the rules for clipping of RGB colors after applying the algorithm below for converting HSL to RGB.)

The algorithm to translate HSL to RGB is simple (here expres