Essential foreknowledge
There are several sites on color theory on the Web, and I highly
recommend that you read them if you are going to be specifying color. A
simple page that gives a quick synopsis of color harmonies and a
very useful color wheel is Gary Quisumbing's An Introduction to Color Theory (you can click on this
link to open Gary's document in a separate browser window).
Another thing that you'll need to know about is the browser palette--a palette of 216 colors that is used by Netscape, Internet Explorer, and the other major browsers (you can download the color look-up table from Bruce Heavin's site). As any graphic designer will tell you, the colors that Netscape's system engineers chose for this palette are not the ones that designers would have chosen, but that objection aside, all 216 colors should be "safe" to use. That is, even if you only have an 8-bit (256-color) monitor, you should be able to see all of these colors without having them speckled with little spots.
Fig. 1: Netscape CLUT
Choosing colors
Ok, now we come to the (almost) completely subjective part. Using the
Netscape CLUT (Fig. 1) and the principles of complimentary harmony and light/dark contrast, we can come up with
several background and text combinations that are pleasing to the eye and
easy to read. There are literally thousands of possible combinations
(including white on black and black on white) from which to choose
depending on the mood you'd like to set, but Fig. 2 shows four combinations
that are functional.
 |
 |
|
 |
 |
Converting to hexadecimal
Once you've chosen your colors, you'll need to convert them to hexadecimal
code before inserting them in your <BODY> tag. But even before that,
you'll need to find out how much red, blue, and green each color has in it
(the maximum value for each color is 255). In Photoshop, you can easily
find out the RGB values for your colors by clicking on the foreground and
background color swatches in the toolbox, which brings up the Color Picker
dialog box.
We can see from Fig. 3b that the light orange-red has a Red value of 255, a Green value of 204, and a Blue value of 102. To convert to hexadecimal, we'll do several steps; at each step, if the value obtained is greater than 9, use the following conversion: 10=A, 11=B, 12=C, 13=D, 14=E, and 15=F. Ready? Here we go:
- Divide the Red value by 16.
255 / 16 = 15.9375
- The whole number (i.e., not the remainder) is the first digit of your
6-digit hexadecimal (so far we have #F _ _ _ _ _). Multiply it by 16.
15 * 16 = 240
- Subtract the result of Step 2 from the Red value.
255 - 240 = 15
The result of this subtraction is the second digit in your hexadecimal (#FF _ _ _ _ so far). As you can see, we also have our first shortcut: 255=FF, the maximum value for any color in hexadecimal format. - Repeat Steps 1-3 for the Green and Blue values.
204 / 16 = 12.75 12 * 16 = 192 204 - 192 = 12 (#FFCC _ _ so far)
102 / 16 = 6.375 6 * 16 = 96 102 - 96 = 6 (final result: #FFCC66)
These steps work for any RGB color, so you could theoretically set your background and text colors to any value you like. Remember, however, that if you deviate from the browser palette given above, users with 8-bit (or lower resolution) monitors will either see spots all over the background, or else a slightly different color than the one you intended.
If all this freedom of choice leaves your head swirling with numbers, letters, and calculations, you could use these string literals--colors defined by names like "bisque" and "azure"--instead. Of course, you'll have to trust Netscape to pick pleasing and workable colors. Good luck!
