Follow Me on Twitter

Follow Me on Twitter
Follow Me on Twitter

Total Pageviews

Monday, May 23, 2011

Color challenged? 5 tools to make anyone a Creative Director Superstar


Color palettes based on photos

A number of color palette generators automate creating pleasing color schemes to use in a website or other rich media design. These color generators 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 2 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. 

photo being analyzed by Color Hunter including 2 color palettes
Color Hunter generates two alternative color palettes based on one photo.

CSS Drive – Like Color Hunter, CSS Drive lets users upload their own photos. 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.

screenshot of CSS Drive with multiple color palettes selections
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. 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.

screenshot of Color Scheme Designer with a color wheel, with a swatch of palettes
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. 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.

screenshot of Slayeroffice UI with mulitple properties output
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. 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.

Kuler UI showing master properties  panel with color wheel, and palettes
Adobe’s Kuler provides the most comprehensive approach to color palette generation.

No comments: