by Peter Messerschmidt

Created on: April 05, 2007   Last Updated: April 09, 2007

There is much more to using color successfully in web design than merely deciding that some color combination "looks pretty." Color allows you to create a "mood" and "image" for your site, just by knowing a few very basic aspects of color theory, as well as the elements of your page you can control.

When considering "color" on the web, most people tend to think of photos and graphics- however, possibly the most significant color impact comes from two things that can be controlled with basic HTML: The foreground (i.e. font/text) and the background (the basic page color, as well as use of color blocks and lines).

Colors and color combinations can not only send a "message" about the site- whether it's "artistic," or "business-like," or "fun," or "serious"- it also directly affects readability. After more than a decade of working with web usability, I have seen many a well-designed web site more or less rendered useless through the use of colors that made it all but illegible.

Color on computers (and on the web) are defined by HUE, SATURATION and BRIGHTNESS.

"Hue" refers to the actual color we see, like "red" or "blue." Although most modern computers can display all the 16.7 million colors in the RGB color space, many web designers still stick to the principle of using only the 216 "browser-safe" colors you can be CERTAIN will display the same way on all computers. In the most basic sense, color works as a set of "instructions" a web site sends to a computer- and if the computer doesn't understand the instructions for displaying a color, it will make a "best guess." The technical term for this is "dithering," and it CAN produce results that are quite different from what you intended.

So what is "RGB?" Literally, it is red, green and blue. On most computers, every pixel (or dot) on your screen can display a combination of 256 intensities of red, green and blue. When pixels are all turned to their highest intensity, you see white. When they are all turned "off," you see black.

"Saturation" refers to the purity of a color. A "fully saturated" color means the color is the most pure it can be. When a color has "low saturation" it means that much of the intensity has been removed and the color appears "washed out."

"Brightness" is fairly self-explanatory, and basically refers to the brilliance of the color- usually it is measured as a percentage, where 100% means full brilliance.

So how do we best USE color, in web design? The field of Web Usability (Usability is the practice

• 1
• 2
• Next Page >>