Digital Color Library for Educators
Let’s learn about colors! Did you know that color affects a person’s mood and motivation? Color can also associate meaning and influence behavior (Adams, 2017; Sherin, 2012). I hope this can be a helpful resource in thinking of color as a tool or resource for educators designing digital materials for their students.
There are three elements to color: hue, saturation, and value.
My first day on the job as a visual research assistant I was asked, what is the difference between value and saturation in color?
I believe there is an emoticon for my reaction: 😳
Let’s break it down:
Hue is how we identify a color (red, green, blue, purple, etc.). It is used synonymously with the word color (Sherin, p.10).
Value is the degree of lightness or darkness in a color (think adding white or black) and is the best way to achieve contrast. By altering the value of a color you change the perceived importance (Sherin, 2012, pg. 14). Saturation is the intensity of the color (without adding black or white). These terms may be helpful when selecting and using color in your work.
These two colors are separated by two degrees within the google doc color selector. The darker red text indicates more of a sense of urgency where the lighter refers to a softer lighter tone of voice.
Using color in a digital environment has two important rules:
- Color should not be used to convey meaning
- When using text sufficient contrast between the foreground and background colors is essential for accessibility
For accessibility it is really important not to indicate a meaning solely through color. This is a Web Content Accessibility Guidelines (1.4.1, 2018) requirement and refers largely to text.
For example:
- All text in red is due on Friday.
- Items in orange are leadership roles.
- Items in grey are technology support roles.
(In this example color is used to indicate a meaning (that something is due, that a role or responsibility is communicated). This is an inequitable use of color.)
This helps people with low or vision impairments differentiate the foreground text from the background (WCAG 1.4.1, 2018). To check if your colors have enough contrast I suggest using the WebAIM color contrast checker. This is a handy little tool which uses a color’s hex code (every color is assigned a number called a hex code).
The power of using color in your work:
Color is subjective and emotional (Adams, 2017, pg. 10) and aids in wayfinding, emphasis, and emotion. It can catch someone’s attention and elicit motivation from it’s audience. (Sherin, 2012, p.7). Color can act as an exclamation point, form reactions and communicate information in an otherwise busy environment.
Tips!
- Keep in mind that when using images they are the primary carrier of color. People’s eyes go towards an image and away from text. If you are using images in your work, make sure they serve an important purpose.
- Pairing colors to create contrast draws the eye — use this to your advantage!
I have built three color palettes for you based on how Sean Adams’ organizes colors in his book the Designer’s Dictionary of Color (2017). Each palette (warm, cool, and neutral) include a series of colors with their respective hex codes and emotional response.
Warm Color Palette
Coral: gentle, easy to communicate, approachable, relaxing, positive energy (Adams, pg. 27).
Fuchsia: “intense energy, nonconformity, new ideas”, attracts attention, emotional connection is increased but can be overwhelming, can be seen as rebellious, does not represent femininity as one might think (Adams, 35).
Orange: energy, youth, happiness, used to create a sense of immediacy/spontaneity, asking the viewer to act (Adams, p.51).
Peach: soft, nurturing, warm, sweet. Can also represent emotions of comfort. (Adams, p.59).
Pink: romance, femininity, compassion, innocence, can be considered a politically charged color, it can be used to create a calming effect or to defuse strong subjects (Adams, p.67).
Purple: grandeur, polarizing, wisdom, wealth (Adams, 75).
Red: radical, extreme, passion, energy, fire, violence, anger. “It is vibrant and creates contrast, demanding the viewer’s attention” (Adams, p.83). Use red to shout something, and note it can dominate and create dynamic contrast against other colors.
Scarlet: deeper than red, grabs attention, connotes feeling of power, demands respect, can be associated with education. Cool fact: in the UK scarlet is the traditional robe color for those awarded a doctorate degree (Adams, p. 93).
Violet: holds the highest energy of any color, making it dynamic. Use it to create a sense of drama. Cool fact: Violet is one step away from ultraviolet which is invisible to the human eye. (Adams, p. 101).
Yellow: cheerful, happiness, sunlight, optimism, creativity, vibrancy. Use as a bold contrast with other colors. Cool fact: in Japan yellow represents courage (Adams, pg. 109).
Cool Color Palette
Avocado: new beginnings, earthy. (Adams, p.121). Use avocado to cool down a palette and create contrast.
Blue: honesty, loyalty, sky/water, power, authority. Blue is a strong color that requires careful consideration when using — it can be “rich and hypnotic” or “banal and invisible” depending on how it is used. Many corporate logos use blue (Adams, p.129).
Light Blue: power, sunny sky, peace & quiet, infinite, calming, reassuring, serenity, communication, self-expression (Adams, p.157).
Chartreuse: bold, aggressive, youth, vitality, creativity, confidence, travel, growth. The color does support negative connotations so be careful when using: sickness, disease, jealousy, envy. (Adams, p.139).
Green: regeneration, nature, environment, money, illness, decay, luck, envy, anger. Green is used to contrast warm hues such as pink (Adams, p.147).
Mint: growth, life, natural world, spring, beginnings, crisp, cool, delicate color, advancement, can appear clinical or chilly when used (Adams, p.165).
Olive: complex, dense, vomit, somber, peaceful tone. Olive is the traditional color of peace derived from the olive branch (Adams, p.173).
Turquoise: happy, retro, nostalgic, calming influence when paired with warm hues, communication, self-awareness, initiative. Turquoise represents healing, maintaining emotional stability, and wisdom (Adams, p.181).
Neutral Color Palette
Beige: pleasant, calming effect, recessive, quiet. Pair beige with a brighter color for contrast, or to communicate sustainability or conservative values. Beige also represents rustic, natural, casual, friendly, comforting emotions (Adams, p.191).
Black: adds gravity, bold, drama, confidence, sophisticated, formal, mystery, sleek, maturity. Too much black can become somber, or depressing (Adams, p.199).
Brown: earthy, solid, wholesome, stable (Adams, p.209).
Gray: recessive, emotionless, mature, impartiality, neutrality. Dark gray (charcoal = rich, sophisticated) light gray = subtle, elegant. Medium = noncommittal, passive (Adams, p.217).
White: [think “white space”] used to emphasize other colors, to create order and to provide space (Adams, p.227).
References:
Adams, S. (2017). The Designer’s Dictionary of Color. New York, NY: Abrams.
Sherin, A. (2012). Design Elements: Color Fundamentals. Beverly, MA: Rockport Publishers.
Web Content Accessibility Guidelines (WCAG) 2.0. Ben Caldwell; Michael Cooper; Loretta Guarino Reid; Gregg Vanderheiden et al. W3C. 11 December 2008. W3C Recommendation. URL: https://www.w3.org/TR/WCAG20/
Web Content Accessibility Guidelines. (2018). Success Criterion 1.4.1 Use of Color. Kirkpatrick, A., Connor, J. O., Campbell, A., Cooper, M. Eds.). Retrieved from: https://www.w3.org/TR/WCAG21/#use-of-color.
WebAIM: Web Accessibility In Mind. (2018) WebAIM Contrast and Color Accessibility. Retrieved from: https://webaim.org/articles/contrast/.
