Today, let's talk a little about how to create a color scheme for your website. In the old days, web designers had a palette of 256 "web safe" colors to choose from. These were the colors that wouldn't get dithered on a computer whose display supported only 256 colors at a time. It was important, for example, not to put text on a non-web-safe background color, because the dithering of the background make the text hard to read. Even worse was a non-web-safe text color. And even if readability wasn't involved, dithering just didn't look that great.

Happily, unless you really feel the need to look perfect for every single person, the days of the web-safe pallete are gone. The most recent stats from The Counter indicate that only 1.7% of web browsers are stuck in the 8-bit color days, so you'll be pretty safe picking the exact colors that you like best. Enough sites ignore the web-safe palette these days that people with 8-bit displays are probably used to it anyway. But moving on from what we don't need to think about...

A while back, I came across a tool for generating color schemes and some information about various strategies for picking colors that look good together. Unfortunately, the free tools didn't implement the information I'd found elsewhere (in fact, I'm really not sure they had a particularly scientific method of choosing the colors). So I wrote my own color wheel application. It's a web-based tool that uses JavaScript to do its work, and you can see it here.

To use the color wheel, enter numbers from 0 to 255 in the Red, Green and Blue fields. Each time you change a number, you'll see all the colors on the page update. The color specified by the numbers you enter is the third color down in various of the columns. The colors above it are the "tints" (colors made by adding white to the base color) and those below are the "shades" (colors made by adding black to the base color). You can adjust the lightness and darkness of the tints and shades by adjusting the tint and shade fields. Enter numbers between 0 and 1. You can also alter the colors in the "split complementary" and "analogous" schemes by modifying the "angle" field. You can enter numbers from 0 to 360, but anything above 90 doesn't get you anything you can't get with lower numbers.

A word on what each of the schemes means. "Monochrome" is your base color with its tints and shades. "Complementary" adds the tints and shades of the color directly opposite your color on the color wheel. "Triadic" splits the wheel into three equal parts. "Split complementary" gives you two colors almost opposite your color on the wheel. And "Analogous" gives you two colors near your color, one to each side on the wheel.

Finally, let's get down to business. My recommendation is to start off with a monochromatic color scheme. If you have a photograph on your page, pick a color from the photo, or one that looks good with it. Otherwise, just pick a color you like. Play with its tints and shades, plugging colors into your webpage till you've got something that looks reasonably good. Once that's done, you can either stop there if your satisfied by it, or you can pick a color or two from one of the other colors schemes and use it sparingly to add a few hilights. If you have a photo, it may provide all the color variety you need.

With experience, you'll probably get better at figuring out ways to use more than one color without weakening your design. Until then, color schemes that are primarily or completely monochromatic and probably the best approach to giving your web pages a professional look.