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;

If you want to avoid hexadecimal format altogether you can always stick to the 16 "named" colors; for your reference, the complete list is below.