Navigation Bar

Home - Guide Search Table of Contents

Introduction

Site Structure

Navigation

Page Layout

Color

Formatting Text

Images

Multimedia

HTML Code

Bibliography

Color

Background Colors, Images and Textures

When choosing a background for Web pages, keep in mind that ease of reading the textual content of the page is most important. Black text on a white background is what we are most familiar with and it provides the best contrast for reading. The white of a computer monitor, however, is harsher than white paper and may cause eye strain after prolonged reading. A white background can be toned down by using a very light gray or pastel color. When a colored background is desired, consider your overall color scheme. Avoid bright primary colors—very pale or muted colors, especially cool colors and natural/earth tones are good choices for backgrounds. Be sure to provide a good contrast between the text and the background.

Keep background images and textures (added as background images) very subtle. The background should not be distracting or compete for attention with the text and other important page elements. Use very fine homogeneous textures for backgrounds. As much as possible, limit the number of colors in background images and keep the image and file size small.

Web page backgrounds are defined in the body element. To specify a background color use:

<body bgcolor="…">

To specify an image used to tile the page background use:

<body background="…">

Color Scheme

Color adds visual impact to Web pages. Aside from the photographs and illustrations used, your site will probably contain a number of other frequently occurring elements that may use color to add visual interest, attract and direct attention, and enhance meaning. Using a representative sample of the content and the page layout, devise a color scheme to be used for the background, text, links, bullets, horizontal and vertical rules, navigation aids, and icons.

Use color consistently to help create a unified look throughout the site. Avoid using too many colors—the result may be more distracting than attractive. By minimizing the use of color you will maximize its impact. Be sure that the minor elements do not compete with, or demand more visual attention than, the text and major page elements.

The body element allows you to specify the color for the following:

  • the page background (bgcolor)
  • the main text font (text)
  • the unvisited hypertext links (link)
  • the visited hypertext links (vlink)
  • the highlight color of hypertext links at the moment the user clicks on the link (alink)

If you choose to change the default link colors, consider red for the unvisited links. Red is attention getting and is suitable for most any colored background. Use blue, a "cool" color for visited links on a white background. On colored backgrounds, select a "cool" or dark color that works best with the background.

The font element allows you to specify a color for a selected word or piece of text.

This text will <font color="#0000FF">appear blue.</font>
(where #0000FF is the RGB color value for blue)

The font tag requires a start and end code.

Table 1: Colors and their RGB Color Value

 

Black

#000000

 

Maroon

#800000

 

Red

#FF0000

 

Green

#008000

 

Lime

#00FF00

 

Navy

#000080

 

Blue

#0000FF

 

Olive

#808000

 

Aqua

#00FFFF

 

Purple

#800080

 

Fuchsia

#FF00FF

 

Teal

#008080

 

Yellow

#FFFF00

 

Gray

#808080

 

White

#FFFFFF

 

Silver

#C0C0C0

Top of Page

Navigation Bar
Site Logo