Choosing Colors: Not So Black and White
By Heather Champ
You've just spent the past few weeks creating your own personal Internet Mona Lisa in Photoshop. You've played with the layers, and created those cool inline GIFs that will undoubtedly bring a host of admiring surfers to your door. You code in the image along with a sexy background color, then e-mail everybody to check out your creation. The phone rings, and to your dismay, dear Auntie in Topeka wonders why Mona looks like she has the measles along with the rest of the document.
How Many Colors?
With the advent of desktop publishing came a dilemma for designers: "I have 17 fonts, it would be a shame to waste them." Similarly, it could be said that even though your monitor may be able to display 16.7 million colors, not everyone visiting your site may be able to view them as well as you can. Although a GIF file uses 256 colors, the colors that your system chooses may not be the same 256 that others can see. And both Macintosh and Windows operating systems reserve a number of colors for their own internal use, further reducing the number of available colors.
The bottom line is that there are 216 colors that should display properly in a variety of browsers, including Netscape and Internet Explorer. Netscape's CLUT (Color Lookup Table) Palette (which you can download for the Mac from
Bruce Heavin's site
displays the 216 colors that Netscape has chosen for your viewing pleasure. If you use the CLUT palette when indexing, or as a swatch palette when creating your GIFs, you will reduce the possibility of speckling, or, in this case, Mona's "measles."
And why does your Auntie see measles? Unfortunately, she most likely doesn't have enough VRAM (Video RAM). You might consider mentioning to her that she should upgrade her system, but of course, it's difficult to have this conversation with everyone on the Web.
Color Theory 101
If you are going to take the time to choose colors that will display properly across a number of platforms and browsers, why not also think about what your use of color is saying about your site? Color sets the mood and tone, and it should generally complement the nature of the information being presented. Typically, if a designer/developer has selected a color other than the defaults, it's safe to say that in most instances the color will either be white or black.
White resembles the printed page, so
it's a good color to use if your page has a lot of text. The
internet.com site, and
Word use white backgrounds for their text-sensitive environments. Black, on the other hand, seems to have a seductive lure for many, as it's a wonderful background for images.
Legibility should be one of the first major considerations when choosing color. Is there enough contrast between the background, text, and links to make the differences discernible? If one is using a light background, the text and links should have enough hue and saturation. Conversely, if one is using a dark background, the colors should be light and bright enough to be legible.
And just because there are 216 colors doesn't mean that every one of them has to be used. Choosing two or three colors can create a very strong online identity. For example, the
Federal Express site, aside from being a technological marvel, has translated a very strong corporate identity to the Web, with its widely recognized purple and orange.
A basic color wheel consists of 12 colors. As you'll probably remember from grade school, the three primary colors are yellow, red, and blue. Secondary colors--orange, purple, and green--are created by mixing two primaries. The remaining six colors are tertiary and are created by mixing a primary and secondary color. Relationships between colors on the wheel are either complementary, analogous, or triadic.
Complementary colors are directly across the color wheel from one another. This direct opposition of color sets up a strong, bold dynamic, as the colors will resonate, especially if they are juxtaposed. Analogous colors are three adjacent colors, such as blue-violet, blue, and blue-green. Analogous compositions are harmonious because two of the colors contain the third.
Finally, triadic colors are those which are equidistant--such as red, yellow, and blue. Because of their relationship around the color wheel, triadic colors can be very balanced. The three primary colors are the best triadic grouping; by the time a color has become tertiary, the triadic can be quite jarring.
How Are Colors Specified
On the Web, you can specify colors exactly in two ways. The most straightforward is to use one of 16 widely understood color names (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow, which are the colors originally picked as being the standard 16 colors supported by the basic Windows palette). You can also use a six-digit hexadecimal number that represents an RGB (Red-Blue-Green) equivalent. There are tools (like Color Tools for the Mac, or Color Browser for the PC, available at http://maximized.com/freeware/clrbrwsr/) that will calculate hex code, but you still run the risk of dithering and speckles if the color you select is not one of the "magic" 216. The
RGB Hex Triplet Color Chart displays these 216 colors with their hex equivalents, and there's a chart at
http://www59.metronet.com/colors/ for online interaction.
We now have a way to ensure that our color will look good in the GIFs, background, text, and links, but how do we code HTML to include color? If you don't specify attributes within the <BODY> tag, HTML documents are drawn in the browser's default settings. Viewing such a plain-vanilla document with Netscape Navigator will produce a midtone gray background; black text; blue hyperlinks, visited links as purple; and links that appear red when opened. The document will draw the same way with Internet Explorer, with the exception of the visited link, which is green.
Color can be introduced into an HTML document with relative ease, using attributes within the <BODY>, <FONT>, and <TABLE> tags, by a hexadecimal color equivalent (use the RGB Hex Triplet Color Chart as your dictionary) or one of the 16 previously mentioned colors.
The <Bbody> Tag
The attributes for the <BODY> tag are:
- <TEXT>, which specifies the text throughout the document.
- LINK is a link that has not yet been followed.
- VLINK is a previously visited link.
- ALINK is a link that is currently being selected (Netscape only).
Combining the <BODY> tag and the attributes would create a tag such as this:
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#0000FF" ALINK="#0FF00">
In this example, the background is white, the text is black, links are red, visited links are blue, and active links are green. It's a good idea to develop the habit of referring to the RGB Hex Triplet Color Chart when you're picking colors or looking up their hex equivalents.
The <Font> Tag
If you want to have selections of text within the document a color other than that which you've universally specified with the "TEXT" attribute, add a COLOR attribute to your <FONT> tag:
<FONT COLOR="#FF00FF"> ... </FONT>
In this case, all the text within the tag would appear as a bright pink.
The <Table> Tag
Color can by introduced into a table by including a BGCOLOR attribute into a number of different common <TABLE> tags, such as:
<TABLE BGCOLOR="# FF00FF"> ... </TABLE>
To color table data:
<TD BGCOLOR="#FF00FF"> ... </TD>
To color a table header:
<TH BGCOLOR="#FF00FF"> ... </TH>
To color a table row:
<TR BGCOLOR="#FF00FF"> ... </TR>
The End Of The Rainbow
Do you want to use primary colors? Or complementary colors? A warm or cool palette? Few or many colors? The way you answer each of these questions will play a very significant role in determining the overall look and feel of a site. Perhaps it was easier when the Web was gray but who ever though that things were going to remain easy? -- WD
Heather Champ is an associate creative director with the Primary Group in New York City who also calls http://www.jezebel.com/ home.
Web Developer® Site Feedback
Web Developer®
Copyright © 2000 internet.com Corporation. All rights reserved.
