Few Hues, Many Values
From http://thebanmappingproject.org | |
What: |
Choose one, two, or at most three major color hues to use in the interface. Create a color palette by selecting assorted values (brightnesses) from within those few hues. |
|
You decide on a color scheme for an application or site. You want to avoid a flashy, rainbow-colored, "angry fruit salad" look, but you still want the interface to have some character. |
Why: |
Where colors are concerned, sometimes less is better. Too many
color hues scattered throughout the interface, especially when
they're bright and saturated, make a design noisy and cluttered.
The colors compete for the user's attention.
But when you use many subtle variations on a single color, you can create a design that has depth and dimension. Consider the gray and brown colors used in the example above, reproduced in the color strip below. Notice how the darker and grayer shades appear to recede, and the lighter and brighter tints appear to move forward. This contributes to the pseudo-3D effects -- such as beveling, drop shadows, and gradients -- that form the contours of the UI.
|
How: |
As mentioned earlier, pick one, two, or even three main hues.
You get black and white for free, but gray counts. In fact,
gray works very well in multiple values and brightnesses; it's
a versatile color, especially if you add a little color to make
it more blue (cool), or more beige (warm).
Within those hues, vary the color value to get a range of bright and dark shades. You can also vary the saturation at the same time; this can produce more subtle color combinations than you would get by varying just the value. Use as many of these colors as you want to compile a color palette for the application. You can, of course, use other colors in the interface besides these hues. Just use them sparingly. Icons, ads, and other features that take up relatively small spaces don't have to fit this restricted color scheme. You might want to choose only one or two accent colors, too, like using red or cyan to mark points of interest. In fact, using a single hue for the "background" of the UI actually emphasizes these minor colors because they don't get lost in a sea of color hues. |
Examples: |
|
From http://babynamewizard.com This graph uses two hues, blue and pink, to show its data. Blue represents boys' names, and pink represents girls' names. Within those colors, the color value represents the popularity of those names in 2003. A third color, dark gray, shows the frame around the data -- the grid lines, the numbers, and the title -- and a dark blue highlights the selected name ("Dale"). This color combination is very effective, both cognitively and aesthetically. The hues and values mean something with respect to the data, and the coding is very easy to follow -- you hardly even need the legend once you've looked at it once. Aesthetically, the whole thing has a layered richness that isn't garish, as rainbow hues would have been. And in American culture, people understand light blues and pinks as "baby" colors, so the emotional and cultural connection is there too. |
|
