Create an account
Login





18.9 Mb

Twitter Facebook Google Livejournal Pinterest

Exploring color/how to use and control color in your


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.

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 create a specific pattern or design, or

  • To avoid the dithering effect some browsers have on certain colors. (Dithering is the positioning of different colored pixels close together to create the illusion of a color the screen cannot produce. The result may be a spotty effect.)

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:

  • <FONT COLOR=color> This text will be colored </FONT>

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.:

  • <TABLE BGCOLOR=color>This will color the background of the entire table</TABLE>

  • <TR BGCOLOR=color>
    <TD>This will color the background of the entire row</TD>
    </TR>

  • <TD BGCOLOR=color>This will color the background within this cell only</TD>

return to topColor and Background Resources

  • Browser Safe Colors (http://www.lynda.com/hexh.html)
    If you find that some of your colors are muddied up with dots and x's, it may be because they are dithered. Check this site for a listing of non-dithering colors.

  • ColorMaker (http://www.bagism.com/colormaker/)
    ColorMaker is a wonderful site that allows you to select colors and backgrounds and instantly test your choices for online harmony! You may want to test your colors here.

  • ColorServe Java (http://www.unipa.com.tr/calis/uni/bilge/colorServe/csapplet.html) Here is another super site--similar to ColorMaker--that allows you to select colors and backgrounds from color wheels for testing.

  • Colors on the Web (http://www.colorsontheweb.com/colorwizard.asp)
    An incredible resource for selecting and using color on your website. Be sure to try the Color Wizard.

  • HTML Color Selector (http://www.imagitek.com/bcs.html)
    Similar to ColorMaker, this site allows you to preview different color and background choices on screen.

return to topTips

  • With the latest version of Netscape, a background image loads AFTER text and inline images, thus seemingly speeding up the loading process.

  • Setting up colors and backgrounds is done once for the entire document; you cannot change these controls for part of a page. There are two exceptions: you can override your initial choices for isolated sections of the document by specifying text color or by using color attributes within table commands.

  • Color blind or color deficient users will find color combinations difficult to read if they are similar in hue, saturation, or lightness. Choose colors which are different in at least two of these three categories.

Excellence. Our Measure. Our Motto. Our Goal.

Link for your site (HTML):

Link for your forum (BBCode):