When it comes to interface design, one of my personal weaknesses is working with color. I tried, unsuccessfully, to find books and Web sites to explain color theory in a way I could use. The material I found showed examples of good color choices, but came up short when it came to describing how I could make good color choices myself. Working around the problem seemed like the best solution for me.
I tried a number of different approaches: using the color palettes from Microsoft Office or SmartDraw, basing color palettes on photos I liked, or even visiting Web sites for paint products and copying the color swatches I saw there. The workarounds helped, but they were time-consuming. As it turns out, they’re also unnecessary. Web sites that offer decent explanations of color theory may be few and far between, but sites that offer color palette generators are relatively common.
Color palettes based on photos
A number of color palette generators automate one of the methods I used as a workaround. They allow users to derive a palette based on an average of the color values in a photo. Here are two sites that derive color palettes from photos:
Color Hunter – This site allows users to upload photos and can generate two different five-color palettes, either vibrant or dull. Alternately, users can enter the hexadecimal value of a color they’d like to include in their color palettes, and search for palettes that include that color. (Figure 1)
Figure 1. Color Hunter generates two alternative color palettes based on one photo.
CSS Drive – Like Color Hunter, CSS Drive lets users upload their own photos. (Figure 2) CSS Drive displays four palettes: light, medium, dark, and complete. Rolling over a color on one of the palettes will reveal the hexadecimal value of the color in a designated box.
Figure 2. CSS Drive gives you four palettes based on a photo, and provides hexadecimal color values.
Finding colors by number
If you don’t have a photo to work from, there are other sites that use color theory rules to generate palettes for you. These sites explore the relationships between colors, and generally offer more choices in selecting a palette.
Color Scheme Designer – This tool allows users to select a color from the color wheel to generate a four-color palette. (Figure 3) With a color selected, users can then select which type of color scheme they’d like to use: mono, complement, triad, tetrad, analogic, or accented analogic. An especially useful feature of this site is that it has filters that display the color scheme as it would appear to color-blind users.
Figure 3. Color Scheme Designer generates a four-color palette based on a color you select from the color wheel.
Slayeroffice – This site allows users to set a base color they’d like to use in their color scheme, and then blend that color with two others to generate a palette of ten colors. (Figure 4) The default blend colors (black and white) yield a monochromatic palette. For cases when you’re required to find colors that work with a particular logo, being able to set the values of the color directly into the tool’s interface can be a great timesaver. On the other hand, if you’re not quite certain about which other colors are complementary, you may need to use this site in conjunction with another tool.
Figure 4. Slayeroffice blends a base color and two other colors to generate a palette of ten colors.
A bit of both
Kuler – The most comprehensive of all the color palette generator tools I’ve seen, Adobe’s Kuler gives users the ability to generate palettes either from a photo, or from a base color.
Like Color Scheme Designer, in the base-color mode, Kuler gives users the ability to choose the type of color scheme they’d like to generate. (Figure 5) An additional feature in the Kuler interface is the ability to change the values of the colors by using the sliders beneath the colors. The program keeps the relationship between the colors consistent, so changing the value of one color changes the values of all the colors on the palette.
In the photo-generated palettes mode, the interface offers a choice of 5 different types of palettes from a photo: Colorful, Bright, Muted, Deep, or Dark. But Kuler offers something a little extra in the photo-generated palettes mode. It displays the points on the image the application used to generate the colors. Users have the option of dragging those points to a more interesting part of the photo to pick up colors the application may have missed. In the case of my sample photo, all of the applications ignored the flowers in the image as a source of colors for the palette, but in Kuler, I was able to override the application’s choices in favor of my own.
Figure 5. Adobe’s Kuler provides the most comprehensive approach to color palette generation.
Conclusion
Each of these tools offers something of value for working in Web-based media; one isn’t necessarily better than another. Color choices are always, to some degree, subjective. On the other hand, with tools like these, choosing the right colors may become the easiest part of your project.
