Book HomeWeb Design in a NutshellSearch this book

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
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

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.



Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.