Instructional design/Color and Design/Combining Colors

- ---

Combining Colors
{|style="border-spacing:0px 0px; margin:0px 0px 0px 0px; width:90%;"
 * style="width:60%; margin:0px; padding-right:3cm; border:0px solid #9AB4CB; vertical-align:top;"|
 * style="width:60%; margin:0px; padding-right:3cm; border:0px solid #9AB4CB; vertical-align:top;"|

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.


 * style="width:30%; border:0px solid #9AB4CB; vertical-align:center;"|


 * }

{|style="border-spacing:0px 0px; margin:0px 0px 0px 0px; width:90%;"
 * style="width:60%; margin:0px; padding-right:3cm; border:0px solid #9AB4CB; vertical-align:top;"|
 * style="width:60%; margin:0px; padding-right:3cm; border:0px solid #9AB4CB; vertical-align:top;"|

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)

"There are no bad colors just bad color combinations" Anonymous
 * style="width:30%; border:0px solid #9AB4CB; vertical-align:top;"|
 * }

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