In this chapter, we’re focusing on a powerful design element that may seem elementary, but is really quite complex: color.
If you are colorblind or have other circumstances that affect your perception of color, such as custom screen settings for light sensitivity, please discuss this with your instructor to make sure the material and assignments are working for you.
Color Harmonies
Talking about color might remind you of painting in preschool or elementary school, and learning to differentiate and name colors is one of the first visual skills that small children routinely practice.
This early emphasis on naming colors and developing can obscure the complexity of color, which we tend to take this complexity for granted until we run into a situation that challenges our visual perception skills, such as “the dress” or trying to tell whether two items of black clothing match well enough.
Studies about visual attention and color salience have demonstrated that factors such as contrast with the background color have a significant impact on how we see and notice colors, and the symbolic meaning of colors — meaning that is culturally learned — affects how we perceive color in the world around us. We’re going to take a practical design approach, rather than getting into the science of light and refraction, but know that color science is absolutely not elementary.
🗨 What was your favorite color as a child? Do you still like this color? How do your color preferences manifested in your life — do you gravitate toward certain colors for clothing, household items, accessories, etc.?
Here’s a short animated video with some of the vocabulary we’ll be using to use as a visual warmup:
Color theory is based on the color wheel for establishing the relationships between colors and how we perceive them. Color is a combination of hue, value and saturation.
See related slides about Color Theory and Color Schemes
Tips for Color Schemes
- Don’t use too many hues (go wild with tints, shades and tones instead)
- Use contrast between dark and light, especially when designing with text and images
- Don’t forget black, white and gray!
✓ Lecture review:
- What is one type of color harmony that uses three hues?
- What is it called when you create a color scheme with just one hue?
- The difference between purple and lavender is a difference of which property: hue, saturation or value?
Photoshop color picker showing relationship of purple and lavender.
🗨 Since symbolic meanings are culturally learned, the same color can have multiple meanings. What is an example of one color you can think of that has multiple symbolic meanings depending on the context?
A Color By Any Other Name
Language affects how we see things, including color. Visual perception allows us to take in visual stimuli and create meaning, and that meaning is influenced by the labels we use. Here is an explainer video from Vox that does a great job summarizing and illustrating the most influential research about how people across cultures see and name colors.
✓ Comprehension check: This video explains how some languages don’t have distinct words for all colors, but instead use other words like “sky” to indicate color. What are three precise colors in English that are named after things or analogies? (If you are multilingual, you can use examples from other languages if you prefer.)
Try It Out!
There are lots of great color scheme tools online that also help you see the differences between different color harmonies. My favorite for how it shows the different types of harmonies is the Sessions College Color Calculator. Try it out! Choose a base color and see what it suggests for different types of harmonies. There are other tools listed on the course schedule that we’ll use for a class activity.
Color Schemes for Visual Identity
Color is an important tool for creating hierarchy in visual design, but it’s especially important for consistency across design products. Organizations often call this visual identity, which can also encompass other style guide elements like fonts.
Let’s review color harmonies by looking at the color schemes and visual identity of several Pac-12 universities. We’ll start with the University of California Berkeley since the team name — the Golden Bears — even includes the team color. Here’s an example of a little graphic from their athletics website:
Overall, their colors are bright gold and navy blue. If we think about color wheel relationships, how are yellow and blue related? The primary colors yellow, blue and red have a triadic relationship, but there’s no red here. By making it a slightly orange-ish yellow, it becomes closer to the complementary blue-orange relationship. Then, changing the value of the blue so it becomes very dark helps make it work.
Interestingly, the identity of UC-Berkeley is a little split, with the sports teams known as Cal and the academic programs more often referred to as Berkeley. So the color scheme for the main university site is similar, but not identical to the athletics branding. Scroll through the website a little. What colors do you see?
Bright gold is eye-catching for athletics, but maybe a little aggressive for a serious university. So instead they use a darker, orange-ier gold paired with two shades of blue. (Compare that to UW’s very beige-y version of “gold” — recently accented with a brighter yellow.) The colors are named and explained as part of the brand guidelines.
Let’s look at another one: the University of Oregon. Green and yellow have what type of color wheel relationship? Not complementary or split complementary. Since they’re near each other on the color wheel, it’s loosely an analogous relationship. And since that’s a relationship of similarities, it’s hard to create the contrast you need in design for hierarchy and readability.
And while the athletics teams can embrace bright yellow and green as distinctive…
…that would seem a little cartoonish or unsophisticated for the whole university. Instead, the university website uses green as the main color, with a soft buttery yellow reserved as an accent color.
The brand guidelines show that they do treat green and yellow as an analogous color palette, with secondary colors from the green-yellow spectrum. The website also uses a very pale green-yellow and black, which are not represented on the color guide.
Your turn: Look up any college or university except WSU or the ones from the previous examples. See if you can find a style guide or other evidence of the institution's use of color in visual identity.
✓ What colors does the institution use, and what category of color harmony is the best fit?
🗨 Do you think the college or university is making smart choices for using its color palette in its design?
WSU’s Color Palette
Finally, let’s look at WSU. With crimson and gray, WSU has just one dominant hue since gray is a neutral, and that’s actually really great for the university’s visual identity. It’s technically monochromatic, and it allows crimson to be the unilaterally dominant color without any competing hues. But of course any design product needs color variations, and WSU brand guidelines define a whole set of colors allowed as the secondary palette.
Go to WSU’s brand guidelines for colors. One that page, each color is defined as a hexcode and as RGB and CMYK.
There is one challenge with WSU’s colors: The primary crimson and gray are very similar in value, meaning lightness/darkness. This means there is not enough contrast to use them together as-is, especially for elements like text.
You can see this very clearly if you put the colors into Photoshop and reduce the saturation until it becomes grayscale. So that means if you want to use WSU’s colors together, at minimum you need to include another color with a very different value, such as black or very pale gray.
WSU changed its brand colors in Fall 2021. The crimson and gray are slightly different, and the accent colors are now more vibrant.
Have you seen WSU’s new or old accent colors in design materials around campus? They are somewhat rare, though some programs make use of the full palette for a more distinct visual identity that still fits within the university color scheme.
The WSU Museum of Art's website made use of the full palette from WSU’s older color scheme before it was updated in 2023.