Sams Teach Yourself HTML 4 in 24 Hours

Sams Teach Yourself HTML 4 in 24 Hours

By Dick Oliver

Creating Custom Colors

If the 16 named colors don't include the exact hue you're after, you can mix your own custom colors by specifying how much red, green, and blue light should be mixed into each color.

The format is # rrggbb where rr,gg, and bb are two-digit hexadecimal values for the red, green, and blue components of the color. If you're not familiar with hexadecimal numbers, don't sweat it. Just remember that ff is the maximum and 00 is the minimum, and use one of the following codes for each component:

For example, bright red is #ff0000, dark green is #003300, bluish-purple is #660099, and medium-gray is #999999. To make a page with a red background, dark green text, and bluish-purple links that turn white when you click them and gray when you've visited them, the HTML would look like the following:

<body bgcolor="#ff0000" text="#003300" link="#660099" alink="#ffffff"
vlink="#999999">

Though the colors you specify in the <body> tag apply to all text on the page, you can also use either color names or hexadecimal color codes to change the color of a particular word or section of text by using the <font> tag. This is discussed in Hour 6, "Text Formatting and Font Control."

TIP

For a very handy chart showing the 216 most commonly used hexadecimal color codes, along with the colors they create, go to http://24hourHTMLcafe.com/colors.

You can then choose any of the standard 16 text colors to see how each of them looks over every color in the table.

Keep in mind that even though you can specify millions of different colors, some computers are set to display only the 16 named colors. Other computers only reliably display the 216 colors in the color code reference mentioned in the previous tip. All others will be approximated by dithered patterns, which can make text look messy and difficult to read.

Also, you should be aware that different computer monitors may display colors in very different hues. I recently designed a page with a beautiful blue background for a company I work for, only to find out later that the president of the company saw it on his computer as a lovely purple background! Neutral, earth-tone colors such as medium gray, tan, and ivory can lead to even more unpredictable results on many computer monitors, and may even seem to change color on one monitor depending on lighting conditions in the room and the time of day.

The moral of the story: Stick to the named colors and don't waste time mucking with hexadecimal color codes, unless you have precise control over your intended audience's computer displays—and to be safe, do test your page on different monitors if possible.

TIP

You can set the color of an individual link to a different color than the rest by putting a <font> tag with a color attribute after the <a href>. (Also include a </font> tag before the </a> tag.) For example, the following would make a green link:

Visit the <a href="thumb.htm"><font color="green">Green
Thumb page</font></a> to become a better gardener.

However, older versions of some browsers (including Microsoft Internet Explorer 3) will always display all links with the colors set in the <body> tag. Very old browsers may completely ignore some or all of your color specifications.

Share ThisShare This

Informit Network