Colors and emotions are intricately linked in ways that digital designers are only beginning to understand and take advantage of, which makes sense when you consider that color in design (particularly newspapers and magazines) has really only become widespread in the last half-century or so.

And yet, the psychological impact of color on user behavior is significant. Something as simple as changing the color of a button can increase desired behavior by double, even triple-digit percentages. Overlooking this vital component of user experience design is a huge mistake and one that’s easily avoided with a little education and research.

Psychology of color: Cover of Good Housekeeping magazine from September 1928

Good Housekeeping, one of the most iconic American magazines started using color around a hundred years ago. (Source)

What is Color Psychology?

There has been little rigorous scientific study on the psychological effects of color. Yet color psychology is an important focus of branding and other design disciplines. Most studies on the effects of color have been done for practical reasons and primarily consist of anecdotal evidence and case studies from individual companies and designers.

Ask designers, however, if they consider the psychological effects of color on human behavior and the vast majority of them will affirm that they do. Overlooking color psychology is a quick way to ensure poor user experience and reduce the conversion rate of a website or app.

The psychology of color is an important consideration in UX design

Tide's choice of blue as their main color makes sense for a company catering to other businesses.

Why Color Affects Emotion

Why colors affect the way people feel isn’t straightforward. There are a number of elements that can influence the way a person feels when exposed to a certain color. One important factor is the personal association with a color. If a person’s favorite stuffed animal as a child was blue, for example, then they may have a preference for blue throughout their life. Or, at the opposite end of the spectrum, if they were hit by a blue car as a child, they might have a strong negative emotional reaction to the color blue.

However, because of universal human experiences, it’s possible to predict how the majority of people will respond to a given color. For examples, green is often associated with nature and growth because most people have witnessed plants growing. Blue is almost universally calming because it’s associated with things like the sky and water.

Other effects are cultural. Purple, for example, is still associated with luxury due to the fact that purple dye was prohibitively expensive and rare in many ancient cultures, and therefore only used by royalty. It’s not a natural association, per se, but it was a significant part of the cultural zeitgeist for long enough that it’s become a part of the human psyche.

Color associations: Purple has long been associated with royalty

Purple continued to be associated with royalty well into the 18th century, as evidenced by this portrait of Russia's Catherine the Great.

Color’s Effect on Performance

It’s not just mood and emotions that color can affect. It can also affect performance in very real ways.

For example, in a study published in the Journal of Experimental Psychology, researchers found that the color red negatively affected performance on a test. When participants were given a red participant number (rather than green or black), they performed 20% worse on tests than their peers. That’s a significant difference and one that can be used to influence user experience.

That doesn’t mean red will always hinder performance. In a study of athletic performance, red uniforms appear to give an advantage. During the 2004 Olympics, athletes competing in four different sports (Greco-Roman wrestling, freestyle wrestling, boxing, and taekwondo) were randomly given either blue or red uniforms or protective gear. The red-clad athletes won in 19 of the 29 weight classes. And similar studies among soccer matches showed a similar advantage to the teams wearing red uniforms.

Red boosts performance in sports, reinforcing the psychology of color

The power of color is shown in how red uniforms can affect athletic performance.

This could be explained by red’s historical connotations with aggression and anger. Either the red uniforms are making their wearers feel more aggressive or, alternatively, the red uniforms are more intimidating to their opponents and therefore negatively affect their performance. Either way, the results are significant.

Color Meanings

Every color is associated with different emotions. The use of color in design can affect the emotions and moods of the people viewing those color palettes. Using colors wisely can improve user experience and increase desired behaviors (including conversion rates) in significant ways.

Warm Colors

Warm colors include shades of red, orange, and yellow. In general, these colors are energetic and active, with relatively positive connotations.

A warm color scheme in color psychology

Red: Red is associated with passion, love, and lust. It can also be associated with warnings and danger, or even with anger (hence the term “seeing red”). Red can have a physiological impact on people, too, including raising respiration and heart rate.

Orange: Orange is energetic and positive. It’s association with autumn leaves and seasonal transitions can also make people think of change when they see it. Orange is also associated with warnings, though less strongly than red.

Yellow: Yellow is considered the happiest hue in the color spectrum and is closely associated with sunshine and with hope. It can also be linked with caution and cowardice, though.

Color psychology: yellow is the happiest hue

Parabola's choice of yellow as their main background color is immediately uplifting to visitors.

Cool Colors

Cool colors include shades of blue, green, and purple. Generally speaking, cool colors are more calm and relaxed than warm colors, though specific hues can have different properties.

Psychological effects of color on human behavior: a cool color scheme

Blue: Blue is calming and also represents honesty and loyalty (hence its popularity in so many corporate branding color schemes). Blue can be associated with sadness and loss, depending on context. It’s also linked to peace and even spirituality.

Green: Green can represent new beginnings and growth, as well as nature. It has some of the energizing properties of yellow, while also carrying over some of blue’s calming effects. Green is associated with affluence, money, and stability, particularly in darker shades.

Purple: Purple has long been associated with luxury and royalty, but also with mystery and the occult. Lighter purples, such as lavender, are more romantic and associated with spring.

Color psychology: cool colors are calming and trustworthy

Brittany Chiang's use of blues and greens gives an impression of trustworthiness and growth.

Neutrals

Neutral colors often take on characteristics of the other colors in a palette and can be used to reinforce those influences. The basic neutrals include black, white, gray, brown, and beige.

Color psychology: Neutral colors

Black: Black is elegant and sophisticated, but can also be sad and representative of death and mourning.

White: White is pure and innocent, and often linked to cleanliness. Although in some cultures it can also be associated with death.

Gray: Gray can be seen as sophisticated and powerful, but can also come across as boring if used the wrong way. It’s one of the most flexible neutrals, as it can be seen as warm or cool, traditional or modern.

Brown: Brown is solid and dependable, and can be associated with nature depending on the context in which it is used.

Beige: Beige can be warm or cool depending on the colors used around it. It’s generally conservative and can take on the warmth of brown or the coolness of white. It takes on the meaning of the colors around it and often fades into the background, adding little psychological influence on its own.

Cultural Differences

One area where designers need to be particularly careful in their work is in considering cultural differences in color meaning. For example, in most western cultures, white is associated with innocence and black is associated with death and mourning. But in other cultures, particularly China, Japan, Korea, and other Asian countries, white is associated with death and mourning, and even bad luck.

The psychological effects of color on human behavior vary by culture

The psychological effects of color on human behavior vary by culture. (via Open Source Studio)

It’s important to consider where the users of a product are coming from. If the majority of users for a particular site are coming from Indonesia, for example, then using green would be a bad idea. But if they’re coming from the Middle East, then green is associated with luck, wealth, and fertility, which might be exactly the kind of message desired.

Taking time to research the exact cultural meanings of colors before committing to a color palette is an important step in the UX design process and one that can’t be overlooked. Not just because of cultural differences, but also because of the significant effects color can have on user behavior.

Subtle Changes Have a Huge Impact

Making even subtle changes to an exact hue can have a big impact on how users perceive that color. For example, navy blue is considered loyal and traditional while bright blue can be modern and energetic and light blue can be calming and peaceful. They’re all “blue” but the effect of adding black or white to change the specific color is very significant.

The same goes for how colors are combined. Red and green are complementary colors on the color wheel, and using them right next to each other can create a vibrating effect that’s very unpleasing to the eye. But if you lighten the red to pink and make the green more of a jewel tone, it becomes a striking and unexpected color palette that’s immediately memorable and visually appealing.

Colors and emotions along with branding go hand in hand

Pink and green are a modern take on the traditional red and green complementary color scheme. (via hafid lhachmi for YFF Office)

How Color Affects Consumer Behavior

Color can affect performance, as already mentioned, but it can also affect overall behavior among users. Countless case studies have been done comparing the effectiveness of different color choices on things like calls to action.

HubSpot ran a case study on the effect of switching a button color from green to red on Performable’s website and got some very conclusive results. A designer’s gut reaction might be that green would perform better, as it’s associated with “go” while red is associated with “stop” and might make people pause before clicking. But the results said the opposite: the red button outperformed the green by 21%. In other case studies, green significantly outperforms yellow or orange, though.

Logo design is another area where color choice is incredibly important. Brands pay specialists thousands (and sometimes millions) of dollars to find exactly the right hue for their brand, one that evokes the correct feelings and actions from their customers while also standing out just the right amount from competitors in their industry (and the “right” amount is often dependent on the specific industry).

Color psychology: Garrish, unexpected color schemes stand out

Fake at Science Gallery uses a hot pink and bright purple color palette to create a memorable impression.

Psychology of color: Choose unexpected colors to stand out

Act Normal's bright pink background is visually appealing and memorable, incorporating the passion of bright red without being aggressive.

Color psychology: Combining unexpected colors

Kennard Lilly's use of a traditional dark blue color with bright accents creates a modern brand that still comes across as trustworthy and honest.

The key takeaway here is that the color used in a design does have a significant effect on user behavior but the context in which the color is used is a major factor in this. Buttons, for example, should stand out from the surrounding design elements without clashing with them (one area where using a complementary color is a great idea, such as using a red button when much of the design includes green).

Conclusion

The main takeaways from all of this are that color is a vital part of creating positive user experiences and that there is no single right color palette for a given application. This is why testing designs with real users is such a vital part of creating a color palette optimized for the specific use cases it will be enduring. A green button might convert great compared to a yellow button in one context, but a red button might outperform them both in another.

•••

Further reading on the Toptal Design Blog:

Understanding the Basics

What are the most powerful colors?

The power of color lies not so much in specific hues, but in how colors are used to evoke particular responses. That said, red and blue are most often associated with power, though because color psychology is not well-studied from a scientific viewpoint, those associations are debatable.

Hiring? Meet the Top 10 Freelance UX Designers for Hire in November 2018
Don't miss out.
Get the latest updates first.
No spam. Just great articles & insights.
Don't miss out.
Get the latest updates first.
Thank you for subscribing!
Check your inbox to confirm subscription. You'll start receiving posts after you confirm.

Comments

comments powered by Disqus