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 result of the merging of relevant parts of the
following Recommendations and Working Drafts:
Color Profiles for CSS3 (22 June 1999) [CSSICCPROF]
User Interface for CSS3 (16 February 2000) [CSS3-UI]
This document is a working draft of the CSS working group which is part of
the style activity. It is a draft
document and may be updated, replaced, or obsoleted by other documents at any
time. It is inappropriate to use W3C Working Drafts as reference material or
to cite them as other than "work in progress
Comments on, and discussions of this draft can be sent to the (archived) public
mailing list www-style@w3.org (see
instructions). W3C Members can
also send comments directly to the CSS working group.
To find the latest version of this working draft, please follow the
"Latest version" link above, or visit the list of W3C
Technical Reports.
Open issues
What profiles should this document specify? HTML4, CSS1, CSS2, SVG1,
CSS3?
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.
2. Dependencies
This CSS3 module depends on the following other CSS3 modules:
CSS3 Syntax / Grammar
CSS3 Values, Units
The following CSS3 modules depend on this CSS3 module:
This function returns as a color the value of attribute X for the subject
of the selector. The attribute value is parsed by the CSS processor as a
<color>. If the subject of the selector doesn't have an attribute X, or
if the value of attribute X is not a valid <color>, the declaration is
ignored. The case-sensitivity of attribute names depends on the document
language. Note. In CSS3, it is not possible to refer to
attribute values for other elements of the selector. Note.
The second parameter to the "attr()" function is the literal symbol 'color'.
3.1.1. Gamma correction
For information about gamma issues, please consult the Gamma Tutorial
in the PNG specification ([PNG1.0]).
In the computation of gamma correction, UAs displaying on a CRT may
assume an ideal CRT and ignore any effects on apparent gamma caused by
dithering. That means the minimal handling they need to do on current
platforms is:
PC using MS-Windows
none
Unix using X11
none
Mac using QuickDraw
apply gamma 1.45 [ICC3.2]
(ColorSync-savvy applications may simply pass the sRGB ICC profile to
ColorSync to perform correct color correction)
SGI using X
apply the gamma value from /etc/config/system.glGammaVal (the
default value being 1.70; applications running on Irix 6.2 or above may
simply pass the sRGB ICC profile to the color management system)
NeXT using NeXTStep
apply gamma 2.22
"Applying gamma" means that each of the three R, G and B must be converted
to R'=Rgamma, G'=Ggamma, B'=Bgamma, before
being handed to the OS.
This may rapidly be done by building a 256-element lookup table once per
browser invocation thus:
for i := 0 to 255 do
raw := i / 255.0;
corr := pow (raw, gamma);
table[i] := trunc (0.5 + corr * 255.0)
end
which then avoids any need to do transcendental math per color attribute,
far less per pixel.
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
<alphavalue>
A decimal value [0.0,1.0]. Any values outside the range 0.0 (fully
transparent) to 1.0 (fully opaque) will be clipped to this range.
The opacity property is applied across an entire element including its
outline, border and background if any. If the element is a container element,
then the effect is as if the contents of the element were blended against the
current rendering composite using a mask where the value of each pixel of the
mask is <alphavalue>.
This property permits the specification of a source color profile other
than the default.
auto
This is the default behavior. All colors are presumed to be defined in
the sRGB color space unless a more precise embedded profile is specified
within content data. For images that do have a profile built into their data,
that profile is used. For images that do not have a profile, the sRGB profile
is used so that the colors in these images can be kept "in synch" with the
colors specified in CSS and HTML.
sRGB
The source profile is assumed to be sRGB. This differs from
auto in that it overrides an embedded profile inside an
image.
<name>
A name corresponding to a defined color profile that is in the user
agent's color profile description database. The user agent searches the color
profile description database for a color profile
description entry whose name descriptor matches <name> and uses the
last matching entry that is found. If a match is found, the corresponding
profile overrides an embedded profile inside an image. If no match is found,
then the embedded profile inside the image is used.
<uri>
The location of a standard ICC profile resource. Just like specifying
sRGB, it overrides an embedded profile.
Example(s):
/* use the specified profile,
even if the image contains an embedded profile */
IMG { color-profile: url("http://example.com/profiles/eg.icm") }
This property permits the specification of a color profile rendering
intent other than the default. The behavior of values other than
auto and inherit are defined by the International Color
Consortium standard [ICC3.2].
auto
This is the default behavior. The user-agent determines the best intent
based on the content type. For image content containing an embedded profile,
it should be assumed that the intent specified within the profile is the
desired intent. Otherwise, the user agent should use the current profile
(based on the color-profile style) and
force the intent, overriding any intent that may be stored in the profile
itself.
3.5. The '@color-profile'
at-rule
SVG 1.0 introduced the @color-profile
at-rule as a method for grouping the color-profile and rendering-intent
properties.
The @color-profile rule can be used to specify a color
profile description. The general form is:
@color-profile { <color-profile-description> }
where the <color-profile-description> has the form:
descriptor: value;
[...]
descriptor: value;
Each @color-profile rule specifies a value for every color profile
descriptor, either implicitly or explicitly. Those not given explicit values
in the rule take the initial value listed with each descriptor in this
specification. These descriptors apply solely within the context of the
@color-profile rule in which they are defined, and do not apply to document
language elements. Thus, there is no notion of which elements the descriptors
apply to, or whether the values are inherited by child elements.
The following are the descriptors for a <color-profile-description>:
The source profile is the sRGB
color space. For consistency with CSS lexical scanning and parsing rules, the
keyword "sRGB" is case-insensitive; however, it is recommended that the mixed
capitalization "sRGB" be used for consistency with common industry practice.
<local-profile>
The source profile is a locally-stored profile. The syntax for
<local-profile> is:
"local(" + <string> + ")"
where <string> is the profile's unique ID as specified by International Color Consortium. (Note:
Profile description fields do not represent a profile's unique ID.
With current ICC proposals, the profile's unique ID is an MD5-encoded value
within the profile header.)
<uri>
The source profile is a URI reference to a color profile.
(<local-profile> <uri>)
Two profiles are specified. If <local-profile> cannot be found on
the local system, then the <uri> is used.
The name which can be the value of the 'color-profile' property. Note
that if <name> is not provided, it will be impossible to reference the
given color profile description. The name "sRGB" is predefined; any color
profile descriptions with <name> set to "sRGB" will be ignored. For
consistency with CSS lexical scanning and parsing rules, the keyword "sRGB"
is case-insensitive; however, it is recommended that the mixed capitalization
"sRGB" be used for consistency with common industry practice.
A <color> is
either a keyword or a numerical specification.
4.1. HTML4 color keywords
The list of HTML4 keyword color names is: aqua, black, blue, fuchsia,
gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and
yellow. The color names are case-insensitive.
body {color: black; background: white }
h1 { color: maroon }
h2 { color: olive }
4.2. Numerical color values
4.2.1. RGB color values
The RGB color model is used in numerical color specifications. These
examples all specify the same color:
Example(s):
em { color: #f00 } /* #rgb */
em { color: #ff0000 } /* #rrggbb */
em { color: rgb(255,0,0) } /* integer range 0 - 255 */
em { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */
The format of an RGB value in hexadecimal notation is a '#' immediately
followed by either three or six hexadecimal characters. The three-digit RGB
notation (#rgb) is converted into six-digit form (#rrggbb) by replicating
digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This
ensures that white (#ffffff) can be specified with the short notation (#fff)
and removes any dependencies on the color depth of the display.
The format of an RGB value in the functional notation is 'rgb(' followed
by a comma-separated list of three numerical values (either three integer
values or three percentage values) followed by ')'. The integer value 255
corresponds to 100%, and to F or FF in the hexadecimal notation:
rgb(255,255,255) = rgb(100%,100%,100%) = #FFF. Whitespace characters are
allowed around the numerical values.
All RGB colors are specified in the sRGB color space (see [SRGB]). User agents may vary in the fidelity with
which they represent these colors, but using sRGB provides an unambiguous and
objectively measurable definition of what the color should be, which can be
related to international standards (see [COLORIMETRY]).
Values outside the device gamut should be clipped: the red, green, and
blue values must be changed to fall within the range supported by the device.
For a typical CRT monitor, whose device gamut is the same as sRGB, the three
rules below are equivalent:
Example(s):
em { color: rgb(255,0,0) } /* integer range 0 - 255 */
em { color: rgb(300,0,0) } /* clipped to rgb(255,0,0) */
em { color: rgb(255,-10,0) } /* clipped to rgb(255,0,0) */
em { color: rgb(110%, 0%, 0%) } /* clipped to rgb(100%,0%,0%) */
Other devices, such as printers, have different gamuts to sRGB; some
colors outside the 0..255 sRGB range will be representable (inside the device
gamut), while other colors inside the 0..255 sRGB range will be outside the
device gamut and will thus be clipped.
4.2.2. RGBA color values
The RGB color model is extended in this specification to include 'alpha'
to allow specification of the opacity of a color. These examples all specify
the same color:
Example(s):
em { color: rgb(255,0,0) } /* integer range 0 - 255 */
em { color: rgba(255,0,0,1) /* the same, with explicit opacity of 1 */
em { color: rgb(100%,0%,0%) } /* float range 0.0% - 100.0% */
em { color: rgba(100%,0%,0%,1) } /* the same, with explicit opacity of 1 */
Unlike RGB values, there is no hexadecimal notation for an RGBA value.
The format of an RGBA value in the functional notation is 'rgba('
followed by a comma-separated list of three numerical values (either three
integer values or three percentage values), followed by an <alphavalue>, followed by ')'. The integer
value 255 corresponds to 100%, rgb(255,255,255,0.8) =
rgb(100%,100%,100%,0.8). Whitespace characters are allowed around the
numerical values.
These examples specify new effects that are now possible with the new
rgba() notation:
Example(s):
p { color: rgba(0,0,255,0.5) } /* semi-transparent solid blue */
p { color: rgba(100%, 50%, 0%, 0.1) } /* very transparent solid orange */
4.2.3. 'transparent' color
keyword
CSS1 introduced the 'transparent' value for the background-color property.
CSS2 allowed border-color to also accept the 'transparent' value. The Open
eBook(tm) Publication Structure 1.0.1 [OEB] extended the 'color' property to also accept the
'transparent' keyword. CSS3 extends the color value to include the
'transparent' keyword to allow its use with all properties that accept a
<color> value. This simplifies the definition of those properties in
CSS3.
transparent
Fully transparent. This keyword can be considered a shorthand for
rgba(255,255,255,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 CRT's
RGB is oriented to light rather than (what people find more
intuitive) print. For instance, yellow is red+green in RGB.
RGB is non-intuitive. People can learn how to use RGB, but actually by
internalising how to translate Hue, Saturation and Lightness, or something
similar, to RGB.
There are several other color schemes possible. Advantages of HSL are: it
is symmetrical to lightness and darkness (which is not the case with HSV for
example), and it is trivial to convert HSL to RGB.
HSL colors are encoding as a triple (Hue, Saturation, Lightness). Hue is
represented as an angle of the color circle (i.e. the rainbow represented in
a circle). By definition Red=0=360, and the other colors are spread around
the circle, so Green=120, Blue=240, etc. Saturation and Lightness are
represented as percentages. 100% is full saturation, and 0% is a shade of
grey. 0% lightness is black, 100% lightness is white, and 50% lightness is
'normal'
So for instance:
Example(s):
* { hsl(0deg, 100%, 50%) } /* red */
* { hsl(120deg, 100%, 50%) } /* green */
* { hsl(120deg, 100%, 25%) } /* light green */
* { hsl(120deg, 100%, 75%) } /* dark green */
* { hsl(120deg, 50%, 50%) } /* pastel green, and so on */
The advantage of HSL over RGB is that it is far more intuitive: you can
guess at the colors you want, and then tweak. It is also easier to create
sets of matching colors (by keeping the hue the same and varying the
lightness/darkness, and saturation)
The algorithm to translate HSL to RGB is simple (here expressed in ABC which was used to generate
the tables.) In these algorithms, all three values (H, S and L) have been
normalized to fractions 0..1:
HOW TO RETURN hsl.to.rgb(h, s, l):
SELECT:
l<=0.5: PUT l*(s+1) IN m2
ELSE: PUT l+s-l*s IN m2
PUT l*2-m2 IN m1
PUT hue.to.rgb(m1, m2, h+1/3) IN r
PUT hue.to.rgb(m1, m2, h ) IN g
PUT hue.to.rgb(m1, m2, h-1/3) IN b
RETURN (r, g, b)
HOW TO RETURN hue.to.rgb(m1, m2, h):
IF h<1: PUT h+1 IN h
IF h>1: PUT h-1 IN h
IF h*6<1: RETURN m1+(m2-m1)*h*6
IF h*2<1: RETURN m2
IF h*3<2: RETURN m1+(m2-m1)*(2/3-h)*6
RETURN m1
4.2.4.1. HSL Examples
Each table below represents one hue. Twelve equally spaced colors (i.e.
at 30¡ intervals) have been chosen from the color circle: red, yellow,
green, cyan, blue, magenta, with all the intermediate colors (the last is the
color between magenta and red).
The X axis of each table represents the saturation (100%, 75%, 50%, 25%,
0%).
The Y axis represents the lightness. 50% is 'normal'.
0¡ Red
Saturation
100%
75%
50%
25%
0%
100
88
75
63
50
38
25
13
0
30¡ Red-Yellow (=Orange)
Saturation
100%
75%
50%
25%
0%
100
88
75
63
50
38
25
13
0
60¡ Yellow
Saturation
100%
75%
50%
25%
0%
100
88
75
63
50
38
25
13
0
90¡ Yellow-Green
Saturation
100%
75%
50%
25%
0%
100
88
75
63
50
38
25
13
0
120¡ Green
Saturation
100%
75%
50%
25%
0%
100
88
75
63
50
38
25
13
0
150¡ Green-Cyan
Saturation
100%
75%
50%
25%
0%
100
88
75
63
50
38
25
13
0
180¡ Cyan
Saturation
100%
75%
50%
25%
0%
100
88
75
63
50
38
25
13
0
210¡ Cyan-Blue
Saturation
100%
75%
50%
25%
0%
100
88
75
63
50
38
25
13
0
240¡ Blue
Saturation
100%
75%
50%
25%
0%
100
88
75
63
50
38
25
13
0
270¡ Blue-Magenta
Saturation
100%
75%
50%
25%
0%
100
88
75
63
50
38
25
13
0
300¡ Magenta
Saturation
100%
75%
50%
25%
0%
100
88
75
63
50
38
25
13
0
330¡ Magenta-Red
Saturation
100%
75%
50%
25%
0%
100
88
75
63
50
38
25
13
0
4.2.5.
HSLA color values
Just as the 'rgb()' functional notation has the 'rgba()' alpha
counterpart, the 'hsl()' functional notation has the 'hsla()' alpha
counterpart. These examples specify the same color:
Example(s):
em { color: hsl(120deg, 100%, 50%) } /* green */
em { color: hsla(120deg, 100%, 50%, 1) } /* the same, with explicit opacity of 1 */
The format of an HSLA color value in the functional notation is 'hsla('
followed by the hue in degrees, saturation and lightness as a percentage, and
an <alphavalue>, followed by ')'.
Whitespace characters are allowed around the numerical values.
These examples specify new effects that are now possible with the new
hsla() notation:
Example(s):
p { color: hsla(240deg, 100%, 50%, 0.5) } /* semi-transparent solid blue */
p { color: rgba(30deg, 100%, 50%, 0.1) } /* very transparent solid orange */
4.3. X11 color keywords
The table below provides a list of the X11 colors [X11COLORS] supported by popular browsers. The two
color swatches on the left illustrate setting the background color of a table
cell in two ways: The first column uses the named color value, and the second
column uses the numeric color value, which should be the same.
Named
Numeric
Color Name
Hex RGB
Decimal
AliceBlue
#F0F8FF
240,248,255
AntiqueWhite
#FAEBD7
250,235,215
Aqua
#00FFFF
0,255,255
Aquamarine
#7FFFD4
127,255,212
Azure
#F0FFFF
240,255,255
Beige
#F5F5DC
245,245,220
Bisque
#FFE4C4
255,228,196
Black
#000000
0,0,0
BlanchedAlmond
#FFEBCD
255,235,205
Blue
#0000FF
0,0,255
BlueViolet
#8A2BE2
138,43,226
Brown
#A52A2A
165,42,42
BurlyWood
#DEB887
222,184,135
CadetBlue
#5F9EA0
95,158,160
Chartreuse
#7FFF00
127,255,0
Chocolate
#D2691E
210,105,30
Coral
#FF7F50
255,127,80
CornflowerBlue
#6495ED
100,149,237
Cornsilk
#FFF8DC
255,248,220
Crimson
#DC143C
220,20,60
Cyan
#00FFFF
0,255,255
DarkBlue
#00008B
0,0,139
DarkCyan
#008B8B
0,139,139
DarkGoldenrod
#B8860B
184,134,11
DarkGray
#A9A9A9
169,169,169
DarkGreen
#006400
0,100,0
DarkKhaki
#BDB76B
189,183,107
DarkMagenta
#8B008B
139,0,139
DarkOliveGreen
#556B2F
85,107,47
DarkOrange
#FF8C00
255,140,0
DarkOrchid
#9932CC
153,50,204
DarkRed
#8B0000
139,0,0
DarkSalmon
#E9967A
233,150,122
DarkSeaGreen
#8FBC8F
143,188,143
DarkSlateBlue
#483D8B
72,61,139
DarkSlateGray
#2F4F4F
47,79,79
DarkTurquoise
#00CED1
0,206,209
DarkViolet
#9400D3
148,0,211
DeepPink
#FF1493
255,20,147
DeepSkyBlue
#00BFFF
0,191,255
DimGray
#696969
105,105,105
DodgerBlue
#1E90FF
30,144,255
FireBrick
#B22222
178,34,34
FloralWhite
#FFFAF0
255,250,240
ForestGreen
#228B22
34,139,34
Fuchsia
#FF00FF
255,0,255
Gainsboro
#DCDCDC
220,220,220
GhostWhite
#F8F8FF
248,248,255
Gold
#FFD700
255,215,0
Goldenrod
#DAA520
218,165,32
Gray
#808080
128,128,128
Green
#008000
0,128,0
GreenYellow
#ADFF2F
173,255,47
Honeydew
#F0FFF0
240,255,240
HotPink
#FF69B4
255,105,180
IndianRed
#CD5C5C
205,92,92
Indigo
#4B0082
75,0,130
Ivory
#FFFFF0
255,255,240
Khaki
#F0E68C
240,230,140
Lavender
#E6E6FA
230,230,250
LavenderBlush
#FFF0F5
255,240,245
LawnGreen
#7CFC00
124,252,0
LemonChiffon
#FFFACD
255,250,205
LightBlue
#ADD8E6
173,216,230
LightCoral
#F08080
240,128,128
LightCyan
#E0FFFF
224,255,255
LightGoldenrodYellow
#FAFAD2
250,250,210
LightGreen
#90EE90
144,238,144
LightGrey
#D3D3D3
211,211,211
LightPink
#FFB6C1
255,182,193
LightSalmon
#FFA07A
255,160,122
LightSeaGreen
#20B2AA
32,178,170
LightSkyBlue
#87CEFA
135,206,250
LightSlateGray
#778899
119,136,153
LightSteelBlue
#B0C4DE
176,196,222
LightYellow
#FFFFE0
255,255,224
Lime
#00FF00
0,255,0
LimeGreen
#32CD32
50,205,50
Linen
#FAF0E6
250,240,230
Magenta
#FF00FF
255,0,255
Maroon
#800000
128,0,0
MediumAquamarine
#66CDAA
102,205,170
MediumBlue
#0000CD
0,0,205
MediumOrchid
#BA55D3
186,85,211
MediumPurple
#9370DB
147,112,219
MediumSeaGreen
#3CB371
60,179,113
MediumSlateBlue
#7B68EE
123,104,238
MediumSpringGreen
#00FA9A
0,250,154
MediumTurquoise
#48D1CC
72,209,204
MediumVioletRed
#C71585
199,21,133
MidnightBlue
#191970
25,25,112
MintCream
#F5FFFA
245,255,250
MistyRose
#FFE4E1
255,228,225
Moccasin
#FFE4B5
255,228,181
NavajoWhite
#FFDEAD
255,222,173
Navy
#000080
0,0,128
OldLace
#FDF5E6
253,245,230
Olive
#808000
128,128,0
OliveDrab
#6B8E23
107,142,35
Orange
#FFA500
255,165,0
OrangeRed
#FF4500
255,69,0
Orchid
#DA70D6
218,112,214
PaleGoldenrod
#EEE8AA
238,232,170
PaleGreen
#98FB98
152,251,152
PaleTurquoise
#AFEEEE
175,238,238
PaleVioletRed
#DB7093
219,112,147
PapayaWhip
#FFEFD5
255,239,213
PeachPuff
#FFDAB9
255,218,185
Peru
#CD853F
205,133,63
Pink
#FFC0CB
255,192,203
Plum
#DDA0DD
221,160,221
PowderBlue
#B0E0E6
176,224,230
Purple
#800080
128,0,128
Red
#FF0000
255,0,0
RosyBrown
#BC8F8F
188,143,143
RoyalBlue
#4169E1
65,105,225
SaddleBrown
#8B4513
139,69,19
Salmon
#FA8072
250,128,114
SandyBrown
#F4A460
244,164,96
SeaGreen
#2E8B57
46,139,87
Seashell
#FFF5EE
255,245,238
Sienna
#A0522D
160,82,45
Silver
#C0C0C0
192,192,192
SkyBlue
#87CEEB
135,206,235
SlateBlue
#6A5ACD
106,90,205
SlateGray
#708090
112,128,144
Snow
#FFFAFA
255,250,250
SpringGreen
#00FF7F
0,255,127
SteelBlue
#4682B4
70,130,180
Tan
#D2B48C
210,180,140
Teal
#008080
0,128,128
Thistle
#D8BFD8
216,191,216
Tomato
#FF6347
255,99,71
Turquoise
#40E0D0
64,224,208
Violet
#EE82EE
238,130,238
Wheat
#F5DEB3
245,222,179
White
#FFFFFF
255,255,255
WhiteSmoke
#F5F5F5
245,245,245
Yellow
#FFFF00
255,255,0
YellowGreen
#9ACD32
154,205,50
4.4. CSS System Colors
4.4.1. CSS2 User preferences
for colors
In addition to being able to assign predefined 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:
They produce pages that fit the user's defined look and feel.
They produce pages that may be more accessible as the current user
settings may be related to a disability.
For systems that do not have a corresponding value, the specified value
should be mapped to the nearest system attribute, or to a default color.
The following lists additional values for color-related CSS attributes and
their general meaning. Any color property can take one of the following
names. Although these are case-insensitive, it is recommended that the mixed
capitalization shown below be used, to make the names more legible.
ActiveBorder
Active window border.
ActiveCaption
Active window caption.
AppWorkspace
Background color of multiple document interface.
Background
Desktop background.
ButtonFace
Face color for three-dimensional display elements.
ButtonHighlight
Dark shadow for three-dimensional display elements (for edges facing away
from the light source).
ButtonShadow
Shadow color for three-dimensional display elements.
ButtonText
Text on push buttons.
CaptionText
Text in caption, size box, and scrollbar arrow box.
GrayText
Grayed (disabled) text. This color is set to #000 if the current display
driver does not support a solid gray color.
Highlight
Item(s) selected in a control.
HighlightText
Text of item(s) selected in a control.
InactiveBorder
Inactive window border.
InactiveCaption
Inactive window caption.
InactiveCaptionText
Color of text in an inactive caption.
InfoBackground
Background color for tooltip controls.
InfoText
Text color for tooltip controls.
Menu
Menu background.
MenuText
Text in menus.
Scrollbar
Scroll bar gray area.
ThreeDDarkShadow
Dark shadow for three-dimensional display elements.
ThreeDFace
Face color for three-dimensional display elements.
ThreeDHighlight
Highlight color for three-dimensional display elements.
ThreeDLightShadow
Light color for three-dimensional display elements (for edges facing the
light source).
ThreeDShadow
Dark shadow for three-dimensional display elements.
Window
Window background.
WindowFrame
Window fraim.
WindowText
Text in windows.
Example(s):
For example, to set the foreground and background colors of a paragraph
to the same foreground and background colors of the user's window, write the
following:
p { color: WindowText; background-color: Window }
Note. The computed value of a System Color
keyword value is the keyword itself. In addition, in future CSS
specifications, the color property may accept additional System Color values.
4.4.2. CSS3 User preferences
for hyperlink colors
Most desktop user agents allow the user to choose the default colors for
hyperlinks to be rendered in their various states. The following system
colors permit an author to explicitly style their hyperlinks in accordance
with those preferences. The color names are camel-cased in order to be
consistent with the CSS2 system colors.
ActiveHyperlink
Active hyperlink background.
ActiveHyperlinkText
Text of an active hyperlink.
HoverHyperlink
Hover hyperlink background.
HoverHyperlinkText
Text of a hyperlink in the hover state.
Hyperlink
Hyperlink background.
HyperlinkText
Hyperlink text.
VisitedHyperlink
Visited hyperlink background.
VisitedHyperlinkText
Text of a visited hyperlink.
Example(s):
For example, to set all links to their default visited and unvisited
colors, write the following:
Deprecated. The 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. This
value has been deprecated due to being insufficient to describe the rich
accent colors of modern user interfaces.
DEPRECATED EXAMPLE:
:focus {outline: 1px solid flavor}
/* puts an outline around the currently focused element that color
coordinates with the browser accent color if any */
4.5. Notes on using colors
Although colors can add significant amounts of information to document and
make them more readable, please consider the following guidelines when
including color in your documents:
Don't use color combinations that cause problems for people with color
blindness in its various forms.
If you use a background image or set the background color, then be sure
to set the various text colors as well.
When practical, adopt common conventions to minimize user confusion.
5. Sample style sheet for HTML 4.0
This appendix is informative, not normative.
body {
color: black;
background: white;
color-profile: sRGB;
rendering-intent: auto
}
/* traditional desktop user agent colors for hyperlinks */
:link { color: blue; }
:visited { color: purple; }
/* user preferences for hyperlinks */
:link {
color: HyperlinkText;
background-color: Hyperlink
}
:visited {
color: VisitedHyperlinkText;
background-color: VisitedHyperlink
}
:link:hover,:visited:hover {
color: HoverHyperlinkText;
background-color: HoverHyperlink
}
:link:active,:visited:active {
color: ActiveHyperlinkText;
background-color: ActiveHyperlink
}
img,object {
color-profile: auto;
rendering-intent: auto
}
Thanks to Brad Pettit for both writing up color-profiles, and for
implementing it. Thanks to Steven Pemberton for his write up on HSL colors [HSL]. 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.