Specifying Colors by Name

Colors can also be identified by one of 140 color names originally developed for the X Window System. The complete list appears in Table 16-2 (sorted alphabetically, with numerical values included) and Table 16-3 (grouped by hue). You can also view samples of each color at http://www.learningwebdesign.com/colornames.html.

To set the background color to a dark olive green using a color name, the complete HTML tag would look like this:

<BODY >

Grays

There are also one hundred variants of gray numbered 1 through 100. "Gray1" is the darkest; "gray100" is the lightest. The color we generally think of as "gray" is roughly equivalent to "gray75." Both spellings "gray" and "grey" are acceptable.

Color Name Cautions

There are several pitfalls to using color names instead of numerical color values:

Browser support
Color names are supported only by Navigator Versions 2.0 and higher and Internet Explorer Versions 3.0 and higher. Internet Explorer 2.0 supports the following 16 color names:

aqua gray navy silver
black green olive teal
blue lime purple white
fuchsia maroon red yellow

These are also the only color names specified by the W3C in the HTML 4.01 Specification.

Color shifting
Of the 140 color names, only 10 represent nondithering colors from the web palette. They are aqua, black, blue, cyan, fuchsia, lime, magenta, red, white, and yellow.
When viewed on an 8-bit display, the remaining 130 colors shift to their nearest web palette equivalent (or system palette color). In many cases, the difference is drastic. Many of the pastels shift to solid white.
The "Nearest Web-safe Color" column in Table 16-2 lists the color that will actually be displayed for each color name on an 8-bit display.

Table 16-2. Color names with their numeric values

Color name	RGB values	Hexadecimal	Nearest web-safe color
aliceblue	240 - 248 - 255	`F0F8FF`	`FFFFFF`
antiquewhite	250 - 235 - 215	`FAEBD7`	`FFFFCC`
aqua	0 - 255 - 255	`FFFF`	`FFFF`
aquamarine	127 - 255 - 212	`FFFD4`	`FFCC`
azure	240 - 255 - 255	`F0FFFF`	`FFFFFF`
beige	245 - 245 - 220	`F5F5DC`	`FFFFCC`
bisque	255 - 228 - 196	`FFE4C4`	`FFFFCC`
black	0 - 0 - 0
blanchedalmond	255 - 255 - 205	`FFFFCD`	`FFFFCC`
blue	0 - 0 - 255	`FF`	`FF`
blueviolet	138 - 43 - 226	`A2BE2`	`FF`
brown	165 - 42 - 42	`A52A2A`
burlywood	222 - 184 - 135	`DEB887`	`CCCC99`
cadetblue	95 - 158 - 160	`F9EA0`
chartreuse	127 - 255 - 0	`FFF00`	`FF00`
chocolate	210 - 105 - 30	`D2691E`
coral	255 - 127 - 80	`FF7F50`	`FF6666`
cornflowerblue	100 - 149 - 237	`ED`	`FF`
cornsilk	255 - 248 - 220	`FFF8DC`	`FFFFCC`
crimson	220 - 20 - 60	`DC143C`	`CC0033`
cyan	0 - 255 - 255	`FFFF`	`FFFF`
darkblue	0 - 0 - 139	`B`	[10]
darkcyan	0 - 139 - 139	`B8B`
darkgoldenrod	184 - 134 - 11	`B8860B`	`CC9900`
darkgray	169 - 169 - 169	`A9A9A9`	[10]
darkgreen	0 - 100 - 0
darkkhaki	189 - 183 - 107	`BDB76B`	`CCCC66`
darkmagenta	139 - 0 - 139	`B008B`
darkolivegreen	85 - 107 - 47	`B2F`
darkorange	255 - 140 - 0	`FF8C00`	`FF9900`
darkorchid	153 - 50 - 204	`CC`	`CC`
darkred	139 - 0 - 0	`B0000`	[10]
darksalmon	233 - 150 - 122	`E9967A`	`FF9966`
darkseagreen	143 - 188 - 143	`FBC8F`	`CC99`
darkslateblue	72 - 61 - 139	`D8B`
darkslategray	47 - 79 - 79	`F4F4F`	[10]
darkturquoise	0 - 206 - 209	`CED1`	`CCCC`
darkviolet	148 - 0 - 211	`D3`	`CC`
deeppink	255 - 20 - 147	`FF1493`	`FF0099`
deepskyblue	0 - 191 - 255	`BFFF`	`CCFF`
dimgray	105 - 105 - 105
dodgerblue	30 - 144 - 255	`E90FF`	`FF`
firebrick	178 - 34 - 34	`B22222`	`CC3333`
floralwhite	255 - 250 - 240	`FFFAF0`	`FFFFFF`
forestgreen	34 - 139 - 34	`B22`
fuchsia	255 - 0 - 255	`FF00FF`	`FF00FF`
gainsboro	220 - 220 - 220	`DCDCDC`	`CCCCCC` [10]
ghostwhite	248 - 248 - 255	`F8F8FF`	`FFFFFF`
gold	255 - 215 - 0	`FFD700`	`FFCC00`
goldenrod	218 - 165 - 32	`DAA520`	`CC9933`
gray	128 - 128 - 128	[10]
green	0 - 128 - 0
greenyellow	173 - 255 - 47	`ADFF2F`	`FF33`
honeydew	240 - 255 - 240	`F0FFF0`	`FFFFFF`
hotpink	255 - 105 - 180	`FF69B4`	`FF66CC`
indianred	205 - 92 - 92	`CD5C5C`	`CC6666`
indigo	75 - 0 - 130	`B0082`
ivory	255 - 240 - 240	`FFF0F0`	`FFFFFF`
khaki	240 - 230 - 140	`F0D58C`	`FFCC99`
lavender	230 - 230 - 250	`E6E6FA`	`FFFFFF` [10]
lavenderblush	255 - 240 - 245	`FFF0F5`	`FFFFFF`
lawngreen	124 - 252 - 0	`CFC00`	`FF00`
lemonchiffon	255 - 250 - 205	`FFFACD`	`FFFFCC`
lightblue	173 - 216 - 230	`ADD8E6`	`CCFF`
lightcoral	240 - 128 - 128	`F08080`	`FF9999`
lightcyan	224 - 255 - 255	`E0FFFF`	`FFFFFF`
lightgoldenrodyellow	250 - 250 - 210	`FAFAD2`	`FFFFCC`
lightgreen	144 - 238 - 144	`EE90`	`FF99`
lightgrey	211 - 211 - 211	`D3D3D3`	`CCCCCC` [10]
lightpink	255 - 182 - 193	`FFB6C1`	`FFFFCC`
lightsalmon	255 - 160 - 122	`FFA07A`	`FF9966`
lightseagreen	32 - 178 - 170	`B2AA`	`CC99`
lightskyblue	135 - 206 - 250	`CEFA`	`CCFF`
lightslategray	119 - 136 - 153
lightsteelblue	176 - 196 - 222	`B0C4DE`	`CCCCCC`
lightyellow	255 - 255 - 224	`FFFFE0`	`FFFFFF`
lime	0 - 255 - 0	`FF00`	`FF00`
limegreen	50 - 205 - 50	`CD32`	`CC33`
linen	250 - 240 - 230	`FAF0E6`	`FFFFFF`
magenta	255 - 0 - 255	`FF00FF`	`FF00FF`
maroon	128 - 0 - 0	[10]
mediumaquamarine	102 - 205 - 170	`CDAA`	`CC99`
mediumblue	0 - 0 - 205	`CD`	`CC`
mediumorchid	186 - 85 - 211	`BA55D3`	`CC66CC`
mediumpurple	147 - 112 - 219	`DB`	`CC`
mediumseagreen	60 - 179 - 113	`CB371`	`CC66`
mediumslateblue	123 - 104 - 238	`B68EE`	`FF`
mediumspringgreen	0 - 250 - 154	`FA9A`	`FF99`
mediumturquoise	72 - 209 - 204	`D1CC`	`CCCC`
mediumvioletred	199 - 21 - 133	`C71585`	`CC0066`
midnightblue	25 - 25 - 112	[10]
mintcream	245 - 255 - 250	`F5FFFA`	`FFFFFF`
mistyrose	255 - 228 - 225	`FFE4E1`	`FFFFFF` [10]
moccasin	255 - 228 - 181	`FFE4B5`	`FFFFCC`
navajowhite	255 - 222 - 173	`FFDEAD`	`FFCC99`
navy	0 - 0 - 128	[10]
oldlace	253 - 245 - 230	`FDF5E6`	`FFFFFF`
olive	128 - 128 - 0
olivedrab	107 - 142 - 35	`B8E23`
orange	255 - 165 - 0	`FFA500`	`FF9900`
orangered	255 - 69 - 0	`FF4500`	`FF3300`
orchid	218 - 112 - 214	`DA70D6`	`CC66CC`
palegoldenrod	238 - 232 - 170	`EEE8AA`	`FFFF99`
palegreen	152 - 251 - 152	`FB98`	`FF99`
paleturquoise	175 - 238 - 238	`AFEEEE`	`FFFF`
palevioletred	219 - 112 - 147	`DB7093`	`CC6699`
papayawhip	255 - 239 - 213	`FFEFD5`	`FFFFCC`
peachpuff	255 - 218 - 185	`FFDAB9`	`FFCCCC`
peru	205 - 133 - 63	`CD853F`	`CC9933`
pink	255 - 192 - 203	`FFC0CB`	`FFCCCC`
plum	221 - 160 - 221	`DDA0DD`	`CC99CC`
powderblue	176 - 224 - 230	`B0E0E6`	`CCFFFF`
purple	128 - 0 - 128
red	255 - 0 - 0	`FF0000`	`FF0000`
rosybrown	188 - 143 - 143	`BC8F8F`	`CC9999`
royalblue	65 - 105 - 225	`E1`	`FF`
saddlebrown	139 - 69 - 19	`B4513`
salmon	250 - 128 - 114	`FA8072`	`FF9966`
sandybrown	244 - 164 - 96	`F4A460`	`FF9966`
seagreen	46 - 139 - 87	`E8B57`
seashell	255 - 245 - 238	`FFF5EE`	`FFFFFF`
sienna	160 - 82 - 45	`A0522D`
silver	192 - 192 - 192	`C0C0C0`	`CCCCCC`
skyblue	135 - 206 - 235	`CEEB`	`CCFF`
slateblue	106 - 90 - 205	`A5ACD`	`CC`
slategray	112 - 128 - 144
snow	255 - 250 - 250	`FFFAFA`	`FFFFFF`
springgreen	0 - 255 - 127	`FF7F`	`FF66`
steelblue	70 - 130 - 180	`B4`	`CC`
tan	210 - 180 - 140	`D2B48C`	`CCCC99`
teal	0 - 128 - 128
thistle	216 - 191 - 216	`D8BFD8`	`CCCCCC`[10]
tomato	253 - 99 - 71	`FF6347`	`FF6633`
turquoise	64 - 224 - 208	`E0D0`	`FFCC`
violet	238 - 130 - 238	`EE82EE`	`FF99FF`
wheat	245 - 222 - 179	`F5DEB3`	`FFCCCC`
white	255 - 255 - 255	`FFFFFF`	`FFFFFF`
whitesmoke	245 - 245 - 245	`F5F5F5`	`FFFFFF`
yellow	255 - 255 - 0	`FFFF00`	`FFFF00`
yellowgreen	154 - 205 - 50	`ACD32`	`CC33`

[10]These color names shift to the nearest Mac system palette color when viewed on a Macintosh using any browser except Netscape Navigator 4.0 (which shifts it to the nearest web palette color).

Table 16-3. Web color names by hue

black white
Neutrals -- cool darkgray darkslategray dimgray gainsboro ghostwhite gray lightgray lightslategray silver slategray snow Neutrals -- warm antiquewhite cornsilk floralwhite ivory linen oldlace papayawhip seashell	Yellows darkgoldenrod gold goldenrod lemonchiffon lightgoldenrodyellow lightyellow palegoldenrod yellow Oranges darkorange orange orangered peachpuff	Browns/Tans bisque beige blanchedalmond brown burlywood chocolate khaki moccasin navajowhite peru rosybrown sandybrown sienna tan wheat	Greens aquamarine chartreuse darkgreen darkkhaki darkolivegreen darkseagreen forestgreen green greenyellow honeydew lawngreen lightgreen lime limegreen mediumseagreen mediumspringgreen mintgreen olive olivedrab palegreen seagreen springgreen yellowgreen	Blue-greens aqua cyan darkcyan darkturquoise lightcyan lightseagreen mediumaquamarine mediumturquoise paleturquoise turquoise	Blues aliceblue azure blue cadetblue cornflowerblue darkblue darkslateblue deepskyblue dodgerblue indigo lightblue lightskyblue lightsteelblue mediumblue mediumslateblue midnightblue navy powderblue skyblue slateblue steelblue	Purples blueviolet darkmagenta darkorchid darkviolet lavender lavenderblush mediumorchid mediumpurple mediumvioletred orchid palevioletred plum purple thistle violet	Pinks coral darksalmon deeppink fuchsia hotpink lightcoral lightpink lightsalmon magenta mistyrose pink salmon	Reds crimson darkred firebrick indianred maroon red

Coloring Page Elements

Table 16-4 lists the HTML elements for which you can specify a color. Each tag's use is further explained in "Structural HTML Tags", "Formatting Text", and "Tables" of this tutorial.

Table 16-4. Summary of HTML tags with color attributes

Tag	Attribute	Description
`<BODY>`	`BGCOLOR=`color	Document background
`<BODY>`	`TEXT=`color	Regular text
`<BODY>`	`LINK=`color	Hypertext link
`<BODY>`	`VLINK=`color	Visited link
`<BODY>`	`ALINK=`color	Active link
`<FONT>`	`COLOR=`color	Colors a selection of text
`<BASEFONT>`	`COLOR=`color	Colors the following block of text (IE only)
`<TABLE>`	`BGCOLOR=`color	Applies color to all cells in a table
`<TABLE>`	`BORDERCOLOR=`color	Table border color (IE only)
`<TABLE>`	`BORDERCOLORLIGHT=`color	Table border highlight color (IE only)
`<TABLE>`	`BORDERCOLORDARK=`color	Table border shadow color (IE only)
`<TR>`	`BGCOLOR=`color	Table row background
`<TD>`	`BGCOLOR=`color	Table cell background
`<TH>`	`BGCOLOR=`color	Table header background
`<FRAMESET>`	`BORDERCOLOR=`color	Colors borders between all frames on a page
`<FRAME>`	`BORDERCOLOR=`color	Colors the border for one particular frame

Similarly, color can be applied to elements on a web page using Cascading Style Sheet properties. The CSS1 properties that take color values are listed in Table 16-5.

Table 16-5. CSS1 properties for specifying color

Property	Description
`color`	Sets the foreground color of a given element. When applied to a text element (such as `H1` or `P`) it sets the text color.
`background-color`	Sets the background color of an element. The color fills the content area and padding and extends to the outer edge of the element's border.
`border-color`	Sets the color of the overall border of an element.

`aqua`	`gray`	`navy`	`silver`
`black`	`green`	`olive`	`teal`
`blue`	`lime`	`purple`	`white`
`fuchsia`	`maroon`	`red`	`yellow`