As a designer, color psychology may not be something you think about regularly, but you’re likely aware that something red can make you feel hungry and that a bright, sunny yellow room can make you feel lighthearted and happy.
Applying the psychology of color to eCommerce sites web design can also have an emotional impact on-site visitors. Which colors you choose for the design can help with brand recognition and even how likely a customer is to trust your brand.
Color psychology is basically the way color impacts the emotions and behaviors of people. Does it make them want to purchase an item? Does it make them happy, or does it show a serious side?
However, color psychology isn’t as simple as red makes you hungry, and blue makes you feel calm. There is a lot more that goes into color psychology, and it has many layered facets. More so, if you are doing this for eCommerce sites, color psychology is all the more important.
There isn’t a universally accepted standard for how color affects everyone. The emotions or feelings color creates is very individual from person to person. Your own life experiences can even impact how you see a specific color and the feelings it evokes.
In the Impact of Color in Marketing Study, researchers found that 90% of first impressions come from whether the visitor feels color is appropriate to branding and if it is appropriate to what is being sold.
If the customer feels the color isn’t appropriate to the brand, they aren’t as likely to trust the company.
The takeaway?
Be aware of perceptions of color, such as dark colors, blacks and grays for rugged, manly products and pink and purple for girly products. Just don’t be so tied to color theory, though, that you ignore branding or the overall aesthetic of design.
Start with a really great responsive design and then you can tweak the colors to find the best ones for your particular brand. You’ll also want to be aware of the balance of white space and if the overall design is pleasing to the human eye.
How to Use Color Theory in eCommerce sites design
When it comes to applying color theory to eCommerce design, the best place to start is with which colors make users want to buy your product. About 62-90% of the opinion a customer makes in the first 90 seconds on a website is formed by color choice alone.
Recommended Reading:
25+ Best eCommerce WordPress Themes for Online Stores (2020)
With that in mind, you can see why it is vital to choose the right colors for your design.
The last thing you want to do is turn off customers so they bounce away from your website.
As mentioned before, which color might entice readers can depend on your overall branding and if that customer perceives it as appropriate for your brand.
For example, if you are selling motorcycle accessories, you likely wouldn’t use a pink buy button unless you are specifically selling girly accessories to women. You do want to have some consistency throughout the overall design.
So, if you decide to use red call to action (CTA) buttons, then your CTA buttons should maintain that color throughout the design. The one exception to this is if you just want to draw attention to one particular button and not the others.
What is probably even more important than the color you ultimately choose is making sure your colors are consistent throughout your site. If you decide to use red to create a sense of energy and freshness, then stick with that color palette from call to action buttons to featured headlines.
Be sure you don’t use clashing colors that might create a clanging symbol of annoyance for website visitors.
Source: WebpageFx
Navigating Color Choices - how do I make the best choice?
Knowing which colors to use when can be a bit more complicated, but it is possible to figure out what works best for your site.
For example, if you want to create a feeling of trust, blue can be a good choice. We’ll explain a little more below about what types of emotions and feelings different colors might target.
It is also smart to know which colors your competitors are using and decide if similar colors would work well for you or if you want to stand out from the competition with very different colors. Some sites utilize color very well. Here are a couple of examples:
- Dick’s Sporting Goods utilizes a dark green to make one think about the great outdoors. Since they sell outdoor equipment, this is the perfect choice of color for them. You’ll find this color in their headers, sales banners and some CTA buttons.
- Rue 21 is a online clothing business that is aimed at teens and young adults. Their clothes are fresh, inexpensive and fun. It isn’t surprising that the colors used on this site are young, fresh, bright blues and pinks. Notice, too, that the focus is on the cheap pricing with little bright pink bubbles showing the different price ranges in the store. These are almost a call to action for the site visitor.
Target Personas and Color - who is my product intended for?
It is vitally important to understand your target audience and the types of colors they’d expect from your type of website. So, your first step in choosing a color palette should start with studying your target demographic.
If you’ve not yet created a user persona for your target audience, then you should create at least one.
This is basically a fictional person who represents your most likely customer. You can give him or her a name, traits, potential career and so on. This can help you better understand the audience to whom you are writing for, and you can then gear your content — and your color choices — toward this personality type.
For example, it has been shown that men tend to prefer blue by 57%, followed by green (14%) and black (9%).
One example of the use of blue combined with a masculine look is Mountain Productions Rigging Equipment and Services. Notice how the colors are deep and dark, giving the entire page a masculine look. Pops of blue bring in a favorite color, creating a strong call to action, and the page has enough white space to balance the entire look.
Women tend to prefer blue as well by 35%, followed closely by purple at 23% and red at 9%.
A good example of the use of purples in a web design can be seen in the website for Claire’s, which sells affordable fashions and jewelry. This website uses some bands of purple, but it also utilizes strong splashes of bright color to show their youthful side, particularly in the image of the young girls wearing Claire’s accessories.
However, the site also pulls in a bit of blue, understanding that blue is a favorite and trusted color among women. You’ll even spot some red on this website, proving that those who designed it clearly understand most women prefer these colors above others.
Ultimately, you really can’t go wrong with blue, since most people like the color and see it as trustworthy and calming.
Colors and What They Convey
While you should keep in mind the impact a color has can vary based on the experiences of the people viewing a particular page, there are some rules of thumb about what each color means that you can apply to your designs:
1. Red
Red tends to convey:
- Energy
- Power
- Passion
- Love
Red can create excitement, and it attracts attention. Notice how the website design below is bright and energetic.
Fantasy Shopping uses red in both part of the heading and to pose a stronger point to a question and in the design itself. Notice how the red draws your attention to where the designer wants it to go.
XStore offers a softer red themed template but it continues to have a bold statement with the diagonal lines coming toward the center. The focal point leads you right to the main text.
2. Yellow
Yellow often evokes:
- Joy
- Energy
- Warmth
- Cheerfulness
Yellow often creates feelings of happiness and lightness.
Lipton Tea does an excellent job of using yellow to create a bright and sunny mood. Not only is iced tea associated with happy times, but also with sun tea and summer.
The bright yellows in this design make you happy and might help you picture the fun of a backyard barbecue. It makes you want to run right out and buy some tea so you can make your own sun tea brew, doesn’t it?
Notice how even the product photos reflect this use of sunny yellow.
Lemon’s template also conveys warmth and liveliness through their design with a hint of yellow throughout the various pages.
Users are encouraged to move their cursor across the top nav, changing the translucent black to a stroke of yellow. This design not only highlights energy but it invites others to feel rejuvenated while scrolling through their site.
3. Black & Grey
Black and grey often create a sense of:
- Authority
- Power
- Strength
- Masculinity
- Neutrality
These colors also create a feeling of trust and dependability.
Harley Davidson uses blacks and grays very effectively to create a powerful, masculine website that speaks of power and authority. Notice how the colors are all fairly dark except for the orange CTA button.
You can’t help but have your eye drawn to that button, which effectively funnels the site visitor where the company wants them to go.
Read more about black websites and dark web design here.
Phoenix theme also uses black and grays within its template and has a strong and sophisticated persona. It’s a slick template with minimal distractions.
This type of site appeals to the business leaders who don’t want gimmicks and came to the site for one purpose. If you’re interested in implementing minimalist web design techniques and more, you might want to check out this article about minimal WordPress themes.
4. Orange
Orange tends to promote:
- Happiness
- Excitement
- Warmth
- Sophistication
Like red and yellow, orange can create a feeling of energy and happiness. However, it is also seen as a more sophisticated color. A good example of the use of orange in a design is Sunny Delight Beverages. Since these are orange-flavored drinks, it makes sense that they would use this color in their design.
Remember that part of the psychology of colors is using colors the site visitor would expect your brand to use. Sunny D utilizes this concept very well. The design uses orange edging, orange navigation buttons and orange in their images and logo. The juxtaposition of the deep blue and white space offers a sophisticated look that shows the beverage isn’t just for kids, but rather for all ages.
Notice how Omega’s template has so much vibrancy through their design because of the bold orange bar. It’s an inviting layout and all of the features they want to point out are in orange. Esthetically, this simple design could hold a lot of value to a potential company.
5. Green
Green often conveys:
- Nature
- Growth
- Money
- Fertility
Green evokes feelings of calmness and relaxation. You’ll often see brands that are eco-friendly or related to the outdoors using this color. Also, financial companies might use green to show that you can make money — think banks, money blogs, etc.
John Deere is good example of the use of green in a website design.
They use a very specific shade of green, and it’s well known around the world. The brand’s tractors come in the green and yellow colors, and so it only makes sense these colors would show up in John Deere’s website design.
After all, country songs have even been written about “John Deere Green.”
Notice how the site example below utilizes the bright green, but it also has a nice balance of neutral colors to keep the green from being too overwhelming.
A professional designer can take a look at the overall balance of the page and make sure text is showing up in a way that is readable, but that still ties in the colors to the overall brand concept like how Badgeland in NZ uses the color green to reflect their brand on the site.
This is one of the best examples of a site utilizing what is already known about their brand’s color and translating it into their design concept in a smart way.
Adeline Fashion combines environmental stimuli and their market within the template. It features natural esthetics within the design, showing how a brand that is more nature oriented can customize this template and still have an organic appeal.
6. Blue
Blue is usually seen as:
- Trustworthy
- Calm
- Wise
- Serene
There are many different shades of blue, and each shade can create a different emotion. For example, a deep royal blue can create the impression of royalty and wealth. This is a good color for luxury brands to use. On the other hand, a bright aqua can create a feeling of youth and casualness. A light blue can create a feeling of calm.
Think about the things you associate different shades of blue with and which shade represents your brand the best. There are many different examples of companies utilizing the color blue in design.
Remember that blue is a favorite color among both men and women, so it makes sense this color would show up often in various website designs.
One example of the color blue used effectively in a design concept is Skype.
The very name makes you think of the sky — and sky blue. Skype incorporates this expectation in their logo and throughout their design. Notice how they create a balance with some neutral colors and then add a pop of color in blue with their call to action.
In addition, using bright colors can indicate youth, fun or femininity. Just be sure you use those colors in moderation, or you risk overwhelming the design and the site visitor. The overall aesthetic should be pleasing and simple to navigate.
Also be aware of using yellows and other light colors that might not show up on white or might strain eyes.
Some people prefer to use brighter colors on a dark web design.
However, a dark web design might not completely match the tone of your product offerings. Keep in mind that a dark design can create an imposing, heavy and masculine feel. The example above of Harley Davidson works really well with dark, bold colors.
However, if you are trying to sell nail polish, this look probably is not for you.
VG Strepre features a similar color palette with its template and also uses rounded buttons. The complementary color highlights specific CTAs and work well with the over feel of the site.
The last thing you want to have is your CTAs to feel overwhelming.
Split Testing to See What Colors Work Best With Your Audience
Since individual perception can have such an impact on what colors work best, one smart thing to do on your own website is to figure out which colors your own target audience prefers. You could survey them, but the answers might not be as accurate as conducting some simple split testing to see which ones they respond best to.
You can set up different landing pages and track the results of conversions, time spent on the page etc.
Some things you might want to test include:
- Color of headlines
- Color of CTA buttons
- Color of background
- Balance between main color and neutral colors
Try different combinations and see which ones work best for your site. Use bright bold colors for your CTA (red, bright pink, blue).
For example, Nature Air tried out 17 different landing pages to see which one had better conversion rates. Through A/B testing, they found that the more prominent CTA colors increased conversions by as much as 591%.
In addition, Performable did a test where they swapped their homepage CTA button from green to red and saw a 21% increase in conversions.
Red is an attention-getter no matter how you cut it, and it is a color you should at least incorporate into your site occasionally for a call to action. Do your own A/B testing with this concept and see what kind of results you obtain.
Color Psychology Takeaways
Color psychology has so many different elements because people are unique individuals. Even the culture from which a person hails can create differences in how they see different colors.
Your first steps in determining which colors to use in the design should start with figuring out who your target demographic is. This is an essential step for color psychology and eCommerce sites.
Next, take into account the colors the majority of people associate with the type of product being offered. Look at your competition to see what colors they are using. While you want to be unique, you also want to stick to at least some conventional standards.
Finally, conduct some A/B testing to be sure you have analyzed everything correctly and be open to changing things if needed.
Understanding color psychology is important, but don't be so tied into it that you ignore basic design techniques or common sense.
Please leave a useful comment with your thoughts, then share this on your Facebook group(s) who would find this useful and let's reap the benefits together. Thank you for sharing and being nice!
Disclosure: This page may contain links to external sites for products which we love and wholeheartedly recommend. If you buy products we suggest, we may earn a referral fee. Such fees do not influence our recommendations and we do not accept payments for positive reviews.
and many more ...