by Wendy Connick

Created on: April 01, 2009

Matching your website's color to, say, your chosen banner image can make a big difference in the site's appearance. If your colors don't quite match it can have a pretty jarring effect on viewers. So how do you make sure that the colors are right and that they stay right for all of your visitors?

You can use HTML and CSS to define your colors using hexadecimal codes. Hexadecimal is a base 16 numbering system. What does that mean? Well, everyday numbers are set in base 10, which means that to count to ten we use the numbers one through nine and then 10. Computers use base two, which mean your computer counts through the following sequence: 1, 2, 10, 11, 12, 100 it only uses the digits zero, one and two to express a number. Base 16 is the opposite; it uses more digits than base 10, so the numbers above nine are represented with the letters a through f. So counting to ten in a hexadecimal sequence is: 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f, 10!

Fortunately you don't have to get familiar with base 16 to use hexadecimal color codes. A hexadecimal color code, or web color code, uses a six-digit "number" to describe a specific shade to your computer. The codes run from #000000 (black) to #ffffff (white).

During the early days of web design, we were cautioned to stick to the 256 "web-safe" colors that would display accurately on all monitors. Nowadays monitors are capable of distinguishing between 16 million different shades, so you can use pretty much any color you can imagine.

To set a background color with hexadecimal code in CSS, use the following format (this one happens to be a dark blue shade):

background-color: #003366;

Studies have shown that the color combination that is easiest for human eyes is black text on a white background. Of course, this can get pretty dull and it may or may not work with your site's color palette. Often you'll need to compromise between design and legibility.

Try to avoid a lot of light text on dark background it gets very difficult to read after awhile. If you feel you must use a dark background, then choose a font size that's a little bigger so that it's easier on the eyes. Bright colors like red, blue and yellow are best reserved for header text where you'll really want to draw the reader's eyes. In general, you'll want to stick to neutrals like black, white and gray for your site's body text. It's also best to use a background color that's much lighter or darker than your text; black text on white and white text on black are the obvious examples. You should also avoid putting red text on a gray background or vice versa, since inability to distinguish red is the most common form of color blindness.

Learn more about this author, Wendy Connick.
Click here to send this author comments or questions.