Designing Web Pages with Web Safe Colors, Part 1

I consider Web page creation to be, primarily, a visual art. When you
design a Web page, you create a visual interface for an audience to
view and probably to use. Even a primarily text-based site requires
that you consider design questions, as well as background and text
colors. As you can easily see after doing some surfing, most Web sites
incorporate visual elements too (photos or graphics).

Choosing the background, text, and graphics colors of your page can be
tricky. Depending on the kind of a site you're designing and your
target audience, a wide range of options present themselves. Whether
you're designing something for the Central Intelligence Agency or a
portal for 17-year old videogame-heads, you'll want to use colors that
create a pleasing visual experience and that will appear reliably the
same to most of your audience, regardless of their computer (Mac or
Windows), monitor, or browser (Netscape, Internet Explorer, or Opera).

The Web Palette provides the safest and easiest way to ensure that your
page's colors appear the same. The Web Palette is the 216 Web-safe
colors that are supported by all browsers, on all computers, as long as
your audience's monitors are capable of displaying that many colors
(and they most probably do).

Why 216?
Six shades of red, six shades of green, and six shades of blue are
recognized by the Web Palette. The palette mixes these shades in all
possible combinations, and 6 x 6 x 6 = 216. These colors are usually
referred to by their hexadecimal values when using them in a Web page.
A complete lists of these 216 colors and their hex values can be
obtained from quite a few places on the Web. Two of my favorites are
http://webdesigns2000.com/216colors.htm and http://eons.org/content.asp?
LinkID=122&CatID=146&content=1.

Web Designs 2000 gives all 216 colors, their hexadecimal values, and a
small square displaying each color. What makes this page really handy
is that you can save the graphic with all the colors on it to your hard
drive. Later, when creating graphics in Photoshop for instance, you can
simply open this file and sample the Web-safe colors to use for your
graphic. I shrunk it down and printed it out for reference. Neat, huh?
Note: Newer versions of Photoshop include Web-safe palettes.

Eons offers 136 Web-safe colors, a long swatch of each color, as well
as the color name. Most browsers support using a color name instead of
a hexadecimal value for the color.

If you wanted the background of your page to be blue, then your BODY
tag could look like this:

<.BODY BGCOLOR = #0000FF>

0000FF is the hexadecimal value for the color blue.

Or, you could do it this way:

<.BODY BGCOLOR = blue>

Browsers will simply recognize the color name. The only problem with
this is that some of the color names get quite long. For
instance, "mediumspringgreen" is a recognized color name for most Web
browsers in their current versions. It's easier to look up the hex
value.

Next week, I'll discuss more about Web-safe colors! Take a look at the
Web sites I've listed and have a great week!