This browser does not support basic Web standards, preventing the display of our site's intended design. May we suggest that you upgrade your browser?

HTML Coding

Colors and Backgrounds

Note: The HTML pages are out-of-date and will not be updated.

Colors and backgrounds can add a lot of pizzazz to your documents. While not all Web browsers are capable of displaying color and background codes, in most cases those browsers will simply disregard the codes, causing no ill effects. Keep in mind, however, that color enhancements may produce undesirable results when seen on low resolution or black and white monitors. Be aware, also, that color blind users will be unable to decipher pages with certain color combinations. More extensive testing is required when you use these codes to ensure that the documents look good from all views. But this may be a small price to pay for a livelier appearance of your Web documents!

Those warnings aside, the purpose of this guide is to describe the HTML tag attributes that work with the <BODY>, <FONT>, and <TABLE> tags and allow you to alter the color of your text, links and backgrounds.

return to topDefinitions

For an example of the below attributes as they are used in your document, see the Syntax section.

Color Attributes used with the <BODY> Tag

Attribute Description
BGCOLOR Applies a solid background color behind the text of your page
TEXT The color of your text
LINK The color of a link before you visit it
VLINK The color of a link after you visit it (Visited Link)
ALINK The split-second color of a link when you select it (Active Link)
BACKGROUND A graphical background created by tiling an image of your choice across the screen

return to topColor Names and Numbers

To represent a color we need to use either the color name or the hexadecimal numeric equivalent. Beginning with Netscape 2.0 and Internet Explorer 3.0, we can use the following color names:

Color Names

AQUA BLACK BLUE FUCHSIA
GRAY GREEN LIME MAROON
NAVY OLIVE PURPLE RED
SILVER TEAL WHITE YELLOW

Be aware, however, that color names are not universal. Netscape 2.0 and Internet Explorer 3.0 should read the color names above, but other browsers (especially older browsers) may not be able to. A more encompassing method to represent color is to use the hexadecimal numeric equivalent. For example, the hex number for blue is 0000FF. Use the pound sign (#) with the hex number enclosed in quotes (e.g., "#0000FF").

Below are some commonly used color numbers.

Hexadecimal Color Numbers

Color Code
Black "#000000"
Blue "#0000FF"
White "#FFFFFF"
Red "#FF0000"
Green "#00FF00"
Magenta "#FF00FF"
Yellow "#FFFF00"

return to topSyntax

Here is a simple example page of the color and background attributes at work with the <BODY> tag:

<HTML>

<HEAD>
<TITLE>Expressing Yourself With Color</TITLE>
</HEAD>

<BODY BGCOLOR="#000000" TEXT="#FFFF00" LINK="#FF0000" VLINK="#FFFFFF" ALINK="#00FF00" BACKGROUND="path/filename" >

<H1>Expressing Yourself With Color</H1>

In this example, the background is black and the text is yellow. Links are red, visited links are white but turn green when first selected.

</BODY>
</HTML>

The color and background attributes above control background, text and link colors for the entire document. Note that you can use one or all of the attributes within the <BODY> tag. The order they are listed in is not important. Note that hexadecimal color numbers were used instead of color names. When using color names, you would replace the hexadecimal number with the color name of your choice (no pound sign, no quotes). The following example shows color and and background choices specified with color names, rather than numbers:

<BODY BGCOLOR=BLACK TEXT=YELLOW LINK=RED VLINK=WHITE ALINK=GREEN BACKGROUND="path/filename">

Notice the BACKGROUND command used in each of the above examples. This command is used when you want to use an image from a graphic file, rather than a color name or number, for your background. The phrase "path/filename" refers to the background image you choose. You must insert the folder or directory path and filename for your background between the quotes after the background command. The BACKGROUND attribute will be explained in more detail in the next section.

Color Code Resource

For a quick reference on color codes syntax, refer to the HTML Codes for Colors and Backgrounds page.

return to topBackgrounds

With the BGCOLOR command, you select a color name or hexadecimal numeric equivalent to choose a background color for your document. This is different from the BACKGROUND attribute, which tiles an image across your screen and then lays text over it. If you use the BACKGROUND attribute, you should choose your background carefully; a small file size will help ensure faster loading. As you select the background, you also want to be aware of how it affects the readability of your information.

Using the Background Attribute Code

The BACKGROUND attribute is used within the BODY command. An example of the coding for the BACKGROUND attribute is provided below:

<BODY BACKGROUND="path/filename">

The file name or location of the background color or graphic is inserted as the path/filename.

WARNING: Even if you use the BACKGROUND attribute to access an image for your background, you may still want to specify a BGCOLOR. Some users may turn Auto Load Images off, in which case no background image will be loaded. If you have not specified a BGCOLOR, your text colors will also be ignored. The computer does this as a preventative measure; without a background, certain text colors may become unreadable. However, if you specify a comparable BGCOLOR and Auto Load Images is off, you can still maintain the color scheme you developed for the page.

Creating a Background Image

There are two ways to create a background image for your document: saving a background graphic from a color resource site and creating your own background in a graphics program.

Using a Background Graphic From a Color Resource Site

There are several internet sites that provide colors and backgrounds you can use in your web documents. Sites are listed in the section Color Resources. Most of these graphics can be used for free, but be sure to check for any restrictions on use. To access graphics from a resource site,

  1. Connect to the site and find a swatch you like

  2. Point to the swatch you want

  3. Macintosh users, click and hold the mouse button
    Windows users, click the right mouse button

  4. Select Save this Image As. . .

  5. In the dialog box that appears, adjust the location to reflect where you want to save the document

  6. If necessary, adjust the filename

  7. Click SAVE

Creating Your Own Background

You can also create your own solid or patterned background in a graphics program. There are two reasons you might choose this option:

To work around dithered colors or to create your own background pattern, use a graphics program (e.g., Photoshop) to create a small square of the color or pattern you want. Then insert the appropriate filename within Netscape's background command within the body, like so:

<BODY BACKGROUND="blugreen.gif">

return to topOther Color Control Tags

The color attributes described so far control background, text, and link colors within the <BODY> tag. These attributes are therefore applied to the entire document. Netscape 2.0 and later and Internet Explorer 3.0 browsers also allow you to control font color for words or phrases with the <FONT> tag, substituting either the color name or hexadecimal number for "color," like this:

You can also use the <BGCOLOR> tag within Tables (the Color Names & Numbers and the Hexadecimal Color Number tables are examples of using color within the table codes.:

return to topColor and Background Resources

return to topTips

Excellence. Our Measure. Our Motto. Our Goal.