Stunk's Site-maker's Guide

Colors on the Web

Color is one of the most powerful tools available to a Web designer. A good color selection can make all the difference between a site that's memorable, and one that's easily forgetable. That explains why so many different people have written about it, and why there are so many different opinions about what should or should not be done when designing a Web site.

When all is said and done, there are only two elements to color selection. First is Color Theory and second is Color Symbology. Color theory has the advantage of being entirely mathematically based, which makes it actually easy to figure out. Color Symbology is a whole lot more complex, and extremely subjective, which makes it a whole lot harder to work with.

Through all of this, remember that your goal is to make your Web site visually appealing and highly useable by your target audience. If you don't know who your target audience is, it makes picking colors nearly impossible.

Color Theory

Color Theory is, in its pure essence, math. Before you panic, though, keep in mind that math is what computers do best, and a whole lot of people have written very nice programs to figure out all the math of color theory for you. We'll get to the programs in a bit. First, there are a few things that it will help for you to know.

Primary Colors

The three primary colors in the world of computers and the Web are Red, Green, and Blue¹. Any other color your computer screen makes is actually a combination of these three primary colors; yellow is a combination of green and red, purple is a combination of red and blue.

Modern computers are capable of creating over 16 million different colors (16,777,216 to be precise). This is done by combining each of the three primary colors in 256 different intensity values². Each of these 256 different intensity colors is represented to the computer by a two-digit hexadecimal (hex) number, where 00 is no intensity, and FF (255 in decimal) is maximum intensity. With all three colors represented, we end up with a six-digit hex number. Zero intensity of all three colors (000000) is black, maximum intensity of all three (FFFFFF) is white. Red is FF0000, Green is 00FF00, blue is 0000FF. Yellow, which is a combination of red and green, is FFFF00.

WebSafe Colors

Before computers had 16.7 million colors (24-bit), they had 65,536 (16-bit), and before that, a measly 256 (8-bit)³. It was back in the 256 color days when the Web first showed up, and Web designers started running into a truly annoying problem -- not all programs used the same 256. Eventually, it was decided that every Web browser should be capable of displaying a minimum of 216 colors exactly the same, regardless of what computer or browser you were using⁴. These 216 colors became known as the WebSafe Color Palate, which has been sacred to Web designers ever since.

I realize I may be inviting criticism here, but I personally believe that WebSafe colors are no longer an issue. Any computer capable of rendering 24-bit color will render all 16.7 million colors roughly the same as any other computer with 24-bit color, and for five years, it's been nearly impossible to get a new computer incapable of rendering 24-bit color. There are probably still a few people on the Web limited to 256 colors, but they're well under 1% of the users⁵. There is little need, in my opinion, to limit yourself to the 216 WebSafe colors.

Color Schemes

Of the 16.7 million colors you have to chose from, most Web sites only use around a dozen, with only four or five main colors. When it comes to deciding which colors go well with others, there are a few basic systems out there. Rather than explain them all to you myself, I'll send you here.

Color Selection Software

There are a lot of different programs out there that will help you pick out colors that go well together. My favorite that I've encountered to date is Color Wheel Pro ($40 for the full version, free 30 day demo with limited functionality), which lets you design robust color schemes and preview them on real-world examples.

For those on a real shoe-string budget, look at the Sample Schemes at Color-Wheel-Pro.com or use the Color Match Remix, which will give you nine analagous colors to go with the color you pick. It's not as flexible as Color Wheel Pro, but it's free to use.

Color Symbology

The symbolic meaning of colors is often overlooked by designers, but it's quite a valuable tool you can use to make your Web site more effective. The problem with symbology, however, is that unlike color theory, there's no concrete or mathematical formula for saying what works and what doesn't. Symbology relies largely on context; that is, what you're talking about, and who you're talking to. For example, if you're making a Web site about lawn-care products, you'll probably want to use a lot of green, as that symbolizes a healthy lawn, while yellow and brown -- the colors of an unhealthy lawn -- should be avoided or used sparingly. If you are selling ambulances, red would be a good color in the US, but in Europe, blue is more closely associated with ambulances.

Because of the complexity of color symbology, I'm not going to delve any deeper than I have already. I will, however, restate that picking the right colors for your subject and audience can have a profound influence on the success of your Web site.

Footnotes :

1. If you're like me, you were probably told that the primary colors are red, yellow and blue. That's not entirely false (it's not entirely true either). The biggest difference is whether you're working with light itself, or objects that reflect light (paint, crayons, printers, etc.). With reflective color mixing, the primary colors are magenta, yellow, and cyan. When you're working with light itself, however, such as a TV, computer monitor, or stage lights, the primary colors are red, green, and blue. If you want to get into the nitty-gritty of it all, you might want to start here.

2. Why 256 intensities for each of the three colors? Because 256 is 2⁸, or one byte -- the standard storage unit for information on computers. This also explains why computers use hexadecimal instead of decimal numbers -- because 16 is 2⁴, meaning that there are 256 possible two-digit hexadecimal values.

3. So how many colors do the newest 32-bit computer displays have? Believe it or not, it's still 16,777,216. The extra 8-bits is used for other information, not to add more colors.

4. Why only 216 of 256 colors? With only 256 colors to work from, many programs loaded their own color palate, so they could have the colors they wanted. The people who designed Microsoft Windows, however, felt that letting any old program change what colors the operating system used was not in keeping with the Microsoft approach, so they took 40 colors of their own, that they refused to let anyone else mess with. With the advent of 16-bit and better displays, the need for palate-swapping was no longer an issue, so Microsoft didn't have to reserve any special colors just to keep other programs from messing up the appearance of the OS.

5. Like all the other statistics, I made this up. Actually, I'm making certain assumptions based off OS and browser version statistics on a number of sites I manage, combined with general statistics gathered from a number of news sites. I could, in fact, be wrong, and there could be millions of Web surfers with 16- or 8-bit displays. I pitty them, but I'm not going to cater to them at the cost of the rest of my visitors.