The Elements of User Experience: Color

When designing a user experience with color, people often have preconceived notions for what colors they believe cause certain emotional responses. While this is loosely based on previous psychology research, the connection is not quite what it seems. Rather, instead of focusing solely on the literal color, you instead need to look at what encompasses that color.

Psychology of Color

Color having psychological association to emotions is something most seem to assume is true. Anger is red, sadness is blue, yellow is happiness, etc… Despite this prevailing thought though, it’s not quite as one to one as you may think. In this study by Jennifer Fugate and Courtny Franco of Frontiers, they completed two separate studies, helping show that elements such as hue and saturation often are what causes these associations, not specific color’s

To test our hypothesis that the individual facets of color would better predict the color-emotion pairings than the perceived color, we ran a series of nominal regressions. First, we ran a categorical regression using HSL combined as predictors with emotion as the target. Then we ran the same regression with color as the predictor. Finally, we looked at how the model changed with HSL added in individually. This allowed us to get a sense of which facet predicted the most agreement. From this we could compare with previous studies that suggested lightness and saturation are mainly responsible for emotion-color pairings....These findings confirm our second hypothesis that individual facets of color, namely hue and saturation, predicted agreement of emotion assignment better than the perceived color

When analyzing what emotions the participants of the study associated with what colors, this finding holds true. For example, anger was most strongly related with red, with the second and third strongest relations being black and gray. While they may be different colors, red and black can blend together quite well, especially if it’s a saturated red. As a protanope color-blind person myself, I know I often can confuse darker reds for black.

A sample of some of Fugate and Franco's study results. While the connections aren't as exact as public perception would make you think, the most common colors for emotions often have similarities

This sort of consistency happens with the other emotions as well. Envy is mostly with greens and reds, calmness is all the shades of the blue, and happiness goes with yellow and other bright colors. So while they showed that exact connections are often exaggerated and not guaranteed from person to person, such as sadness always being blue, there is some sense of psychological backing to the concept that certain hue’s and shades could partially invoke specific emotions.

Color in Design

When utilizing color in design specifically, the concept of color theory is often the guideline followed. Red, yellow, and blue are the primary colors, green orange and violet the secondary and by utilizing these along with corresponding tertiary colors, you’re able to more precisely pick color schemes for your designs.

A brief look at some of the main terms and visuals of color theory, via ShutterStock

In this article by Alex Clem of ShutterStock, he lists off a number of different color schemes, such as monochromatic, analogous, and triadic color schemes, as well as how and when those schemes may be effective. He also discusses the most prominent views of certain colors. For example, blue is a near universally liked hue, with it often being related to peace and tranquility. As the study from Fugate and Franco showed though, this isn’t always true and Clem accounts for that, also listing how blue can often be viewed as more melancholic and symbolize depression for some.

Applying that to User Experience

When implementing color in a user experience, it can be difficult. As shown above, while there’s some validity to color selection affecting emotion, the results aren’t quite as set in stone as one may wish. Knowing that, it’s important to understand how colors are actually affecting our perception of a design, rather than sticking to more “pop” psychology definitions of color as they can vary greatly between people and cultures. Purple for instance can often be associated with regals in America, as it was extremely rare back in the day, often only being worn by the rich. Japan on the other hand often views purple as evil, with many villains in Japanese fiction sporting purple as a main color. This view can also be seen in animated classics such as Disney’s Maleficent and Ursula, making it all the more conflicting.

Maleficent from Disney's Sleeping Beauty. Her outfit is accented with purple, which you can either view in a regal sense since she's "The Mistress of Evil" implying some sense of royalty, while also representing purple as a color of evil

Rather than making connections such as “Red must always be angry!”, you can instead experiment with how different saturations of red may complement certain color schemes in completely different ways. For instance, despite the app being one about meditation, maybe a high saturation red can give you the mood you desire. Or rather than having bright yellows dominate your mood enhancer app, you can instead implement different hues of blue to try and give both a happy and calming fee.

At times more unique color schemes may actually be more effective in making you stand out, such as Daimler AG having a silver gradient rather than the more traditional reds and blues of other car manufacturer websites such as Ford or Toyota. Obviously you still need good site design which Daimler is questionable with, but opening up your mind about what colors to use and how to use them can maximize your user’s experience.