Abstract. Web archive 2008

Using Color Harmoniously on Your Web Site

When many people first start building their Web pages, they create pages in colors that they like. If you’re lucky or have a good eye, you’ll end up with colors that look nice together. But it’s very easy to set up a color scheme that clashes and is difficult for your readers to view for long periods or at all.

Understanding color theory will help you to understand how color works on Web pages. And one of the first places to start learning color theory is with the color wheel. Sir Isaac Newton first put together a circular diagram of colors in 1666. This color wheel allows you to see groupings of colors that are harmonious together and other colors that might clash.

Primary Colors

The primary colors (represented in the related image) are RED, YELLOW, and BLUE.

This is a nice one. You can also use the standard calculators on Windows or Macintosh computers:
How to on Macintosh
How to on Windows

• Red #ff0000
• Green #00ff00
• Blue #0000ff
• White #ffffff
• Black #000000

Combine your three RGB numbers into a six digit hexadecimal number preceded by a pound-sign (#).

What Items Can You Color?

In Web design, nearly everything has a color from the images you post on the page to the background of the page to the actual text on the page. But for the purposes of this article, we’re going to talk about two primary items:

• text - the color of the letters
• backgrounds

It’s easy to change the color of text, simply use the style property, color:
color : #ffcc66;
More on the color property.

Backgrounds are just as easy with the style property background-color:
background-color : #ffcc66;
More on the background-color property.

But backgrounds are tricky because you must ask “The background of what?”. There are many things you can change the background color to, such as:

• change the text color background:
  Use the style property on a span, div, or p element.
• change a table background:
  Use the style property on a td, th, tr, or table element.
• change the entire page’s background:
  Use the style property on the body element.

Using color is vital for Web pages. And these hints and instructions should help you to use color as effectively as possible.

see more…