Copyright © 2001 W3C® (MIT, INRIA, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply.
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.
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 successor to "Color Profiles for CSS3" (22 June 1999) and is the result of merging with the relevant parts of the following Recommendations and Working Drafts:
This document is a working draft of the CSS & FP working group which is part of the style activity.
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 & FP working group.
It is inappropriate to use W3C Working Drafts as reference material or to cite them as other than "work in progress." A list of current W3C Recommendations and other technical documents can be found at http://www.w3.org/TR.
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 CSS3 module depends on the following other CSS3 modules:
The following CSS3 modules depend on this CSS3 module:
Name: | color |
Value: | <color> | inherit | attr(X,color) |
Initial: | depends on user agent |
Applies to: | all elements |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
This property describes the foreground color of an element's text content. There are different ways to specify red:
EM { color: red } /* predefined color name */ EM { color: rgb(255,0,0) } /* RGB range 0-255 */
For information about gamma issues, please consult the the Gamma Tutorial in the PNG specification ([PNG10]).
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:
"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.
Opacity can be thought of conceptually as a postprocessing operation. Conceptually, after the element is rendered into an RGBA offscreen image, the opacity setting specifies how to blend the offscreen rendering into the current composite rendering.
Name: | opacity |
Value: | <alphavalue> | inherit |
Initial: | 1 |
Applies to: | all elements |
Inherited: | no |
Percentages: | N/A |
Media: | visual |
Name: | color-profile |
Value: | auto | sRGB | <uri> | inherit |
Initial: | auto |
Applies to: | all elements |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
This property permits the specification of a source color profile other than the default.
/* use the specified profile, even if the image contains an embedded profile */ IMG { color-profile: "http://www.colors.corp/images/profiles/mah314.icm" }
Note. SVG defines an '@color-profile' rule which permits the author to set both color-profile, and rendering-intent. The editor expects to include the '@color-profile' rule in a future draft of this document.
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 |
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.
A <color> is either a keyword or a numerical RGB specification.
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.
· | 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 |
BODY {color: black; background: white } H1 { color: maroon } H2 { color: olive }
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) } /* 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:
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.
The table below provides a list of the X11 colors 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 |
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:
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.
The following lists additional values for color-related CSS attributes and their general meaning. Any color property can take one of the following names. Although these are case-insensitive, it is recommended that the mixed capitalization shown below be used, to make the names more legible.
For example, to set the foreground and background colors of a paragraph to the same foreground and background colors of the user's window, write the following:
P { color: WindowText; background-color: Window }
:focus {outline: 1px solid flavor} /* puts an outline around the currently focused element that color coordinates with the browser accent color if any */
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.
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:
This appendix is informative, not normative.
BODY { color: black; background: white; color-profile: sRGB; rendering-intent: auto } :link { color: blue; } :visited { color: purple; } IMG,OBJECT { color-profile: auto; rendering-intent: auto }
Thanks to Brad Pettit for both writing up color-profiles, and for implementing it. 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.