Document Colors

Contents:

Document Colors
- Colors Safe for Web Pages
- Some Color Tips
Background Images

Document Colors

There are five colors of the document you can define. They are attributes of the BODY element. They are:

BGCOLOR - the background color of the document
TEXT - the color of the text
LINK - the color of link to an unvisited document
VLINK - the color of link to a visited document
ALINK - the color of link as it's being selected (active)

These colors are defined using RGB hexadecimal triplets. What this means in English is that for each color, you tell how much Red, Green and Blue you want. So, white is red all the way on, green all the way on, and blue all the way on. Yellow is red all the way on, green all the way on, and blue all the way off.

Now for the tricky part. "Hexadecimal triplets" means that you define how much Red, Green and Blue to use with two-digit hexadecimal numbers. (Don't worry, this gets easier... eventually.) Instead of the ten digits 0-9, as is used for decimal numbers, hexadecimal uses 16 digits: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. The highest 2 digit hexadecimal number is FF, or 255. FF, therefore, means "all the way on." The lowest number is 00, so 00 means "all the way off." So, white is defined as FFFFFF - Red at FF, Green at FF and Blue at FF. Yellow is FFFF00 - Red at FF, Green at FF and Blue at 00. To top it all off, we put a hash mark (#) in front of the number, to tell the browser that this is RGB hexadecimal triplet, e.g. #FFFF00.

Well, that's fine and dandy for the mathematicians among us, but sometimes we just want an easy answer. There are two easy ways to get colors for your page. The first one is to view this table of Web-safe colors. The second easy way is to use color name. Here are the 16 most widely supported names. However, hexadecimal numbers are more widely supported than names.

black	green	silver	lime
gray	olive	white	yellow
maroon	navy	red	blue
purple	teal	fuchsia	aqua

Here is an example of a BODY tag with the color attributes:
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#990099" ALINK="#FF0000"> The background is white, text is black, unvisited links are blue, visited links are purple, and active links are red.

Top of This Page

Some Color Tips

Make sure your background color contrasts sharply from your other colors. Light gray text on a dark gray background would be bad. Also make sure your colors don't hurt to look at. Fuschia text on a yellow background would probably hurt. Also, readers can get confused if you make the LINK color and VLINK color the same. They won't be able to tell which links they have or have not followed.

Most importantly, if you define one of these colors, define them all. Remember, you're not forcing these colors, you're just saying, "Hey, these are the colors I'd like you to see." Guests always have the power to choose their own browser colors. Now, a problem occurs when the HTML author only defines one color. Let's imagine that a reader has her browser set up with yellow text, white links, and a black background. If you define your page to have a white background, but nothing else, when this reader comes to your page, all of your links will have disappeared on her browser, and the text will be very hard to read. Why? Your page has a white background, but she's still using yellow text and white links! Oops. If she takes the time, she can turn on "Override Document Colors," or she can just leave, thinking "What a useless page" or "What a clueless author." ;)

Top of This Page

Background Images

Another attribute of the BODY element is BACKGROUND. You can use this to giveyour page a background image. Here is an example of its use:
<BODY BACKGROUND="flowers.gif">
The background image will be "tiled," that is, it will be repeated to fill the entire background of your page. If the reader has images turned off, the browser will display the background color, if defined, or the browser's default background color.

Make sure the image you use is light or dark enough to contrast with the text and link colors. Also, make sure the graphic isn't too "busy," or people will have a hard time reading what you have to say. Also keep the size of the graphic file under about 5 kilobytes. Files bigger than that can cause an appreciable delay.