Color Theory

Using colors wisely in learning design

How do we use colors wisely in learning design? 

Color Theory can address the problem of effective color use when designing learning. It is a prime example of why UX design cannot be approached purely as a science nor as an art but as a craft that synergistically merges the two.

— Royce Kimmons (Associate Professor of Instructional Psychology and Technology at Brigham Young University)

When it comes to instructional design, the selection of colors is more than just a personal preference of the instructional designer or a random pick from the color schemes in PowerPoint. Colors can actually have an impact on learners’ attitudes, emotions, and effectiveness of learning in various ways. In this article, we present a brief summary of a chapter on the color theory in learning design from Learner and User Experience Research edited by Schmidt and colleagues in 2020.

Color wheel

Before we dive into the use of colors, it is important to know about the color wheel first, which presents the three key defining features of colors: hue, saturation, and brightness.

Figure 1. Hue, Saturation, and Brightness on a color wheel (Kimmons, 2020)

As shown in Figure 1:

• Hue represents the color’s position around the wheel;
• Brightness indicates the amount of BLACK mixed with the hue; and
• Saturation indicates the amount of WHITE mixed with the hue.

Effects of color on affective reactions

Think about your favorite color and how you would react to colors that have different degrees of saturation and brightness. Indeed, colors can invoke different emotional and psychological reactions. Empirical research has confirmed these intuitions, too. For instance:

• Hue: Red is often associated with danger and avoidance and could impair one’s performance on IQ tests (Elliot et al., 2007); white is often associated with cleanness and grays with dirtiness (Valdez & Mehrabian, 1994); long-wavelength colors such as reds and yellows are more arousing (e.g., high heart rate) than short-wavelength colors such as blues and greens (Jacobs & Hustmyer, 1974; Wilson, 1996).
• Brightness: According to the Pleasure-Arousal-Dominance emotion model (Mehrabian & Russel, 1974), an increase in brightness has a positive impact on pleasure and has a negative impact on arousal and dominance.
• Saturation: Saturation has a positive impact on pleasure, arousal, and dominance.

Figure 2. Brightness and Saturation Levels of the Primary Blue Hue with Four Examples (Kimmons, 2020)

While there are more universal emotional reactions to colors as addressed earlier, sometimes our emotional reactions to colors are also influenced by culture (Hupka et al., 1997) or gender (Osgood, 1971). See the figure above, if you were to rank these four colors, what is your ranking like? Does your ranking align with the results from the research?

Principles and tips for color usage

Principles

1. Contrast: Convert the colored designs to grayscale (that allows you to see how the colors are similar to each other) or use the tool provided by WebAIM.
2. Attention: Use vibrant colors to draw learners’ attention to important elements.
3. Meaning: Use warm colors to evoke passion and engagement, cool colors to evoke comfort, and gray to represent lack of importance.
4. Harmony: Use the 60-30-10 rule: primary colors dominating 60% of the view field, secondary colors for 30%, and an accent for 10% (e.g., Google’s homepage).

Color schemes

1. Monochromatic: Use one dominant color and its desaturated versions for variation (simplest & safest!)

Figure 3. Example of monochromatic color scheme: Brigham Young University’s Website (Kimmons, 2020)

2. Analogous: Use two or more nearby colors on the color wheel. By nearby, we mean no more than one-third of the wheel.

Figure 4. Example of analogous color scheme: Harvard University’s Website (Kimmons, 2020)

3. Complementary: Use colors that are on opposite sides of the wheel (when these colors mix, we get white!).

Figure 5. Example of complementary color scheme: Boise State University’s Website (Kimmons, 2020)

4. Complex: Use three or more colors that are equally positioned around the wheel, also following the harmony rule. ?

Figure 6. Example of complex color scheme: Google’s Homepage (Kimmons, 2020)

5. Achromatic: Only use black, white, and gray—easy to use but may not be very interesting.

Figure 7. Example of achromatic color scheme: Apple’s Website (Kimmons, 2020)

Recommended tools for choice and use of color:

• Adobe Color website
• Google Material Palette Generator

Note: This article is a brief summary of the following chapter:

Kimmons, R. (2020). Color theory in experience design. In M. Schmidt, A. A. Tawfik, I. Jahnke, & Y. Earnshaw (Eds.), Learner and user experience research (pp. 106-126). EdTech Books. https://edtechbooks.org/ux

References

Elliot, A. J., Maier, M. A., Moller, A. C., Friedman, R., & Meinhardt, J. (2007). Color and psychological functioning: The effect of red on performance attainment. Journal of Experimental Psychology: General, 136(1), 154–168.

Hupka, R. B., Zaleski, Z., Otto, J., Reidl, L., & Tarabrina, N. V. (1997). The colors of anger, envy, fear, and jealousy: A cross-cultural study. Journal of Cross-Cultural Psychology, 28(2), 156–171.

Jacobs, K. W., & Hustmyer, F. E. (1974). Effects of four psychological primary colors on GSR, heart rate, and respiration rate. Perceptual and Motor Skills, 38, 763–766.

Mehrabian, A., & Russell, J. A. (1974). An approach to environmental psychology. MIT Press.

Osgood, C. E. (1971). Exploration in semantic space: A personal diary 1. Journal of Social Issues, 27(4), 5–64.

Valdez, P., & Mehrabian, A. (1994). Effects of color on emotions. Journal of Experimental Psychology: General, 123(4), 394–409.

Wilson, G. D. (1966). Arousal properties of red versus green. Perceptual and Motor Skills, 23, 942–949.