Designing a Web Page with CSS - HTML, CSS, and Dynamic HTML - page 154

One advantage of using the compact hexadecimal format is that it results in smaller
style sheet fi les; the disadvantage is that hexadecimals are more diffi cult to read and
interpret. Most graphics programs provide color values in either a decimal or a hexa-
decimal format that you can easily copy into a style sheet. So a common practice is to
use graphics software to choose your colors, and then copy the color values from your
graphics package.

Defining Color Values
• To define a color value using the RGB color model, use the property value

rgb( red , green , blue )
where red , green , and blue are the intensities of red, green, and blue ranging in
value from 0 up to 255.
• To define a color value using the HSL color mode, use

hsl( hue , saturation , lightness )
where hue is the tint of the color on the color wheel measured in degrees,
saturation is the intensity of the color in percent, and lightness is the brightness
of the color in percent.
• To create a semi-transparent color, use either

rgba( red , green , blue , opacity )

or

hsla( hue , saturation , lightness , opacity )
where opacity ranges from 0 (transparent) up to 1 (opaque).

Using Color Names
If you don't want to use color values, you can also specify colors by name. CSS supports
the 16 basic color names shown in Figure 3-10.

Figure 3-10 The 16 basic CSS2 color names

Color Name RGB Triplet Hexadecimal Color Name RGB Triplet Hexadecimal

Aqua
Black
Blue
Fuchsia
Gray
Green
Lime
Maroon

(0, 255, 255)
(0, 0, 0)
(0, 0, 255)
(255, 0, 255)
(128, 128, 128)
(0, 128, 0)
(0, 255, 0)
(128, 0, 0)

00FFFF
000000
0000FF
FF00FF
808080
008000
00FF00
800000

Navy
Olive
Purple
Red
Silver
Teal
White
Yellow

(0, 0, 128)
(128, 128, 0)
(128, 0, 128)
(255, 0, 0)
(192, 192, 192)
(0, 128, 128)
(255, 255, 255)
(255, 255, 0)

000080
808000
FF0000
C0C0C0
008080
FFFFFF
FFFF00

Sixteen colors are not a lot, so most browsers support an extended list of 140 color
names, including such colors as orange, crimson, khaki, and brown. Although this
extended color list was not part of the CSS specifi cation until CSS3, most browsers sup-
port it. You can view these color names in the appendix and in a demo page.