Description: Exploring color/how to use and control color in your
File name: Exploring color/how to use and control color in your
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.
For an example of the below attributes as they are used in your document, see the Syntax section.
Color Attributes used with the <BODY> TagAttribute Description
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:
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").
Hexadecimal Color NumbersColor Code Black"#000000" Blue"#0000FF" White "#FFFFFF" Red"#FF0000" Green"#00FF00" Magenta"#FF00FF" Yellow"#FFFF00"
Here is a simple example page of the color and background attributes at work with the <BODY> tag:
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:
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.
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:
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,
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:
Other 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.:
Color and Background Resources