Categories
Uncategorized

Designing emotional color palettes without the fake science

View the original post

Color is a wonderful component of interactive design.

If you use color well, you’ll command user attention. But use it like a master and your digital products will feel more trustworthy, comforting, or whatever emotions make sense for your design goals.

Blunder it and you risk damaging your visual hierarchy, info architecture, and evoking the wrong emotions.

The problem is, how do you know which colors evoke which emotions?

Ever find yourself Googling this question and find yourself in a pseudoscience land of made up nonsense? If you have, don’t worry. The web is full of fake color psychology advice.

These bunk guidelines go something like this: Yellow makes your users feel joy; blue calms them; and red makes them angry.

If you have read any articles on color psychology, you probably ran across universal claims like these.

The web is full of oversimplified psychological theories, misinformation, and bad advice.

Many of the color psychology articles are not just invented claims, but they typically follow-up with guidance on how to apply those invented claims.

They teach you things that are not real, and then encourage you to adopt practices based on principles that do not exist.

The claim that every brain is wired to react emotionally to the exact same color stimulus is very far removed from the science. But at the same time, several studies show that there are links between color and emotion.

This makes it hard to judge what’s a legit color psychology claim.

Not everyone thinks blue is calming. Some people think blue is cold and depressing.

Let’s go over a few reasons why.

Culture Matters

Red may be the most popular color for invented claims. In the Western world, people describe red for its emotional connections to danger and passion. But in China, red is assigned emotional associations to happiness and fortune.

Thanks to traffic lights, red also has cognitive association with the concept of stopping.

This demonstrates the diverse reactions people ascribe to color through similar cognitive associations resulting from something as simple as traffic lights.

What many of the universal color psychology advocates distort, the scientific community frequently demonstrates — culture matters.

I’m not denying that there may be universal color-emotion associations. There’s good scientific evidence that suggests some universals probably do exist. And there are several studies showing strong links between different colors and visual salience — but this is not emotion.

Unfortunately, those who make universal claims online tend to invent the details and spread sweeping generalizations on the basis of nothing.

What’s worse, if YouTube Like smashes are any indicator of distribution, it’s safe to argue that the general public sucks up blatantly absurd color psychology claims. The more hyped-up and baseless the claims, the more popular they appear to be.

Things that are “too good to be true”, are quite often exactly what they appear — not true.

The same applies to color psychology guides with simple look up tables offering an emotional “paint by numbers” approach. Sprinkle some yellow to create energy. Add a dash of red to create urgency. Don’t use purple, it’s too depressing.

Here’s where it gets confusing. Some scientific studies provide emotional paint by number tables, showing statistical correlations between color and emotion.

In fact, it’s easy to run one of these studies yourself. Go to MTurk. Make a survey that displays a bunch of colors and ask people to rate how each color makes them feel. Tabulate the results, and summarize the trends. Voilà — research-backed color-emotion associations.

This is how many researchers build color-emotion lookup tables. But there’s a gotcha in the fine print that you need to know about. It’s called the “limitations” section, and a key section in all scientific papers.

The limitations section of a scientific paper could also be called the “cover your ass” section. It’s where the researchers fess up every known weakness in their study and then add epic qualifiers saying, “this study only applied to this group, at this time, in this place”. They normally caution “DO NOT generalize beyond this group”.

When you go through transparent scientific studies and start comparing their colors associations, you’ll quickly see that color-emotion associations jump around from study to study, group to group, and culture to culture.

Perhaps one day all global netizens who grow up in the same digital ecosystem will be exposed to the same color palettes and develop similar emotion-color associations.

But until this day happens, research suggests that culture matters and global claims are nonsense.

Learning Matters

Evoking positive or negative emotions with color is something we can easily understand from the perspective of reinforcement learning. This describes the process of associating any stimulus with a reward or punishment.

Give me money in a red package every year, and before long, red will make me drool like a Pavlovian dog.

These associations become ingrained in us from a young age and form unconscious color-emotion associations that constantly change over our lifetime.

As we traverse our unique journey in life, we’re bombarded with color-emotion associations at multiple levels: global trends, cultural trends, subculture trends, family preferences, our physical environment, and more.

Like fashion, color can quickly come in and go out of style. Sweeping statements about color-emotion associations can only apply to a certain population during a certain period of time.

Why? Because associations come, go, and evolve.

Why is it that a color can be high-status one year, and low status another? Why did clothing from the 1970 look so fashionable in the day, then look so surreal a few years later, only to appear sexy out of nowhere?

When discussing color psychology, it’s generally safe to discuss emotional or cognitive color associations in a particular group at a particular time.

Considering people learn color associations quickly, it’s often easier to establish your own color-emotion associations through following consistent interactive design patterns.

In Machiavelli’s classic book, The Prince, he advised that when you’re the dictator, you should only give good news to the people, and then have your ministers deliver the bad news.

I’ve always felt the same way about interactive design. Build on the cultural color-emotion associations that are blatantly obvious.

But then, keep your positive messaging consistently tied to one part of the color spectrum, and use another distinct color spectrum section for those high-arousal or danger-alerting content. Typically, we use green=good, red=bad.

The key is to be consistent. For instance, don’t put your negative messages in the happy green box. Once you establish habitual associations, the colors alone will tell people the significance and they may not even bother reading your content.

Learned color-emotion experience matters, and are in constant flux.

Accessibility Matters

Red-green color blindness is common, affecting 7–10% of men. Red-green color blindness is a broad term that covers many types of color blindness, including protanomaly, protanopia, deuteranomaly, and deuteranopia. There’s also blue-yellow color blindness and complete color blindness.

Someone with protanopia will see red as black, for example. While those with other types of color blindness, blur other colors together.

Though the number of color blind people is small, there’s enough to damage universal color-emotion claims, and certainly make legit associations harder to manage.

Fortunately, there are guidelines on building color palettes for color blind people that help us build tech that’s both accessible and emotionally evocative.

Respecting accessibility standards is harder to accomplish than many people realize. Designing color systems that meet AA contrast ratios is challenging, but not that difficult. However, designing color systems that meet AAA contrast ratio requirements can be very tough.

Normally you never get to design a color system from scratch. We often have to achieve accessible color systems under real world conditions, where all hell breaks out: legacy colors, brand colors, UX requirements, information architecture requirements, notification system needs, and then crazy decisions by irrational managers.

If you’ve somehow managed to survive this, you MUST also strike the right emotional tone.

On interactive projects, you quickly find yourself trapped in a color corner. Tweak this color and your usability suffers. Another tweak and there goes the brand vibe. Yet another and you’ve broken contrast ratio laws.

It’s a tough balancing act. By focusing on accessible colors, we boost our odds of finding colors that consistently communicate the same cognitive meaning with the same emotional meaning.

Following good accessibility practices allows us to have more universal emotional color associations.

Color Impacts Emotion, But It’s Not Black and White

Color-emotion associations definitely exist. But it isn’t as simple as some would have you believe. Universal statements about global color-emotion links tend to be pseudoscience.

Search “color psychology” online and you’ll find a massive volume of color psychology guides that people just invented. Most of it is utter nonsense.

Just because universal color-emotion associations don’t exist doesn’t mean you can’t use color psychology to your advantage. Scientific studies show that color-emotion links do exist, but they’re limited to a specific group at a specific time.

Unfortunately, we’re not going to find any black and white guidance. It will always require insight and judgement on your part.

The associations are there, but the challenge is to discover the links that are real, and that matter in your users. These associations are much more nuanced than the gurus would have you believe.

Given all the real world constraints, I tend to follow a few broad rules and test the concepts to ensure there are no major problems.

I typically focus on the overall effect, and only use specific color-emotion associations for messaging systems, and the deployment of psychological design strategies.

Personally, I like to place loss-aversion content or any threat-avoidance driven psychological technique in the hot or reddish spectrum.

I prefer to use greenish colors for forward progress and positive messaging. And there are a few other conventions that work for me, and that I see time and time again used in ultra optimized sites.

Quite often I push most of the other UI into greyscales or or pale tones — as I don’t want to undermine the salience of those UI elements that make my tech work.

But for each of our own projects, we all need to develop our own systems for the task at hand.

Color strategies aren’t black and white, and it’s up to you to figure out the grey application.

Conclusions

When it comes to using color in emotional design, science has a lot to teach us.

The first lesson is that anytime you read universal claims that certain colors always evoke specific emotions, raise a red flag and make sure you’re not being misled. These claims are normally stuff that people invent with no basis.

Second, specific emotion-color associations do exist. But they tend to be limited to a specific group, at a specific time. This is great, because you can run your own studies and figure out what color-emotion associations will make sense to your particular target audience.

Finally, the closest universal color-emotion trends come from broad emotions. While they’re not sharp-enough to pinpoint distinct emotions, they give broad guidelines that you can use to approximate emotional color associations and then use testing to see what works best in your gig.

Cugelman, B. Cugelman, R. et al. (2019) Color Psychology. AlterSpark. https://www.alterspark.com/color-psychology/


Designing emotional color palettes without the fake science was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.