CS 552, Spring 1998

Guidelines on Combining Colors


Derived from Gerald Murch, as presented in J. R. Brown and S. Cunningham, 1989, Programming the User Interface: Principles and Examples, Wiley & Sons.

Murch had subjects rank various color combinations in order of preference. 50% or more selected the following for drawing thin lines and for text.

Background
Best Colors
Worst Colors
white blue and black yellow and cyan
black white and yellow blue
red yellow and white magenta
green black or blue cyan or magenta
blue white or yellow green
cyan blue or black green or yellow
magenta black or white green or red
yellow red or blue or black white or cyan

50% or more selected the following for drawing thick lines and for broad panel areas.

Background
Best Colors
Worst Colors
white black or blue yellow or cyan
black yellow or white blue
red black magenta or blue
green black or red cyan
blue [none selected] [none selected]
cyan red or blue yellow or green or white
magenta blue or black cyan or green
yellow red or blue or black white or cyan


Derived from Wanda Smith, as presented in J. R. Brown and S. Cunningham, 1989, Programming the User Interface: Principles and Examples, Wiley & Sons.

Smith recommends 2- and 3-color combinations that have been identified by users as "good" for achieving visibility; avoid those that have been rated as "bad".

# Colors
"Good" Combinations
"Bad" Combinations
2-color combos white+green
gold+cyan/green
green+magenta/lavender
cyan+red
red+blue/green/purple/yellow/magenta
white+cyan/yellow
blue+green/purple
green+cyan
cyan+lavender
3-color combos white+gold+green/blue/magenta
white+red+cyan
red+cyan+gold
cyan+yellow+lavender
gold+magenta+blue/green
gold+lavender+green
red+yellow+green
red+blue+green
white+cyan+yellow
red+magenta+blue
green+cyan+blue


Smith also recommends the following colors for representing types of measurements.

To show:
Use:
low concentration levels
high concentration levels
desaturated colors
saturated colors
grids
data points
variance or error bars
out-of-spec data
labels: X/Y/Z
gray
yellow
medium blue
red
lavender/limegreen/cyan