D

Color Names and Values

The first thing you need to learn about color is how to specify exactly the color you want; after
all, there are a lot of different hues, tones, and shades and you must choose the right ones.
In HTML you can specify a color in four key ways:

Hex codes: These are six-digit codes representing the amount of red, green, and blue
that make up the color, preceded by a pound or hash sign # (for example, #333333).

Color names: A set of names that represent more than 200 colors, such as red,
lightslategray, and fuchsia.

RGB color values: Here, numbers between 0 and 255 represent the amount of red,
green, and blue that makes up each color.

HSL color values: HSL is an alternative to RGB and closely mirrors the way that people
actually think about color. Instead of mixing three RGB values together to create the
target color, HSL enables you to set the hue with one number between 0 and 360, where,
for example, 0 is red, 120 is green, and 240 is blue. Then, you adjust the saturation of
the color using 0 percent as gray and 100 percent as full saturation. Finally you adjust
lightness/darkness of the color where 0-percent lightness is black, 100-percent lightness is
white, and 50-percent lightness is normal.

Using Hex Codes to Specify Colors

When you start using hexadecimal codes (or hex codes for short), they can be daunting
because they use a mix of numbers and letters to represent colors. Although you are used to
numbers represented with 10 digits (09), hexadecimal codes are represented with 16 digits
(09 and AF). Table D-1 provides some examples of colors and their hex values; you will
understand hex codes shortly (in the Understanding Hex Codes section), after you see
what they represent.

552

Appendix DColor Names and Values

Table D-1: Common Hex Codes

Color

Hex adecimal Code

Black

#000000

White

#FFFFFF

Red

#FF0000

Green

#00FF00

Blue

#0000FF

Purple

#800080

The idea that colors are represented by a mix of numbers and letters might seem a little strange, but
what follows the # sign is actually the amount of red, green, and blue that makes up the color. The
format for hex codes is as follows:
#rrggbb

As you might already know, the screens on computer monitors consist of thousands of tiny squares
called pixels. (If you look closely at your monitor, you can see them.) When it is not turned on, the
screen is black because it does not emit any light. When it is turned on, a picture is created because
each pixel can be a different color. Every one of these colors is expressed in terms of a mix of red,
green, and blue (just like a television screen).
Its hardly surprising, therefore, that you specify colors in the amounts of red, green, and blue required
to make a given color. The values of red, green, and blue required to make a color are specified using
numbers between 0 and 255, so when red, green, and blue all have a value of 0, you get black, whereas
if each has a value of 255, you get white. If red is given a value of 255 and green and blue have a value
of 0, you get red. You can make other colors by mixing the amounts of red, green, and blue as well
for example, if red and blue are given values of 255 and blue a value of 0, you get pink.
You may have seen that some software represents colors using three sets of numbers between 0 and
255. Figure D-1 shows the color window in Adobe Photoshop.

FigureD-1

Understanding Hex Codes

553

The hexadecimal codes used on the web for color are a direct translation of these values between
0 and 255, except they use two characters, not three, to represent the numbers between 0 and 255.
For example, FF represents 255 and 00 represents 0.
When designing a site, you can use a tool such as Photoshop or a number of free resources on the
web to find hex codes for colors:

www.colorschemer.com

www.colourlovers.com/colors/add

However, if you want to understand how hex codes work, you need to understand how computers
store information, so read the following section.

Understanding Hex Codes

You may have heard people say that computers store all their information in 0s and 1s, and
although it may sound hard to believe, its true! The smallest unit of information a computer
stores in is known as a bit, and a bit can have only one of two values:

0, which means off (or false)

1, which means on (or true)

These two values on their own do not store much information, but if you combine 4 bits together,
you can get 16 different values. For example, using combinations of four 0s and 1s, you can represent
the digits 0 through 9 (and still have values to spare):
0000 0001 0010 0011 0100 0101 0110 0111 1000 1001 1010 1011 1100 1101 1110 1111
0
1
2
3
4
5
6
7
8
9
-

Four bits can be replaced by a single hexadecimal digit. There are 16 digits in hexadecimal numbers
to represent the 16 possible values of four 0s and 1s:
0000 0001 0010 0011 0100 0101 0110 0111 1000 1001 1010 1011 1100 1101 1110 1111
0
1
2
3
4
5
6
7
8
9
A
B
C
D
E
F

0 is the smallest; F is the largest.

Still, computers need to work with more than 16 possible values, so they tend to store information
in even larger segments. A group of 8 bits is known as a byte. A byte can therefore be represented
using just two hexadecimal digits, for example:
Binary
Hexadecimal

0100
4

1111
F

This gives 256 possible combinations of 0s and 1s (16 n 16), plenty for the characters of the English
language, which is why colors are represented in numbers between 0 and 255.

554

Appendix DColor Names and Values

So, although hexadecimal codes for web colors may appear a little complicated, #4F4F4F is a lot
easier to read than 010011110100111101001111. Table D-2 shows some more hexadecimal codes
and their corresponding decimal numbers.
Table D-2: Select Hex Codes and Their Corresponding Decimal Values
Hex adecimal

Decimal

00

33

51

66

102

99

153

AA

170

BB

187

CC

204

DD

221

EE

238

FF

255

Using Color Names to Specify Colors

Rather than using hex values to specify colors, you can also use the names of many colors such as
red, green, and white to specify the color you want. There are more than 200 different color names
supported by IE, Firefox, and Safari, all of which are listed at the end of this appendix.
Although names might sound a lot easier to understand than hex codes, some of the colors are easier
to remember than others, and remembering which color corresponds to each of the 200 names is
very difficult. Here is a sample of some of the color names:
aqua black blue fuchsia gray green lime maroon navy olive purple red silver
teal white yellow

Furthermore, if you do jobs for larger companies, such companies often want to specify exact colors
that represent their brand, and their color might not have an HTML name. Indeed, when clients
specify the color they want, they usually specify a hex code.
Because hex codes give you many more choices of shades, tints, and hues of colors than color names,
and because a lot of companies ask for specific colors to represent their company, hex codes tend to
be the choice of web professionals.

Color Name and Number Reference

Color Name and Number Reference

Table D-3 shows the color names supported by the main browsers and their corresponding hex
values. It is worth noting, however, that these are browser extensions, not part of the HTML
recommendation.
Table D-3: Color Names
Color Name

Hex Value

Aliceblue

#f0f8ff

Antiquewhite

#faebd7

Aqua

#00ffff

Aquamarine

#7fffd4

Azure

#f0ffff

Beige

#f5f5dc

Bisque

#ffe4c4

Black

#000000

Blanchedalmond

#ffebcd

Blue

#0000ff

Blueviolet

#8a2be2

Brown

#a52a2a

Burlywood

#deb887

Cadetblue

#5f9ea0

Chartreuse

#7fff00

Chocolate

#d2691e

Coral

#ff7f50

Cornflowerblue

#6495ed

Cornsilk

#fff8dc

Crimson

#dc143c

Cyan

#00ffff

Darkblue

#00008b

continues

555

556

Appendix DColor Names and Values

TableD-3 (continued)
Color Name

Hex Value

Darkcyan

#008b8b

Darkgoldenrod

#b8860b

Darkgray

#a9a9a9

Darkgreen

#006400

Darkkhaki

#bdb76b

Darkmagenta

#8b008b

Darkolivegreen

#556b2f

Darkorange

#ff8b04

Darkorchid

#9932cc

Darkred

#8b0000

Darksalmon

#e9967a

Darkseagreen

#8fbc8f

Darkslateblue

#483d8b

Darkslategray

#2f4f4f

Darkturquoise

#00ced1

Darkviolet

#9400d3

Deeppink

#ff1493

Deepskyblue

#00bfff

Dimgray

#696969

Dodgerblue

#1e90ff

Firebrick

#b22222

Floralwhite

#fffaf0

Forestgreen

#228b22

Fuchsia

#ff00ff

Gainsboro

#dcdcdc

Ghostwhite

#f8f8ff

Color Name and Number Reference

Gold

#ffd700

Goldenrod

#daa520

Gray

#808080

Green

#008000

Greenyellow

#adff2f

Honeydew

#f0fff0

Hotpink

#ff69b4

Indianred

#cd5c5c

Indigo

#4b0082

Ivory

#fffff0

Khaki

#f0e68c

Lavender

#e6e6fa

Lavenderblush

#fff0f5

Lawngreen

#7cfb04

Lemonchiffon

#fffacd

Lightblue

#add8e6

Lightcoral

#f08080

Lightcyan

#e0ffff

Lightgoldenrodyellow

#fafad2

Lightgreen

#90ee90

Lightgrey

#d3d3d3

Lightpink

#ffb6c1

Lightsalmon

#ffa07a

Lightseagreen

#20b2aa

Lightskyblue

#87cefa

Lightslategray

#778899

Lightsteelblue

#b0c4de

continues

557

558

Appendix DColor Names and Values

TableD-3 (continued)
Color Name

Hex Value

Lightyellow

#ffffe0

Lime

#00ff00

Limegreen

#32cd32

Linen

#faf0e6

Magenta

#ff00ff

Maroon

#800000

Mediumaquamarine

#66cdaa

Mediumblue

#0000cd

Mediumorchid

#ba55d3

Mediumpurple

#9370db

Mediumseagreen

#3cb371

Mediumslateblue

#7b68ee

Mediumspringgreen

#00fa9a

Mediumturquoise

#48d1cc

Mediumvioletred

#c71585

Midnightblue

#191970

Mintcream

#f5fffa

Mistyrose

#ffe4e1

Moccasin

#ffe4b5

Navajowhite

#ffdead

Navy

#000080

Oldlace

#fdf5e6

Olive

#808000

Olivedrab

#6b8e23

Orange

#ffa500

Orangered

#ff4500

Color Name and Number Reference

Orchid

#da70d6

Palegoldenrod

#eee8aa

Palegreen

#98fb98

Paleturquoise

#afeeee

Palevioletred

#db7093

Papayawhip

#ffefd5

Peachpuff

#ffdab9

Peru

#cd853f

Pink

#ffc0cb

Plum

#dda0dd

Powderblue

#b0e0e6

Purple

#800080

Red

#ff0000

Rosybrown

#bc8f8f

Royalblue

#4169e1

Saddlebrown

#8b4513

Salmon

#fa8072

Sandybrown

#f4a460

Seagreen

#2e8b57

Seashell

#fff5ee

Sienna

#a0522d

Silver

#c0c0c0

Skyblue

#87ceeb

Slateblue

#6a5acd

Slategray

#708090

Snow

#fffafa

Springgreen

#00ff7f

continues

559

560

Appendix DColor Names and Values

TableD-3 (continued)
Color Name

Hex Value

Steelblue

#4682b4

Tan

#d2b48c

Teal

#008080

Thistle

#d8bfd8

Tomato

#ff6347

Turquoise

#40e0d0

Violet

#ee82ee

Wheat

#f5deb3

White

#ffffff

Whitesmoke

#f5f5f5

Yellow

#ffff00

Yellowgreen

#9acd32

Character Encodings
Appendix D, Color Names and Values, discusses how computers store information, how
a character-encoding scheme is a table that translates between characters, and how they are
stored in the computer.
The most common character set (or character encoding) in use on computers is The American
Standard Code for Information Interchange (ASCII), which is probably the most widely used
character set for encoding text electronically. You can expect all computers browsing the web
to understand ASCII.
The problem with ASCII is that it supports only the uppercase and lowercase Latin alphabet, the numbers 09, and some extra characters: a total of 128 characters. Table E-1 lists
the printable characters of ASCII. (The other characters are things such as line feeds and
carriage-return characters.)
Table E-1: Printable Characters of ASCII

&

<

>

However, many languages use either accented Latin characters or completely different alphabets. ASCII does not address these characters, so you need to learn about character encodings
if you want to use any non-ASCII characters.

562

Appendix ECharacter Encodings

Character encodings are also important if you want to use symbols because these cannot be guaranteed to transfer properly between different encodings (from some dashes to some quotation mark
characters). If you do not indicate the character encoding the document is written in, some of the
special characters might not display.
The International Standards Organization created a range of character sets to deal with different
national characters. ISO-8859-1 is commonly used in Western versions of authoring tools such as
Adobe Dreamweaver, as well as applications such as WindowsNotepad, as shown in Table E-2.
Table E-2: ISO Character Sets
Character Set

Description

ISO-8859-1

Latin alphabet part 1

Covering North America, Western Europe, Latin America, the Caribbean,
Canada, and Africa

ISO-8859-2

Latin alphabet part 2

Covering Eastern Europe including Bosnian, Croatian, Czech, Hungarian,
Polish, Romanian, Serbian (in Latin transcription), Serbo-Croatian, Slovak,
Slovenian, Upper Sorbian, and Lower Sorbian

ISO-8859-3

Latin alphabet part 3

Covering SE Europe, Esperanto, Maltese, Turkish, and miscellaneous others

ISO-8859-4

Latin alphabet part 4

Covering Scandinavia/Baltics (and others not in ISO-8859-1)

ISO-8859-5

Latin/Cyrillic alphabet part 5

ISO-8859-6

Latin/Arabic alphabet part 6

ISO-8859-7

Latin/Greek alphabet part 7

ISO-8859-8

Latin/Hebrew alphabet part 8

ISO-8859-9

Latin 5 alphabet part 9 (same as ISO-8859-1 except Turkish characters

replace Icelandic ones)

ISO-8859-10

Latin 6 Lappish, Nordic, and Eskimo

ISO-8859-15

The same as ISO-8859-1 but with more characters added

ISO-8859-16

Latin 10
Covering SE Europe, Albanian, Croatian, Hungarian, Polish, Romanian and
Slovenian, plus can be used in French, German, Italian, and Irish Gaelic

ISO-2022-JP

Latin/Japanese alphabet part 1

ISO-2022-JP-2

Latin/Japanese alphabet part 2

ISO-2022-KR

Latin/Korean alphabet part 1

Character Encodings

563

It is helpful to note that the first 128 characters of ISO-8859-1 match those of ASCII, so you can
safely use those characters as you would in ASCII.
The Unicode Consortium was then set up to devise a way to show all characters of different languages,
rather than have these different, incompatible character codes for different languages.
Therefore, if you want to create documents that use characters from multiple character sets, you can
do so using the single Unicode character encodings. Furthermore, users can view documents written
in different character sets, providing their processor (and fonts) supports the Unicode standards, no
matter what platform they are on or which country they are in. By having the single-character encoding, you can reduce software development costs because the programs do not need to be designed to
support multiple character encodings.
One problem with Unicode is that a lot of older programs were written to support only 8-bit character
sets (limiting them to 256 characters), which is nowhere near the number required for all languages.
Unicode therefore specifies encodings that can deal with a string in special ways to make enough
space for the huge character set it encompasses. These are known as UTF-8, UTF-16, and UTF-32,
as shown in Table E-3.
Table E-3: Unicode Character Sets
Character Set

Description

UTF-8

A Unicode Translation Format that comes in 8-bit units. That is, it comes
in bytes. A character in UTF-8 can be from 1 to 4 bytes, making UTF-8 a
variable width.

UTF-16

A Unicode Translation Format that comes in 16-bit units. That is, it comes in
shorts. It can be 1 or 2 shorts, making UTF-16 a variable width.

UTF-32

A Unicode Translation Format that comes in 32-bit units. That is, it comes in
longs. It is a fixed-width format and is always 1 long in length.

The first 256 characters of Unicode character sets correspond to the 256 characters of ISO-8859-1.
By default, HTML 4 processors should support UTF-8, and XML processors are supposed to support
UTF-8 and UTF-16; therefore, all XHTML-compliant processors should also support UTF-16 (because
XHTML is an application of XML). The HTML5 specification is strongly biased toward UTF-8.
In practice you almost always want to use UTF-8.
For more information on internationalization and different character sets and encodings, see
www.i18nguy.com and the article The Absolute Minimum Every Software Developer Absolutely,
Positively Must Know about Unicode and Character Sets (No Excuses!) at www.joelonsoftware
.com/articles/Unicode.html.