Mark the following abbreviations as such.
Expand the following abbreviations.
Copyright
© 2003 W3C® (MIT, ERCIMERCIM, 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
and so forth. To color elements
in a document, it uses color-related properties and
respective values. This
draft describes the properties and values that are proposed for
CSS
level 3. It includes and extends them from properties and values of
CSS
level 2.
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 Working Group
which is part of
the style activity
Style Activity (see summary). This is a W3C Last Call Working Draft Last
Call Working Draft. This is the second last call
Last Call for this document,
because, in response to comments on the previous draft, sufficient changes
were made (see Changes below) as to justify reissuing
a last call Last Call
before advancing the document to candidate
recommendation Candidate Recommendation. The
working group Working Group
requests that anyone who made comments on the previous
last call Last Call
draft who believes their comments to still apply to please reiterate
their comments on this draft. Last call
Call means that the working group 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 Working Group plans to
submit it this specification
for consideration as a W3C
Candidate Recommendation W3C Candidate Recommendation. Comments can be sent until the 28th of
February, 2003.
Comments on, and discussions of this draft should take place on the (archived) public mailing list www-style@w3.org (see instructions). W3C Members can also send comments directly to the CSS working group.
Patent disclosures relevant to CSS may be found on the Working Group's
public patent disclosure page.
To find the latest version of this working draft, please follow the
"Latest version" link above, or visit the list of W3C
Technical Reports.
To assist readers who are familiar with the previous draft of this document, this section outlines the major (non-editorial) changes that were made, and the reasons for making them.
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.
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(<identifier>,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 SVG color keywords is the equivalent six digit hex value. I'd like that the computed value be of the form rgba(<number>,<number>,<number>,<alphavalue>). I suppose that computing to a hex value is a concession made to implementations of the downlevel profiles with no alpha channel support. Even so, the form rgba(<number>,<number>,<number>) is a better choice than the hex hash as the former exposes the components individually. The computed value of the keyword 'transparent' is rgba(0,0,0,0). If the color is specified using the attr() syntax then the computed value is the result of evaluating the attribute's value as a <color>. For all other values, the computed value is the specified value. <percentage> terms should compute to <number> terms. <alphavalue> terms are clamped to [0,1]. |
This property describes the foreground color of an element's text content. In addition it is used to provide a potential indirect value (currentColor) for any other properties that accept color values. If the 'currentColor' keyword is set on the 'color' property itself, it is treated as 'color:inherit' at parse time.
There are different ways to specify lime green:
em { color: lime } /* predefined color name */ em { color: rgb(0,255,0) } /* RGB range 0-255 */
To refer to a 'text' attribute on a body element to set the color:
body { color: attr(text,color); } /* use 'text' attribute */
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:
"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. What color attributes are meant? Color properties? I'm really not sure what the intent is.
Opacity can be thought of conceptually as a postprocessing operation. Conceptually, after the element is rendered into an RGBA offscreen image, the opacity setting specifies how to blend the offscreen rendering into the current composite rendering.
Name: | opacity |
Value: | <alphavalue> | inherit |
Initial: | 1 |
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]. |
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.
/* use the specified profile, even if the image contains an embedded profile */ IMG { color-profile: url("http://example.com/profiles/eg.icm") }
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 [ICC32].
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>:
Values: | <name> |
Initial: | undefined |
Media: | visual |
Values: | sRGB | <local-profile> | <uri> | (<local-profile> <uri>) |
Initial: | sRGB |
Media: | visual |
"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.)
Values: | auto | perceptual | relative-colorimetric | saturation | absolute-colorimetric |
Initial: | auto |
Media: | visual |
See the description of the 'rendering-intent' property.
A <color> is either a keyword or a numerical specification.
The list of HTML4 keyword color names is: are 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 '#' number sign
('#', U+0023) immediately
followed by either three or six hexadecimal characters. The three-digit RGB
notation (#rgb) is converted into six-digit form (#rrggbb) by replicating
digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This
ensures that white (#ffffff) can be specified with the short notation (#fff)
and removes any dependencies on the color depth of the display.
In the six-digit form, the first two digits represent
the red component, the middle two digits represent the green component and the
last two digits represent the blue component. For all components, the first
digit is most significant.
The format of an RGB value in the functional notation is 'rgb(' followed by a comma-separated list of three numerical values (either three integer values or three percentage values) followed by ')'. The integer value 255 corresponds to 100%, and to F or FF in the hexadecimal notation: rgb(255,255,255) = rgb(100%,100%,100%) = #FFF. Whitespace characters are allowed around the numerical values.
All RGB colors are specified in the sRGB color space (see [SRGB]). User agents may vary in the fidelity with which they represent these colors, but using sRGB provides an unambiguous and objectively measurable definition of what the color should be, which can be related to international standards (see [COLORIMETRY]).
Values outside the device gamut should be clipped in the actual value: the red, green, and
blue values must should
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%)computed as rgb(280.5,0,0) and then clipped to rgb(255,0,0) */
Other devices, such as printers, have different gamuts to 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 clipped.
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:
em { color: rgb(255,0,0) } /*integer range 0 - 255red specified with integers */ 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%red specified with percentages */ 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:
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.
If a user agent does not support RGBA values, it must treat them like
unrecognized values per the CSS forward compatibility parsing rules. The user agent must not ignore
the opacity component while using the other value components.
CSS1 introduced the 'transparent' value for the background-color property.
CSS2 allowed border-color to also accept the 'transparent' value. The Open
eBook(tm)™ Publication Structure 1.0.1 [OEB101] extended the 'color' property to also accept
the 'transparent' keyword. CSS3 extends the
color value <color>
value type to include the
'transparent' keyword to allow its use with all properties that accept a
<color> value. This simplifies the definition of those properties in
CSS3.
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 that it is symmetrical with respectto lightness and darkness (which is not the case with HSV, for example), and it is trivial to convert HSL to RGB.
HSL colors are encoding as a triple (hue, saturation, lightness). Hue is
represented as an angle of the color circle (i.e. the rainbow represented in
a circle). This angle is so typically measured in degrees that the unit is
implicit in CSS; syntactically, only a <number> is given. By definition
red=0=360, and the other colors are spread around the circle, so green=120,
gblue=240, etc. Saturation and lightness are represented as percentages. The saturation value 100%
is full saturation, and 0% saturation is a shade of grey
gray. The value 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%) } /*lightdark green */ * { color: hsl(120, 100%, 75%) } /*darklight 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
the novice style sheet author can
guess at the colors you want
that she wants, and then tweak. It is also easier to create
sets of matching colors (by keeping the hue the same and varying the
lightness/darkness, and saturation)
The algorithm to translate HSL to RGB is simple (here expressed in ABC ABC [ABC] which was used to generate
the tables.) In these algorithms, all three values
components (H, S and Lhue, saturation and lightness) 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
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'.
That second sentence is mere repetition of earlier prose.
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 |
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:
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 a <number> representing the hue in degrees, saturation and lightness as a percentage
a <percentage> representing saturation,
a <percentage> representing lightness,, and
an <alphavalue>, followed by ')'.
Whitespace characters are allowed around the numerical values.
These examples specify new effects that are now possible with the new hsla() notation:
p { color: hsla(240, 100%, 50%, 0.5) } /* semi-transparent solid blue */ p { color: hsla(30, 100%, 50%, 0.1) } /* very transparent solid orange */
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.
Named | Numeric | Color Name | Hex RGB | Decimal |
AliceBlue | #F0F8FF | 240,248,255 | ||
AntiqueWhite | #FAEBD7 | 250,235,215 | ||
Aqua | #00FFFF | 0,255,255 | ||
Aquamarine | #7FFFD4 | 127,255,212 | ||
Azure | #F0FFFF | 240,255,255 | ||
Beige | #F5F5DC | 245,245,220 | ||
Bisque | #FFE4C4 | 255,228,196 | ||
Black | #000000 | 0,0,0 | ||
BlanchedAlmond | #FFEBCD | 255,235,205 | ||
Blue | #0000FF | 0,0,255 | ||
BlueViolet | #8A2BE2 | 138,43,226 | ||
Brown | #A52A2A | 165,42,42 | ||
BurlyWood | #DEB887 | 222,184,135 | ||
CadetBlue | #5F9EA0 | 95,158,160 | ||
Chartreuse | #7FFF00 | 127,255,0 | ||
Chocolate | #D2691E | 210,105,30 | ||
Coral | #FF7F50 | 255,127,80 | ||
CornflowerBlue | #6495ED | 100,149,237 | ||
Cornsilk | #FFF8DC | 255,248,220 | ||
Crimson | #DC143C | 220,20,60 | ||
Cyan | #00FFFF | 0,255,255 | ||
DarkBlue | #00008B | 0,0,139 | ||
DarkCyan | #008B8B | 0,139,139 | ||
DarkGoldenrod | #B8860B | 184,134,11 | ||
DarkGray | #A9A9A9 | 169,169,169 | ||
DarkGreen | #006400 | 0,100,0 | ||
DarkGrey | #A9A9A9 | 169,169,169 | ||
DarkKhaki | #BDB76B | 189,183,107 | ||
DarkMagenta | #8B008B | 139,0,139 | ||
DarkOliveGreen | #556B2F | 85,107,47 | ||
DarkOrange | #FF8C00 | 255,140,0 | ||
DarkOrchid | #9932CC | 153,50,204 | ||
DarkRed | #8B0000 | 139,0,0 | ||
DarkSalmon | #E9967A | 233,150,122 | ||
DarkSeaGreen | #8FBC8F | 143,188,143 | ||
DarkSlateBlue | #483D8B | 72,61,139 | ||
DarkSlateGray | #2F4F4F | 47,79,79 | ||
DarkSlateGrey | #2F4F4F | 47,79,79 | ||
DarkTurquoise | #00CED1 | 0,206,209 | ||
DarkViolet | #9400D3 | 148,0,211 | ||
DeepPink | #FF1493 | 255,20,147 | ||
DeepSkyBlue | #00BFFF | 0,191,255 | ||
DimGray | #696969 | 105,105,105 | ||
DimGrey | #696969 | 105,105,105 | ||
DodgerBlue | #1E90FF | 30,144,255 | ||
FireBrick | #B22222 | 178,34,34 | ||
FloralWhite | #FFFAF0 | 255,250,240 | ||
ForestGreen | #228B22 | 34,139,34 | ||
Fuchsia | #FF00FF | 255,0,255 | ||
Gainsboro | #DCDCDC | 220,220,220 | ||
GhostWhite | #F8F8FF | 248,248,255 | ||
Gold | #FFD700 | 255,215,0 | ||
Goldenrod | #DAA520 | 218,165,32 | ||
Gray | #808080 | 128,128,128 | ||
Green | #008000 | 0,128,0 | ||
GreenYellow | #ADFF2F | 173,255,47 | ||
Grey | #808080 | 128,128,128 | ||
Honeydew | #F0FFF0 | 240,255,240 | ||
HotPink | #FF69B4 | 255,105,180 | ||
IndianRed | #CD5C5C | 205,92,92 | ||
Indigo | #4B0082 | 75,0,130 | ||
Ivory | #FFFFF0 | 255,255,240 | ||
Khaki | #F0E68C | 240,230,140 | ||
Lavender | #E6E6FA | 230,230,250 | ||
LavenderBlush | #FFF0F5 | 255,240,245 | ||
LawnGreen | #7CFC00 | 124,252,0 | ||
LemonChiffon | #FFFACD | 255,250,205 | ||
LightBlue | #ADD8E6 | 173,216,230 | ||
LightCoral | #F08080 | 240,128,128 | ||
LightCyan | #E0FFFF | 224,255,255 | ||
LightGoldenrodYellow | #FAFAD2 | 250,250,210 | ||
LightGray | #D3D3D3 | 211,211,211 | ||
LightGreen | #90EE90 | 144,238,144 | ||
LightGrey | #D3D3D3 | 211,211,211 | ||
LightPink | #FFB6C1 | 255,182,193 | ||
LightSalmon | #FFA07A | 255,160,122 | ||
LightSeaGreen | #20B2AA | 32,178,170 | ||
LightSkyBlue | #87CEFA | 135,206,250 | ||
LightSlateGray | #778899 | 119,136,153 | ||
LightSlateGrey | #778899 | 119,136,153 | ||
LightSteelBlue | #B0C4DE | 176,196,222 | ||
LightYellow | #FFFFE0 | 255,255,224 | ||
Lime | #00FF00 | 0,255,0 | ||
LimeGreen | #32CD32 | 50,205,50 | ||
Linen | #FAF0E6 | 250,240,230 | ||
Magenta | #FF00FF | 255,0,255 | ||
Maroon | #800000 | 128,0,0 | ||
MediumAquamarine | #66CDAA | 102,205,170 | ||
MediumBlue | #0000CD | 0,0,205 | ||
MediumOrchid | #BA55D3 | 186,85,211 | ||
MediumPurple | #9370DB | 147,112,219 | ||
MediumSeaGreen | #3CB371 | 60,179,113 | ||
MediumSlateBlue | #7B68EE | 123,104,238 | ||
MediumSpringGreen | #00FA9A | 0,250,154 | ||
MediumTurquoise | #48D1CC | 72,209,204 | ||
MediumVioletRed | #C71585 | 199,21,133 | ||
MidnightBlue | #191970 | 25,25,112 | ||
MintCream | #F5FFFA | 245,255,250 | ||
MistyRose | #FFE4E1 | 255,228,225 | ||
Moccasin | #FFE4B5 | 255,228,181 | ||
NavajoWhite | #FFDEAD | 255,222,173 | ||
Navy | #000080 | 0,0,128 | ||
OldLace | #FDF5E6 | 253,245,230 | ||
Olive | #808000 | 128,128,0 | ||
OliveDrab | #6B8E23 | 107,142,35 | ||
Orange | #FFA500 | 255,165,0 | ||
OrangeRed | #FF4500 | 255,69,0 | ||
Orchid | #DA70D6 | 218,112,214 | ||
PaleGoldenrod | #EEE8AA | 238,232,170 | ||
PaleGreen | #98FB98 | 152,251,152 | ||
PaleTurquoise | #AFEEEE | 175,238,238 | ||
PaleVioletRed | #DB7093 | 219,112,147 | ||
PapayaWhip | #FFEFD5 | 255,239,213 | ||
PeachPuff | #FFDAB9 | 255,218,185 | ||
Peru | #CD853F | 205,133,63 | ||
Pink | #FFC0CB | 255,192,203 | ||
Plum | #DDA0DD | 221,160,221 | ||
PowderBlue | #B0E0E6 | 176,224,230 | ||
Purple | #800080 | 128,0,128 | ||
Red | #FF0000 | 255,0,0 | ||
RosyBrown | #BC8F8F | 188,143,143 | ||
RoyalBlue | #4169E1 | 65,105,225 | ||
SaddleBrown | #8B4513 | 139,69,19 | ||
Salmon | #FA8072 | 250,128,114 | ||
SandyBrown | #F4A460 | 244,164,96 | ||
SeaGreen | #2E8B57 | 46,139,87 | ||
Seashell | #FFF5EE | 255,245,238 | ||
Sienna | #A0522D | 160,82,45 | ||
Silver | #C0C0C0 | 192,192,192 | ||
SkyBlue | #87CEEB | 135,206,235 | ||
SlateBlue | #6A5ACD | 106,90,205 | ||
SlateGray | #708090 | 112,128,144 | ||
SlateGrey | #708090 | 112,128,144 | ||
Snow | #FFFAFA | 255,250,250 | ||
SpringGreen | #00FF7F | 0,255,127 | ||
SteelBlue | #4682B4 | 70,130,180 | ||
Tan | #D2B48C | 210,180,140 | ||
Teal | #008080 | 0,128,128 | ||
Thistle | #D8BFD8 | 216,191,216 | ||
Tomato | #FF6347 | 255,99,71 | ||
Turquoise | #40E0D0 | 64,224,208 | ||
Violet | #EE82EE | 238,130,238 | ||
Wheat | #F5DEB3 | 245,222,179 | ||
White | #FFFFFF | 255,255,255 | ||
WhiteSmoke | #F5F5F5 | 245,245,245 | ||
Yellow | #FFFF00 | 255,255,0 | ||
YellowGreen | #9ACD32 | 154,205,50 |
CSS1 and CSS2 defined the initial value of the 'border-color'
property to be the
value of the 'color' property
but did not define a corresponding keyword.
This omission was recognized by SVG, and thus SVG1.0 introduced
the 'currentColor' value for the 'fill', 'stroke', 'stop-color',
'flood-color', 'lighting-color' properties. CSS3 extends the color value to
include the 'currentColor' keyword to allow its use with all properties that
accept a <color> value. This simplifies the definition of those
properties in CSS3.
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. Note that some profiles of CSS may not support System Colors at all.
The following lists additional values for color-related CSS attributes and their general meaning. Any color property can take one of the following names. Although these are case-insensitive, it is recommended that the mixed capitalization shown below be used, to make the names more legible.
For example, to set the foreground and background colors of a paragraph to the same foreground and background colors of the user's window, write the following:
p { color: WindowText; background-color: Window }
Note. The computed value of a System Color keyword value is the keyword itself. This is necessary because the result may not be a solid, constant color; it may, for instance, be a gradient or a chronological sequence of colors. In addition, in future CSS specifications, the color property may accept additional System Color values.
Most desktop user agents allow the user to choose the default colors for hyperlinks to be rendered in their various states. The following system colors permit an author to explicitly style their hyperlinks in accordance with those preferences. The color names, though case-insensitive, are presented here in mixed case (camel-case in particular) in order to be consistent with the CSS2 system colors.
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 }
:focus {outline: 1px solid flavor} /* puts an outline around the currently focused element that color coordinates with the browser accent color if any */
:focus {border: 1px solid flavor} /* puts an border around the currently focused element that color coordinates with the browser accent color, if any */
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.
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; }
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 |
Extra constraints | none. |
CSS3 Color profile | |
---|---|
Specification | CSS level 1 |
Accepts | 'color' property HTML4 color keywords RGB color values |
Excludes |
'opacity' property |
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 |
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 SVG color keywords 'currentColor' color value |
Excludes |
'color-profile' property |
Extra constraints | 'currentColor' color value not valid for 'color' property. |
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].
Thanks to Brad Pettit for both both for writing up color-profiles, and for
implementing it. Thanks to Steven Pemberton for his write-up on HSL colors.
Thanks to for feedback from Marc Attinasi, David Baron, Bert Bos, Ian Hickson,
Steve Zilles. And thanks to Chris Lilley for being the resident CSS Color
expert.
Property | Values | Initial | Applies to | Inh. | Percentages | Media |
---|---|---|---|---|---|---|
color | <color> | inherit | attr(<identifier>,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> | 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 |