Nothing is ever black and white…or is it? Color plays an important role in our lives, brands and success – especially when it comes to your e-commerce website.
Green with envy.
Color is an important part of our culture. It can change our mood, our actions, reactions, thinking and emotions.
As you look at ways to improve our e-commerce website, you may be looking at your navigation paths or the checkout process. These are all important aspects of your e-commerce website, but don’t underestimate the importance of using colors in a smart way.
Visual appeal is crucial to your business. According to Flonomics data, 93% of shoppers place visual appeal over sound, smell and texture when buying a product.
In fact, 85% of shoppers say colors are the primary reason they buy a product.
Considering websites can’t share sound, small or much texture with their customers, color is an excellent opportunity to encourage them to convert.
Colors tell a customer a lot about your business. Your color palette can be used very effectively to draw attention to specific aspects of the site to help channel visitors to click on a call to action button or visit a specific space.
In this article, we examine real-world examples of how to to use color more effectively and look at actionable strategies for better color considerations.
Wait! Before you read anything else
We are giving you the information and insight to find the best color combination for your website. As you find ways to apply these insights to your own brand and website, make sure you remember one thing: testing is a must.
While certain color palettes and call to action colors may work well for some businesses, make sure to test it with your brand and website.
The fact is that there is no magic color that will resonate with every single customer, but that doesn’t mean you should disregard color altogether. It just means you’ll have to test and analyze colors for your particular audience.
Learn from these businesses and use tools such as session recordings, conversion funnels and heatmaps to evaluate your own colors.
Starting at the beginning: What colors say
Before we can answer how to use colors in a way that persuades people to buy from your e-commerce website, first we need to dive into the psychology of colors.
The psychology of colors can play a big part in how customers interpret your website and business. Customers associate colors with specific emotions, feelings and opinions, meaning that you can convey a lot with the colors that your business uses.
However, not all colors mean the same thing to all regions of the world.
Specific colors that resonate with North American shoppers may be different than those from Asian shoppers.
With this in mind, here are several colors and what emotions or feelings they invoke in different cultures. Information based on this infographic from globalme.net.
It goes to show how different colors can mean so many different things based on your shoppers’ cultures:
Now, let’s get down to business. I’ve listed four ways to find the best colors for your website and how to use them effectively.
Use a psychologically relevant color palette
By now you know that colors are important; it’s how your shoppers will get the first impression of your website.
According to The Institute for Color Research, “Research reveals people make a sub-conscious judgement about an environment or product within 90 seconds of initial viewing. Between 62% and 90% of that assessment is based on color alone.”
The colors on your website prime people for the kind of content that they are going to be seeing and subconsciously tells them what kind of website that they are on.
This means that when you select a color scheme, it needs to match the expectations of your target market.
Real-world example: Luxury travel company Kuoni.
The company’s website features a color scheme primarily based on dark grey and cool blue Even the white logo develops a psychological response:
- White: Not only does it complement the colors, it also reinforces a clean sophistication.
- Grey: Indicates refinement and timelessness
- Blue: Stirs an emotional response of serenity, trust, quality and reliability
Think of what you want people to feel when they come to your website and buy. While Kuoni makes sense to encourage relaxation and sophistication as a luxury brand, what makes sense for your brand?
No matter what industry your e-commerce business operates in, it is important to signify your status to potential customers. Your site colors are an excellent way to do this.
For an earthy, natural palette:
For clean, energetic palette:
For a playful, fun palette:
There are just a few of the examples out there. Let us know in the comment your favorite palettes.
Devise brand colors (and stick to it)
Branding is certainly an important thing to think about when you are choosing colors for your website.
Brand colors can help customers easily identify your business, and this can be a great way to build up loyalty and trust in your e-commerce site.
For example, do you know what colors these logos are if I show them to you in black and what? Highlight after “answer” to see if you’re right (I bet you are):
|Answer: yellow||Answer: green||Answer: blue|
While you may not get to the color recognition of these major brands, it’s still a good thing to keep in mind you build your brand colors. Using a bright, playful palette may not be the message you want to give if your brand needs to be more professional and muted.
Real-world example: VeganKind, a UK-based online vegan meal subscription box
VeganKind didn’t shy away from using color.
Its bright pink and green draw catch your eye and encourage freshness (green) and innovation (pink/magenta). Considering its vegan focus, the colors establish and reinforce its brand values and identity.
If you want to get started, you need a minimum of three colors:
- A dominate brand color
- At least one accent color
- A background color
It is important to take a look at your competitors and select a brand color that differentiates you from them. You can then use the colors you select on your logo, as well as across your site to reinforce the branding.
Tip: It can be really useful to have the hex code and the RGB code for the colors that you select. This can make it much easier when you come to have any further marketing materials designed or if you need to have something printed.
Use colors wisely
When color is used strategically on a website, the effect can be striking and successfully draw a customer’s eye.
In a Shopify collection of color schemes, DryBar provided a clear example of what happens when you utilize your new brand color palette.
The neutral tones on the background let the cheery, bright yellow pop out. It gives very specific directional clues to customers thanks to the contrast.
It all comes down to strategy. You don’t want to overuse colors to the point of overwhelming customers or make it difficult for them to navigate through your website.
And that includes all aspects of your website, including call to actions.
By now, you’re probably trying to answer a question such as “what color makes people want to buy?” After all, that’s most likely the goal of your e-commerce website, right? With a palette in mind, you need to now use the colors intentionally and strategically.
Thanks to your brand colors, you can now feature a pop-out secondary color to stand against your primary colors.
Another real-world example: ASOS, a British online fashion and cosmetic retailer
To promote a special deal, ASOS used neutral, dark colors for its navigation bar and a bright orange banner that stands out. This makes it immediately standout against the other options on the menu.
In addition, its bright pink highlight of the sale tab immediately draws in your eye. A customer wouldn’t be able to leave the website unaware of a sale.
You want your bright colors to pop, and a lot of things come down to their positioning on a page. Of course, the first point to make is that they need to be above the fold so that they can be easily seen.
Additionally, bright colors tend to work in small sections, especially in contrast to neutral colors around them.
Tip: on the subject of contrasts it is important to make sure that any writing on bright colors is in a suitably contrasting shade. Without enough contrast it makes it almost impost for colorblind people or any with eyesight issues to read.
Keep things simple
Unfortunately, many e-commerce businesses make the mistake of assuming that the eye-catching power of color can be used to no end.
In fact, bright colors may have diminishing returns if you overuse them. The trick is to keep things simple. Don’t over-complicate your website design with 15 colors.
Websites with excessive color are harder to read and can have the effect of putting visitors off rather than drawing them in.
Real-world example: designer children’s clothing sellers Childsplay Clothing
Its brand Mini Me is a collection of brightly colored clothes. On a colorful background, the playful emotion of the clothes would be lost and blend in.
Childsplay Clothing used a clever trick of the eye though. Instead, the company make the decision to make smart use of a black-and-white color palette to emphasize the products.
If customers struggle to see your products, you’re going to struggle to gain those sales. In this situation, a simple strategy proved best for Childsplay Clothing.
If you are choosing a color scheme, make sure that you are not attempting to use additional colors for the sake of it. Adding color to your site is generally best in moderation.
Wrapping it all up
When faced with the task of selecting a color scheme, it’s important to take several steps. Understanding your market is the first, and this is closely followed by checking out what your competition is doing – you want to stand out from the crowd.
Interestingly, both men and women rate blue and green as their favorite colors – so this could be a good place to start if you are undecided.
Finally, it’s important to test the success of a color scheme – try it out and analyse key stats like time on page and conversion rates to see what kind of a difference it makes.