Color Tools for Web Design

Finding the right colors for web design can be really tricky. Fortunately through the magic of math and color theory, you can take the edge off. In a back issue of Practical Web Design Magazine, I found a collection of links for web applications to help you pick colors and find matching hues and tones, and here they are:

100 Random Colors 2.0 is pretty much what the name implies. Written by Regnard Kreisler Raquedan, it picks random colors to help you get past Creative Block. This is an excellent starting place for a project. For example, you can pick a color you like, and then plug it into a palate generating web application, for example:

The Color Wizard is a great web app that lets you start with a HEX color, and generates a palate "by the numbers." Monochromatic, Analogous, Triadic, Complementary, and several others. In theory, most of these color combinations should work together, but if you start with a saturated color and hit "Tetradic"... well, your mileage may vary. If you want to find out why, the answer may be under the Color Info tab, which has a short overview of color physics and theory. If you memorize the information on this site, you should be able to bluff your way though any number of debates at Web 2.0 conventions.

Color Blender is similar to The Color Wizard, but lets you save and download your color "blends" which seems pretty cool. It has a standard RGB slider set up to start mixing your colors, although it would be nice to have a HEX option as well. You can also browse premixed palates for ideas. Right now there are well over 200 pages of blends, with something close to 250 palates on each page.

Colorcombos has a large collection of Palates, and a Combo Tester that lets you test large swatches on the screen. There is a short video at the bottom of the page that does a good job of explaining what they are up to. There are a number of short articles about color and color theory as well.

Another variation on the color palate picker is at Slayeroffice. This one lets you pick a base color, and creates variations based on opacity over 2 background colors. The defaults are black and white, but you can change them.

You now have no excuse for poor color choices, except for good old-fashioned bad taste.