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 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.
The three primary colors in the world of computers and the Web are Red, Green, and Blue1. 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 values2. 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.
Before computers had 16.7 million colors (24-bit), they had 65,536 (16-bit), and before that, a measly 256 (8-bit)3. 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 using4. These 216 colors became known as the , 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 users5. There is little need, in my opinion, to limit yourself to the 216 WebSafe colors.
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 .
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 ($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 or use the , 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.
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.