16.2. 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 BGCOLOR="darkolivegreen">
16.2.1. 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.
16.2.2. 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 |
00FFFF |
00FFFF |
|
aquamarine |
127 - 255 - 212 |
7FFFD4 |
66FFCC |
|
azure |
240 - 255 - 255 |
F0FFFF |
FFFFFF |
|
beige |
245 - 245 - 220 |
F5F5DC |
FFFFCC |
|
bisque |
255 - 228 - 196 |
FFE4C4 |
FFFFCC |
|
black |
0 - 0 - 0 |
000000 |
000000 |
|
blanchedalmond |
255 - 255 - 205 |
FFFFCD |
FFFFCC |
|
blue |
0 - 0 - 255 |
0000FF |
0000FF |
|
blueviolet |
138 - 43 - 226 |
8A2BE2 |
9933FF |
|
brown |
165 - 42 - 42 |
A52A2A |
993333 |
|
burlywood |
222 - 184 - 135 |
DEB887 |
CCCC99 |
|
cadetblue |
95 - 158 - 160 |
5F9EA0 |
669999 |
|
chartreuse |
127 - 255 - 0 |
7FFF00 |
66FF00 |
|
chocolate |
210 - 105 - 30 |
D2691E |
996600 |
|
coral |
255 - 127 - 80 |
FF7F50 |
FF6666 |
|
cornflowerblue |
100 - 149 - 237 |
6495ED |
6699FF |
|
cornsilk |
255 - 248 - 220 |
FFF8DC |
FFFFCC |
|
crimson |
220 - 20 - 60 |
DC143C |
CC0033 |
|
cyan |
0 - 255 - 255 |
00FFFF |
00FFFF |
|
darkblue |
0 - 0 - 139 |
00008B |
000099 [10] |
|
darkcyan |
0 - 139 - 139 |
008B8B |
009999 |
|
darkgoldenrod |
184 - 134 - 11 |
B8860B |
CC9900 |
|
darkgray |
169 - 169 - 169 |
A9A9A9 |
999999 [10] |
|
darkgreen |
0 - 100 - 0 |
006400 |
006600 |
|
darkkhaki |
189 - 183 - 107 |
BDB76B |
CCCC66 |
|
darkmagenta |
139 - 0 - 139 |
8B008B |
990099 |
|
darkolivegreen |
85 - 107 - 47 |
556B2F |
666633 |
|
darkorange |
255 - 140 - 0 |
FF8C00 |
FF9900 |
|
darkorchid |
153 - 50 - 204 |
9932CC |
9933CC |
|
darkred |
139 - 0 - 0 |
8B0000 |
990000[10] |
|
darksalmon |
233 - 150 - 122 |
E9967A |
FF9966 |
|
darkseagreen |
143 - 188 - 143 |
8FBC8F |
99CC99 |
|
darkslateblue |
72 - 61 - 139 |
483D8B |
333399 |
|
darkslategray |
47 - 79 - 79 |
2F4F4F |
339999[10] |
|
darkturquoise |
0 - 206 - 209 |
00CED1 |
00CCCC |
|
darkviolet |
148 - 0 - 211 |
9400D3 |
9900CC |
|
deeppink |
255 - 20 - 147 |
FF1493 |
FF0099 |
|
deepskyblue |
0 - 191 - 255 |
00BFFF |
00CCFF |
|
dimgray |
105 - 105 - 105 |
696969 |
666666 |
|
dodgerblue |
30 - 144 - 255 |
1E90FF |
0099FF |
|
firebrick |
178 - 34 - 34 |
B22222 |
CC3333 |
|
floralwhite |
255 - 250 - 240 |
FFFAF0 |
FFFFFF |
|
forestgreen |
34 - 139 - 34 |
228B22 |
339933 |
|
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 |
808080 |
999999 [10] |
|
green |
0 - 128 - 0 |
008000 |
009900 |
|
greenyellow |
173 - 255 - 47 |
ADFF2F |
99FF33 |
|
honeydew |
240 - 255 - 240 |
F0FFF0 |
FFFFFF |
|
hotpink |
255 - 105 - 180 |
FF69B4 |
FF66CC |
|
indianred |
205 - 92 - 92 |
CD5C5C |
CC6666 |
|
indigo |
75 - 0 - 130 |
4B0082 |
330099 |
|
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 |
7CFC00 |
00FF00 |
|
lemonchiffon |
255 - 250 - 205 |
FFFACD |
FFFFCC |
|
lightblue |
173 - 216 - 230 |
ADD8E6 |
99CCFF |
|
lightcoral |
240 - 128 - 128 |
F08080 |
FF9999 |
|
lightcyan |
224 - 255 - 255 |
E0FFFF |
FFFFFF |
|
lightgoldenrodyellow |
250 - 250 - 210 |
FAFAD2 |
FFFFCC |
|
lightgreen |
144 - 238 - 144 |
90EE90 |
99FF99 |
|
lightgrey |
211 - 211 - 211 |
D3D3D3 |
CCCCCC [10] |
|
lightpink |
255 - 182 - 193 |
FFB6C1 |
FFFFCC |
|
lightsalmon |
255 - 160 - 122 |
FFA07A |
FF9966 |
|
lightseagreen |
32 - 178 - 170 |
20B2AA |
33CC99 |
|
lightskyblue |
135 - 206 - 250 |
87CEFA |
99CCFF |
|
lightslategray |
119 - 136 - 153 |
778899 |
669999 |
|
lightsteelblue |
176 - 196 - 222 |
B0C4DE |
CCCCCC |
|
lightyellow |
255 - 255 - 224 |
FFFFE0 |
FFFFFF |
|
lime |
0 - 255 - 0 |
00FF00 |
00FF00 |
|
limegreen |
50 - 205 - 50 |
32CD32 |
33CC33 |
|
linen |
250 - 240 - 230 |
FAF0E6 |
FFFFFF |
|
magenta |
255 - 0 - 255 |
FF00FF |
FF00FF |
|
maroon |
128 - 0 - 0 |
800000 |
990000 [10] |
|
mediumaquamarine |
102 - 205 - 170 |
66CDAA |
66CC99 |
|
mediumblue |
0 - 0 - 205 |
0000CD |
0000CC |
|
mediumorchid |
186 - 85 - 211 |
BA55D3 |
CC66CC |
|
mediumpurple |
147 - 112 - 219 |
9370DB |
9966CC |
|
mediumseagreen |
60 - 179 - 113 |
3CB371 |
33CC66 |
|
mediumslateblue |
123 - 104 - 238 |
7B68EE |
6666FF |
|
mediumspringgreen |
0 - 250 - 154 |
00FA9A |
00FF99 |
|
mediumturquoise |
72 - 209 - 204 |
48D1CC |
33CCCC |
|
mediumvioletred |
199 - 21 - 133 |
C71585 |
CC0066 |
|
midnightblue |
25 - 25 - 112 |
191970 |
000066 [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 |
000080 |
000099 [10] |
|
oldlace |
253 - 245 - 230 |
FDF5E6 |
FFFFFF |
|
olive |
128 - 128 - 0 |
808000 |
999900 |
|
olivedrab |
107 - 142 - 35 |
6B8E23 |
669933 |
|
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 |
98FB98 |
99FF99 |
|
paleturquoise |
175 - 238 - 238 |
AFEEEE |
99FFFF |
|
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 |
800080 |
990099 |
|
red |
255 - 0 - 0 |
FF0000 |
FF0000 |
|
rosybrown |
188 - 143 - 143 |
BC8F8F |
CC9999 |
|
royalblue |
65 - 105 - 225 |
4169E1 |
3366FF |
|
saddlebrown |
139 - 69 - 19 |
8B4513 |
993300 |
|
salmon |
250 - 128 - 114 |
FA8072 |
FF9966 |
|
sandybrown |
244 - 164 - 96 |
F4A460 |
FF9966 |
|
seagreen |
46 - 139 - 87 |
2E8B57 |
339966 |
|
seashell |
255 - 245 - 238 |
FFF5EE |
FFFFFF |
|
sienna |
160 - 82 - 45 |
A0522D |
996633 |
|
silver |
192 - 192 - 192 |
C0C0C0 |
CCCCCC |
|
skyblue |
135 - 206 - 235 |
87CEEB |
99CCFF |
|
slateblue |
106 - 90 - 205 |
6A5ACD |
6666CC |
|
slategray |
112 - 128 - 144 |
708090 |
669999 |
|
snow |
255 - 250 - 250 |
FFFAFA |
FFFFFF |
|
springgreen |
0 - 255 - 127 |
00FF7F |
00FF66 |
|
steelblue |
70 - 130 - 180 |
4682B4 |
3399CC |
|
tan |
210 - 180 - 140 |
D2B48C |
CCCC99 |
|
teal |
0 - 128 - 128 |
008080 |
009999 |
|
thistle |
216 - 191 - 216 |
D8BFD8 |
CCCCCC[10] |
|
tomato |
253 - 99 - 71 |
FF6347 |
FF6633 |
|
turquoise |
64 - 224 - 208 |
40E0D0 |
33FFCC |
|
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 |
9ACD32 |
66CC33 |
[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 | ||||||||
Neutrals -- cool darkgray darkslategray dimgray gainsboro ghostwhite gray lightgray lightslategray silver slategray snow Neutrals -- warm
|
Yellows
darkgoldenrod gold goldenrod lemonchiffon lightgoldenrodyellow lightyellow palegoldenrod yellow
Oranges
|
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 |
16.2.3. 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 Chapter 9, "Structural HTML Tags", Chapter 10, "Formatting Text", and Chapter 13, "Tables" of this book.
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. |
 |  |  |
| 16. Specifying Color in HTML |  | 17. Cascading Style Sheets |
Copyright © 2002 O'Reilly & Associates. All rights reserved.