Few Hues

Example of the Few Hues UX pattern.

Problem

Black and white just aren’t good enough.

Solution

Pick a few hues and base your entire color palette on those, using saturation and brightness for variety.

Context

You’re probably not a graphic artist/designer.
You don’t want your interface to look childish, candy-like, rainbowy, or unprofessional.

Rationale

Most people feel an urgency to add color and style to plain designs. The problem is that most people don’t know how to do it effectively. Color should be used with purpose and, especially when designing an overall palette, most people will be inclined to use too many rather than too few. If you use too many colors, it can make the overall design feel busy and crowded. Colors attract attention, so many of them is like having many people yelling at you for attention—it’s hard to know what to focus on.

Similarly, having many colors in a UI can give it a candy (think Skittles) effect or like a child’s toybox (toy’s usually use lots of bright colors, which appeals to children). In both cases, it can make the UI seem unprofessional, even childish. If that’s what you want, it’s fine; otherwise, shy away from too many colors.

Using just a few hues will help subdue this effect. Varying brightness and saturation can help you add nuance to your design, effectively giving you more colors to use without the negative effects described above. You can use the brighter and more saturated colors for things that deserve more attention and lighter, less-saturated colors for backgrounds.

Implementation

Often your basic color choice can be informed by some existing design elements. For instance, if you’re designing for a company, you can look to existing artwork (such as logos, brochures, etc.) for inspiration. Choose a few, usually no more than three, hues to work with create your palette from that. Of course, you don’t count black and white—you get those for free!

Microsoft Office 2007 exemplifies this approach and makes it easy if you’re creating Office documents by doing this in the color picker with theme colors for you.

Example of the Few Hues UX pattern.

Of course, they don’t limit you to two or three, but you can limit yourself based on the available options.

Starting with gray and adding colors to it can be a good way to discover subtle color schemes rather than, for example, starting with bright, fully saturated colors. Also, you may want to consult a color wheel in choosing your colors to help ensure compatibility.

Finally, note that you can deviate from your theme if you do so consciously and sparingly, in order to draw attention to things or, for example, if you have smallish icons with more color. And naturally photos (that are not meant to just be part of the design) don’t have to be limited to these.