Instructional design/Color and Design/Combining Colors

Combining Colors

Early scientists who studied color realized that the appearance of a color is relative to the other colors nearby. Color harmony is the act of combining colors according to their relationship to one another on the color wheel.

Colors interact and fight for dominance.
"There is no blue
without yellow and without orange". Van Gogh

Complimentary Colors

Contrast is essential to using color effectively and also for readability. Opposite colors on the wheel provide the greatest contrast and the power to intensify one another. Complimentary colors can be hard to balance (opposites attract but also repel) so use strategically and experiment with adjusting the brightness and saturation levels to achieve the desired effect. Areas of low contrast can appear flat but may be easier on the eye

Use contrast to create a sense of energy, excitement and action.
Use contrast to attract attention to key content, action items or navigation.
Use contrast to emphasize differences.
Use the brightest of a complimentary pair for highlighting, and the darker to provide contrast.
Warm colors (yellow, orange, red) provide the most pop, as these advance and cool colors recede. Keep this in mind when deciding which color to use where.
Split complimentary combinations (opposite + one) are easier to balance.
Difficulties distinguishing between red and green is common with color blindness.

Contrast for readability in text-backround combinations

Contrasting colors are not necessarily great choices for reading text and backgrounds, unless one color is very pale and the other very dark. Black and white are a reliable combination though dark grey text on light backgrounds can work well too. How easy it is to read screen text depends on many factors with contrast very high on the list. Subtle, lighter backgrounds are less distracting and look more professional. Test your text by reading it and learn from more experienced designers.

graphic showing a color wheel with complimentary color combinations

Analogous Colors

Analogous color schemes include 3 colors that are next to each other on the color wheel. Because they are from the same family and similar in hue they tend to get along.

Analogous colors don't provide much contrast but they are pleasing on the eye.
Use analogous colors when the instruction requires a harmonous, easy feeling.
Choose one of the 3 for your main hue.
Use the brightest to highlight key details.

Other Relationships

Try these combinations too:

Monochromatic (1 color with variations in lightness and saturation).
Triadic (3 colors - triangular relationship on the color wheel)
Tetradic (4 colors - 2 pairs of complimentary colors)

graphic showing a color wheel with analogous color combinations

"There are no bad colors just bad color combinations"
Anonymous

< Understanding Color - Previous Page ---«»--- Next Page - Applying Color >