How to use Website Color Psychology to boost your conversion Rates

Picture this - so you’re sitting behind your computer, mapping out the world and your impending success, designing your ideal website, and perhaps already planning the laughs you’ll have with the likes of Elon Musk. But then, just as you’re complimenting Jeff Bezos on his tie, you come upon an unexpected problem, one that sounds simple but is actually of immense proportions in your website’s design. 

What Colors Should You Use? 

Yeah, yeah, it doesn’t sound like much, and who cares about colors, anyway? It’s the content that matters… or is it? What if you’re wrong? What if the color scheme you pick out in the next ten seconds will dictate your entire future? And also impact your chances of ever rubbing elbows with the hot-shots mentioned above.

Color and the Brain - A hidden connection

Look around you for a second. Regardless if you’re reading this in a busy coffee shop or at home, or in your office, one thing remains the same for all of you out there: all around you, you can see colors. 

Colors make up the entire world around us, and whether you know it or not, they play an essential role in the way you perceive your day-to-day experiences. A red stop sign tells you immediately that you should stop moving. It alerts you to danger, and this happens without your brain actually going through the thought process “oh, that’s a stop sign, that means I should…”. No, a stop sign triggers an immediate, automatic response, and that’s largely thanks to the bold, red color your brain has come to associate with it. If you were to travel to a different country where the stop signs were the exact same shape and had the exact same writing on them but were yellow, you would have trouble stopping in time. 

The Importance of Colors

That’s how big a part color plays in our interactions with the world around, and that’s also why the color scheme on your website will heavily influence visitors.

Because we assign a particular emotion to a specific color, the shades your brand uses carry an astonishing power of persuasion. And yes, a good deal of that is subjective and will depend on how the individual perceives a certain color. But time and again, studies have shown that the large majority of people tend to assign similar feelings to a given color.

For example, red signifies urgency, excitement, and sometimes even danger. When an Internet user sees a bold shade of red on their screen, they usually go through just such a thought process. 

We link the red color with a problem, either with the website (could it be a virus? Have I just been hacked?). Worry and anxiety start to swarm, but we quickly quiet down. It’s not a problem. My computer (and implicitly myself) is going to be fine. 

Oh, then this is something I should pay attention to - perhaps it’s a warning of some kind, or in any case important information.

This sale/announcement/blog entry/logo (whatever you, the developer, have decided to highlight with red) must deserve my attention. It merely must be important; otherwise, why would they do it in that bright shade of red?

And just like that, you’ve captured their attention. Naturally, thought out on paper (or rather, on-screen), it may sound a tad silly, but this is more or less an accurate depiction of what goes on in our brains, in the span of a few milliseconds, when we encounter the color red.

Red as a primal color

As such, it will appeal to your most basic emotions and needs (alertness, hunger, fear, etc.). 

Brands that use red as a primary color are:(either in their logo or their advertisements): McDonald’s, Kellogg’s, CNN, Coca-Cola, Nintendo.

At first, these brand names may seem totally random, but if you take a moment to analyze them, you’ll see that each of them answers a primal or basic human need. 

McDonald’s obviously, ties in with hunger and the need for nourishment. The red color featured prominently in their brand’s design subtly informs the customer that they will quench your hunger and thus converts passers-by into customers.

Kellogg’s functions in a similar manner. These brands are heavily aimed at children and do a marvelous job of combining hunger with entertainment, another basic human need. The red they use captures your attention and quickly lets you know that they can satisfy your needs.
 

Speaking of entertainment, Nintendo, a worldwide gaming brand, also employs a bright red in their logo to tie in with this need for entertainment. But they go even one better. They also use red to suggest excitement. Because that’s what people looking for games want - excitement, and that’s what Nintendo games are - exciting. If you go into a gaming store, your eyes will immediately be drawn to the Nintendo Switch selection and its bright, engaging red, only afterward drifting to the much more laid-back blue and green shades of the PlayStation or the Xbox.

Coca-Cola, with its infamous red logo, does the same on the fizzy drink market. It also answers to yet another primal need of humanity - thirst. Yes, people are likely to choose Coke over water because of sugars, taste, exciting commercials, and so on. But their decision is also influenced by the fact that the Coke bottle screams “look at me,” while most water bottles are a dull, faded blue that doesn’t say anything at all.

Lastly, CNN plays on other human needs and emotions, just as vital to our survival. As one of the most well-known news outlets in the entire world, they appeal most of all to fear and the need for knowledge. It is a basic survival need if you think about it. You need to know if a predator is coming, and what’s the color that most signifies danger? Why, red, of course! 

The Meaning of Colors in Web Design

Every color carries with it a particular meaning, and perhaps you’re not even aware of some of them, but it’s quite likely that when you read through them, your brain will go, “hey, that’s true, I do associate red with alarm”. This neurological response is built into us and hails from thousands and thousands of years of species growth and development. Red is alarming because, in our collective memory, it is associated with fire, blood, and other signals of alarm and potential danger.

This is why your brain assigns different colors, different meanings, and this is what you should keep in mind as you develop your website because the right colors can drive conversion rates through the roof. And all you need to do that, all you need is to understand how the human brain perceives specific colors. 

Yellow

• Yellow is the color of warmth and indulgence. It says, “you’ll be alright with us”. Brands that use yellow as the main color: Best Buy, Subway, Ikea, Schweppes. 

Blue

• Blue signifies trust and peace and is often used by brands to recommend themselves as a non-threatening, yet dependable household name. Brands that use blue as the main color: Facebook, Walmart, JPMorgan.

Green

• Shakespeare might’ve coined the phrase “green with envy”, but in marketing, it’s more often associated with peace, health, and relaxation (sorry, Shakes!). Brands that use green as the main color: Spotify, Animal Planet, Android. 

Orange

• As in art, the orange color in marketing is used to signify a mid-point between red and yellow, resulting in a sort of warm excitement, and commonly being associated with friendliness and cheer. Brands that use orange as the main color: Amazon, Fanta, Nickelodeon, Mozilla Firefox.

Purple

• Purple is a wonderfully versatile color. It’s often perceived as a middle color and a bit of an odd-one-out, which explains perhaps why it’s so often associated with imagination and creativity. Brands that use purple as the main color: Taco Bell, Yahoo, SyFy. 

Gray

• Gray (and black and white combos) may seem like a lackluster, bleak color, particularly when we’re trying to sell something, but don’t underestimate it. Shades of gray are often associated with calm and stability, which can be just as good an incentive to sell something as bright shades of red. Brands that use gray as the main color: Puma, Nike, Apple, Wikipedia.

Imagination exercise: Go through the color meanings again and then think about the brands that use each color. Can you see a relationship? 

 

How to Use Color to Increase Conversion Rates

 

So we have a basic understanding of how our brain responds to colors, as well as a chart of what each color means for most people. But that’s not enough to make your website and brand truly successful. You don’t just get to pick a couple of colors because you like what they stand for, and you also need to figure out which emotion/message most fits your brand.

 

We’ve seen already how some world-famous brands use the color red to both inspire a certain emotion, but to also tie in with their own brand/product. CNN and Kellogg’s may both use red but neither does it simply because they want to capture attention. They use the color’s many meanings to relate to what they’re each trying to sell, and obviously, they’re two very different products. 

Remember: There isn’t a single “best color” to use in marketing. 

Much like in life, it’s a laborious process of trial-and-error until you find the color (or most often, the color scheme) that is right for you. 

And this brings us to our next big topic… 

Website Color Psychology and Branding

So up until now, we’ve talked about using colors to encourage people to buy your merchandise, be it toys, food, or sports equipment. We’ve also looked at what different colors might mean when used for your logo design because, after all, that’s what customers will see the most and what they’ll know your brand by. 

But that’s not where the relationship between color and branding ends. Not by a long shot. But to understand the intricacies of color psychology and branding, we first need to talk a little bit about branding. 

What Is Branding?

Well, that one seems easy enough - branding is who you are, assigning a logo, webpage, and so on to match your company’s goal. Yes, and no. Branding is about the logo, yes, just as it is about converting customers, in the end, but branding is also so much more.

In designing a long-lasting and appealing brand, you’re not just picking out colors or fonts. You’re creating an image about yourself. Branding is for a business what clothes are for an individual, and when you want to make a good impression, you don’t show up with bed hair, unshaven, and wearing slacks.

You put time and effort into dressing the person you want people to see you as. The same should go for your business. 

The brand you create should reflect your company’s values, what you stand for, who you are (not only in the relevant market but also in the customer’s life). 

This is where color comes in. 

How to Use Color to Build an Enduring Brand

While bright “action colors” like red and green might work well for e-commerce actions, such as “Buy Now” or “Add to Cart”, they might not be ideal for your brand’s image. To figure out what color would work for you as a brand, you need to correctly identify what you’re going to be about and what image of your company you want the customer to go away with.

But whatever you do, match your colors carefully. Your homepage colors should be in perfect alignment with your “call-to-action” colors in order to encourage conversion. Once again, colors instigate an emotional response, and too many colors all jammed together will leave the visitor tired and worn-out, thus less likely to buy or subscribe. 

Color clash = Poor Conversion Rate

But how do you know what colors you should mix? In designing the ideal color scheme for your brand, you shouldn’t let color meanings (e.g. red for excitement, blue for stability) guide you. Instead, you should turn now to the trusty old color wheel. 

Contrast

Contrasting colors often work well together, particularly when the goal is to inspire a specific action, such as subscribing or buying something. One of the best combos of contrasting colors is red and green (since they are opposites on the wheel), but you can also play around with other ideas, like navy blue and light orange. 

Analogous 

On the other hand, analogous colors are similar colors (usually from the same half of the color wheel) that go well together. Similar shades of green, yellow, and blue work nicely, provided that they’re all of the equal intensity. For example, if you go for pastel green, then the other colors should also be pastels; otherwise, you risk a clash.

Fifty shades of the same color

Okay, maybe not fifty. But if you aren’t getting much success with the above options, you could also just play around with one given color, using different shades for different buttons. For example, the homepage’s base color should be a very light version of violet (or maybe even light pink), while the “call-to-action” button could be a deep, majestic purple. 

You don’t get a second chance at a first impression.

While it’s a great idea to test out multiple color schemes in order to understand what might work best, don’t rely on this “I can change it later” mentality too heavily. Sure, you can perform the occasional website upgrade and redesign it using a color scheme that better fits your goals. But you won’t be able to redesign your logo, your defining font, and so on. You’ve barely given your customers time to get accustomed to your logo and to associate it with your company.

Changing it will only prove confusing and unprofessional, so you must consider your options carefully.

For example, McDonald’s uses the infamous red and yellow combo. McDonald’s has always used the red and yellow combo, and it’s for this reason that whenever we see these two colors together, our brain subconsciously links it to the fast-food chain. 

Remember the stop sign example we used earlier? It’s the same thing. You don’t want your customer to take the time out of their busy schedule to try to figure out whose ad that is. You want them to know from the get-go that it’s you. 

Conclusion

One last thing we should clarify here: in this article, we’ve been working a lot with generalization, but you, as a business owner, shouldn’t. In building a successful brand, it’s paramount to remember that your customers are all individuals. They each have their own preferences, ideas, and so on, and identify the right color scheme for you and your brand, and you need to figure these preferences out.

 

Who is your target audience? What would they most like to see? Figuring this out is the key to successfully using color psychology to drive conversion.

So who are you? And perhaps more importantly, who are you talking to?