Working with Color on the Web

Exerted from our Essentials of Web Page Development book...

You can control the color of the background, text, and the links within Web pages. Colors are included as attributes of the Body start tag. Here are the page color attributes and what they control:

BGCOLOR= controls the background color
TEXT= changes the color of the text on the page
LINK= changes the color of the link before it is clicked
ALINK= changes the color of the link when it is clicked (Active Link)
VLINK= changes the color of the link after it has been clicked (Visited Link)

You can add color using one of two methods. The easiest way is to use the word that describes the color you want (BGCOLOR="black"). However, few colors (and their variations) can be included with this method. They include white, black, silver, gray, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, and aqua. (Older browsers do not recognize named colors.)

Hexadecimal Color

The second, and most common, way of using color on a Web page is to use the hexadecimal triplet code. The advantage of hexadecimal color is it allows more combinations than the named colors.

There are 16 possible Hexadecimal color values, and they can be mixed and matched to create just about any color you can imagine. The values are the numbers 0-9 and the letters A-F (0 is the lowest value and F is the highest).
On a computer monitor, color is created by combining red, green, and blue (RGB) light.

To create black, the lowest end of the color scale, you use a value of zero for red, green, and blue.

The highest end of the color scale is white, which is represented by turning red, green and blue all the way on. The hexadecimal code for white is six F’s (FFFFFF). As you approach zero, your colors will get darker. As you approach F, they get brighter.

You can think of hexadecimal colors as a dimmer switch in your home. If you turn the switch all the way on (FFFFFF), you’d get bright white light. If you turn the switch all the way off (000000), you’d get black.

If you wanted the background color of your web page to be black, and the text white, you’d use the following tag: <BODY BGCOLOR="#000000" TEXT="#FFFFFF">.

Here’s a way to remember how the hex color codes work in Web pages: <BODY [ATTRIBUTE]="#RRGGBB"> where RR= the red value, GG= the green value, and BB= the blue value.

If you wanted to use bright green for your links, you’d use the body attribute LINK=. Bright green can be created in an RGB color model by turning the green value full on and using no red or blue. The hexadecimal code for bright green is 00FF00. The entire tag would look like this: <BODY LINK="#00FF00">.

For more information about working with Hexadecimal color values, we've included this link to a handy chart that will help you select Hexadecimal colors.