CSS colors

for quick results, use the named colors

When the World Wide Web Consortium finalized the standard for Cascading Style Sheets, they
included 16 named colors. These colors were previously defined in HTML
and correspond to the 16 VGA colors on a PC. It is worth
memorizing them because in most case, when designing a simple web page you are unlikely to need
any others. Here are the 16 colors, together with their RGB hexadecimal
values:

black

#000000

silver

#C0C0C0

gray

#808080

white

#FFFFFF

maroon

#800000

red

#FF0000

purple

#800080

fuchsia

#FF00FF

green

#000800

lime

#00FF00

olive

#808000

yellow

#FFFF00

navy

#000080

blue

#0000FF

teal

#008080

aqua

#00FFFF

Certain browsers support many other named colors, but because these do not adhere to
the specification they should be avoided and the full, hexadecimal value used instead. So,
to apply color to an element, you might do something a bit like this:

h1.disgusting {
background-color: lime;
color: red;
}

Below are the awful style rules in action:

This is hideous

the 216-color palette

Beyond the 16 named colors is the so-called browser-safe palette. Most computers
can now display thousands, or even millions of colors. Older computers and other devices such
as cellular phones may not support so many colors. Almost all of these devices will support 256
colors. When trying to display something that is not one of these special colors, a device will
often resort to some sort of mix between two colors that approximate the one specified. You get
a kind of "speckled" effect called dithering that is rather unpleasant.
By using the 216 colors of the browser-safe palette, you can eliminate this effect. The reason
there are 216 available colors and not 256 is that the major operating systems reserve the
remaining colors for their own use, but not the same colors.

The 216-color palette uses 6, evenly-spaced graduations of red, green and blue and their
combinations. The colors are created from red, green and blue that have been restricted to the
hexadecimal values of 00, 33, 66, 99, cc and ff.

FFFFFF

FFFFCC

FFFF99

FFFF66

FFFF33

FFFF00

CCFFFF

CCFFCC

CCFF99

CCFF66

CCFF33

CCFF00

99FFFF

99FFCC

99FF99

99FF66

99FF33

99FF00

66FFFF

66FFCC

66FF99

66FF66

66FF33

66FF00

33FFFF

33FFCC

33FF99

33FF66

33FF33

33FF00

00FFFF

00FFCC

00FF99

00FF66

00FF33

00FF00

FFCCFF

FFCCCC

FFCC99

FFCC66

FFCC33

FFCC00

CCCCFF

CCCCCC

CCCC99

CCCC66

CCCC33

CCCC00

99CCFF

99CCCC

99CC99

99CC66

99CC33

99CC00

66CCFF

66CCCC

66CC99

66CC66

66CC33

66CC00

33CCFF

33CCCC

33CC99

33CC66

33CC33

33CC00

00CCFF

00CCCC

00CC99

00CC66

00CC33

00CC00

FF99FF

FF99CC

FF9999

FF9966

FF9933

FF9900

CC99FF

CC99CC

CC9999

CC9966

CC9933

CC9900

9999FF

9999CC

999999

999966

999933

999900

6699FF

6699CC

669999

669966

669933

669900

3399FF

3399CC

339999

339966

339933

339900

0099FF

0099CC

009999

009966

009933

009900

FF66FF

FF66CC

FF6699

FF6666

FF6633

FF6600

CC66FF

CC66CC

CC6699

CC6666

CC6633

CC6600

9966FF

9966CC

996699

996666

996633

996600

6666FF

6666CC

666699

666666

666633

666600

3366FF

3366CC

336699

336666

336633

336600

0066FF

0066CC

006699

006666

006633

006600

FF33FF

FF33CC

FF3399

FF3366

FF3333

FF3300

CC33FF

CC33CC

CC3399

CC3366

CC3333

CC3300

9933FF

9933CC

993399

993366

993333

993300

6633FF

6633CC

663399

663366

663333

663300

3333FF

3333CC

333399

333366

333333

333300

0033FF

0033CC

003399

003366

003333

003300

FF00FF

FF00CC

FF0099

FF0066

FF0033

FF0000

CC00FF

CC00CC

CC0099

CC0066

CC0033

CC0000

9900FF

9900CC

990099

990066

990033

990000

6600FF

6600CC

660099

660066

660033

660000

3300FF

3300CC

330099

330066

330033

330000

0000FF

0000CC

000099

000066

000033

000000

You can specify hexadecimal values in shorthand. For example, the
color #6633CC can be written
as #63C instead. It is also perfectly
okay to specify the hexadecimal letters in lowercase, so it would be
#63c instead. I would actually recommend
this in case it becomes important with future, case-sensitive versions of CSS.

information resource

The section on colors in the Cascading Style Sheet
specification goes into greater detail about ways you can specify colors in a style sheet.
Visibone specializes in
supplying color tools and charts. Visicheck has a useful tool for checking to see if images
on your website are posing problems for people with forms of color-blindness. Thank you for reading.