The Psychology and Emotion Behind Color in Web Design
I was a really bad designer when I was just getting started in the mid 2000s.
Really, there’s no other way to say this.
And it’s not that I was completely useless with the tools or anything. The problem, as I see it now, was somewhere else.
To summarize my shortcomings in one sentence; I used certain colors not because they were in tune with the goals and the audience that the site was trying to reach, but because I simply liked them.
For instance, I’ve liked shades of green most of my life. So guess what … my early designs were predominantly green. No other thought went into it.
“Hey, I like green, people like green, so the site should probably be green!” – is not a good way of thinking about color … go figure.
But then I realized that perhaps the choice of color deserves a little more thought when working on a new site. Perhaps it’s not something that should be decided upon during a three-second brainstorming session. Perhaps it shouldn’t automatically resemble the color scheme used in the site’s logo either. Perhaps this is a more complicated issue.
More so, perhaps color is one of the most effective and powerful tools that a designer has at their disposal after all.
And the science seems to confirm this. Various studies indicate that color arouses specific emotions. And if that wasn’t enough, it turns out that different colors are connected to different emotions in different cultures.
So how to find your way around all this? How to use the right colors that will help you achieve a specific goal on a specific website, targeted toward a specific audience? That’s a lot of questions. Let’s try answering some of them today.
Step #1. Think about your goals
The right choice of colors is about much more than just picking what looks right/attractive, or what’s in tune with the general branding of the company that you’re creating the site for.
The journey should actually start with the goals that you or your client have set for the site.
Setting the specific niches aside, in most cases, a website is meant to convert – to resonate with a given audience and get them closer to taking advantage of an offer.
Therefore, a good starting point is defining what the goal is exactly, and what sort of actions it expects of the visitor to take. For example:
- Is the action dependent on an emotional response?
- Or is the action a more calculated one, which requires the person to be in a calm state?
- Does the conversion involve money? In which case, does the person need to feel safe about the environment in which they are?
- Is the action meant to deliver gain to the visitor or prevent loss?
- Is the visitor already in the right emotional state when they come to the site? Do you just need to keep them in that state?
Answering these questions should give you a better idea about the emotional state of the visitor that’s perfect for convincing them to convert. By having this knowledge, you can use various design tools to get them in that emotional state or at least help them stay in it.
Step #2. Understand your audience
The first thing that we need to keep in mind is this:
Colors are not universal.
Meaning that depending on who you want to resonate with, you’ll need to use different colors to arouse different emotions. The meaning of colors for different people is a result of a lot of factors. Geographical location, cultural backgrounds, religion, political trends, major current events taking place at the time, all play a role here.
Therefore, knowing what emotional state you should be aiming for is only half of the puzzle. The other half is knowing how to help your audience enter that specific state and thus speak with them effectively.
The worst thing you can do is go with colors that feel right to you personally, based on your own cultural background, and not paying much attention to the cultural backgrounds of the target audience. Doing so, your success will be highly dependent upon how similar the audience is to you as a person.
Just to give you one example, using green for your call to action buttons won’t always work for all types of audiences across the globe. For instance, for some South American cultures, green is associated with death.
So first, do research on the exact color associations in the cultural or geographical demography of the audience that you want to reach.
A good starting point for that is this infographic. It’s a nice general overview of some of the basic colors and their significance across the different cultures. Another great resource is this article. It provides slightly more in-depth descriptions for specific colors and their cultural significance.
I should probably elaborate on what we should aim for here. At this point, you’re not looking for the final colors that you’ll use on the site, but rather for a guideline on what is “okay” and what’s a “no-no” in relation to the cultural background of the audience you want to resonate with. You’re doing this to associate specific colors with the emotions you want to arouse (in relation to your site goals).
Step #3. Color schemes and how to use them
The difficulty with color in web design, and in various forms of art for that matter, is that you can’t just use one single color. You need at least a handful of them.
So having your notes from the previous step – your color guidelines regarding the things that need to happen in the design – you can start experimenting with individual color schemes. To do that, I recommend taking a look at Adobe’s Color Wheel tool. It provides you with a nice UI, and has all the popular color scheme structures built in. Such as:
Complementary color schemes
This color scheme consists of two colors that are opposite each other on the color spectrum. This creates a vibrant look due to the high contrast of the colors. However, the downside is that it doesn’t give you much options when you need individual colors for different elements in your design.
Analogous color schemes
It’s when all the colors fit within the same area of the color spectrum. The colors are complementary, and differ mostly in their vibrancy.
Triadic color schemes
The most balanced of the color schemes. Usually also the safest and the easiest to use color scheme. It’s composed of three colors that are on separate ends of the color spectrum.
Compound color schemes
Also called split complementary. Usually composed of four colors – two contrasting pairs of complementary colors. It can be more difficult to use, but it allows you to take advantage of accent colors more effectively.
The secret to good color scheme use is to not go too crazy when integrating individual colors in your design. You start with your base color – the color that’s going to be the core of the color scheme. Then, you build your color scheme on top of that color – for instance, by using the Adobe’s Color Wheel.
That main color should resonate with the main emotion that you want to arouse in your audience. It should become your main tool – the color you rely on the most to get the job done.
Then, the other colors in the color scheme are delegated to do their own side-tasks that reinforce the main goal in various ways.
Example (the use of blue – main color, and yellow – side color):
Which brings me to:
Step #4. Have a purple cow
[Hint: Don’t have the actual purple cow. Although you could.]
The purple cow is something I was first introduced to when reading Seth Godin’s book of the same title.
In a nutshell, the book is about transforming your business by being remarkable. One of such ideas is making sure that what you’re doing can’t be missed or overlooked – much like a purple cow.
So to translate this principle into design, a good idea would be to use your accent color (accent color is something utilized heavily in material design) in a clever and even exclusive way.
Specifically, use your accent color – ideally a color that’s in contrast to your main color – only for your call to action elements, which usually means your buy/conversion buttons.
Doing so will put incredible emphasis on those elements and make them highly visible.
Example (notice the green button – the only green element on the page):
Note. Make sure that your accent color is in tune with the emotional response that you’re hoping for. Refer back to the cultural associations of colors, or the list at the end of this post.
Step #5. Helpful hand – use neutral colors
The trick about emotions in design is that you can’t use too much of a certain emotionally loaded color. Otherwise you’re risking making the message too aggressive and suspicious enough that it backfires.
For example, take a look at this design:
PayPal is very clever about their color use. Their main color is blue – which conveys security, safety – but they don’t make the whole page blue, just a number of specific elements (including their logo). Because of this, the design isn’t overpowered and doesn’t look suspicious – like it’s trying too hard to convey its message.
PayPal uses a lot of neutral colors. In their case: white and shades of grey.
Neutral colors are great when making up the backdrop of your design. They allow you to take advantage of the more emotion-heavy colors only for significant parts of the design and for the accents (like buttons).
The most common neutral colors – depending on the audience you’re trying to reach – are: white, black, grey, brown, beige, and cream/ivory.
Using those colors in the background helps the other colors stand out more and draw more attention to themselves, potentially making their impact bigger.
One more thing that’s great about colors like black and white is that they look well with almost any color scheme. This means that you can work with them freely and not worry that something is going to look off (not the case with grey, brown, beige, or cream/ivory though).
So in a nutshell, don’t go too far. Use your main colors where they can pack a punch, so to speak. For the rest, neutral colors will help you make the design well-rounded and not too shouty.
Your color cheat-sheet
Okay, so we’ve been talking a lot about how to construct your color scheme and how to go about selecting colors. So now, let’s go over some of the most basic colors, and point out their usual emotional associations in the Western Culture.
Associated with: sophistication, glamour, security, power, edginess, efficiency. But also: oppression, coldness, heaviness.
Associated with: hygiene, virtue, sterility, purity, cleanness, simplicity, sophistication, efficiency. But also: coldness, unfriendliness.
Associated with: neutrality, formality, melancholy. But also: lack of confidence, depression, lack of energy.
Associated with: physical courage, power, strength, warmth, energy, masculinity, excitement, importance, youth. But also, danger, aggression, strain.
Associated with: intelligence, communication, trust, safety, openness, reliability, efficiency, logic, coolness, calm, peace. But also, coldness, lack of emotion, unfriendliness.
Associated with: optimism, happiness, enthusiasm, confidence, self-esteem, emotional strength, friendliness, creativity. But also, irrationality, fear, depression, anxiety.
Associated with: harmony, balance, refreshment, rest, growth, stability, finances, reassurance, environment, peace. But also: boredom, stagnation, blandness, enervation.
Associated with: spiritual awareness, containment, luxury, romance, mystery, authenticity, truth, quality. But also: introversion, decadence, inferiority.
Associated with: physical comfort, food, friendliness, energy, warmth, security, passion, abundance, uniqueness, fun. But also: deprivation, frustration, immaturity.
Associated with: physical tranquility, nurture, warmth, femininity, love, sexuality. But also: inhibition, emotional claustrophobia, physical weakness.
Associated with: seriousness, warmth, nature, reliability, support, sturdiness. But also: lack of humor, heaviness, lack of sophistication.
In the end, the path to good color use in web design follows along these steps:
- Thinking about the goals of the site. Making sure that you have the emotional response that you’re hoping for described and that you know exactly what you’re aiming for.
- Understanding the audience. Looking into the background of your audience and picking the main colors that are likely to create the response that you’re hoping for.
- Picking a color scheme that’s based around the main color – the one that’s going to do most of the job, emotion-wise.
- Having a purple cow – picking a good accent color that’s highly noticeable and still in tune with the main emotion you’re aiming for.
- Using neutral colors to put it all together.