How to Use Colour Psychology in Web Design for Maximum Effect

13 min

In This Article

The power of colour can be easily underestimated. Without even knowing it, colours can influence how people feel and how they behave.

Subconsciously we are all making decisions every single day, leaning towards colours and textures that we prefer.

You can reflect on these choices by looking at the clothes you where, the car you drive and the colour scheme that you have chosen to decorate your home with.

Colour Is Vital.

Colour is now just as important as the web design itself. Studies suggest that colour can increase brand recognition by around 80% - which is massive. And let's face it, you really don’t want to be known as the ecommerce business that uses an “ugly colour palette”, do you? Likely not.

Colour psychology is now at the forefront of modern marketing and website design. In fact, colour is now part of every online store and their unique brand.

Imagine as a new business, being able to harness this power for your own personal brand. In this blog post, we will show you how. 

What Is Colour Psychology? 

Colour psychology is the study of how colour affects human behaviour. It is a relatively new field of research but it is growing in popularity.

There are many different theories about how colour impacts our moods and emotions. Some believe that certain colours can influence our behaviour, while others believe that colour is simply an emotional response to stimuli.

Not only does nailing colour psychology give you a creative edge, but it also ensures that your online store is memorable.

Let’s discuss a few options.

Red

What does the colour red symbolise to you? For most people, it's the colour of physical blood pumping around the body. It's associated with excitement, energy and love - which is why this colour can literally increase our heart rates. But it can also symbolise anger, danger and violence too. 

So how do you use red appropriately? Ideally, it should only be used as an accent colour and not the main branding colour. For example, red ties in perfectly with emergency services and healthcare, fashion and any sports themed site.

Red can be used as a sharp contrast for almost any website, however it can be overpowering if used in excess. Oxide have opted for a muted, deep red for their website. You can see how much the whole atmosphere changes, if you use a brighter cherry red as Preuve has.

muted deep red promotes excitment, energy and love

red also symbolising anger, danger, and violence too

Generally, it isn’t a suitable colour for luxury brands, any outdoors related content or professional services such as accounting, finance or tech. If you are wanting to sell luxurious items, it's best to avoid red altogether.

Yellow

Yellow is the most vibrant, exciting colour in the wheel. It’s closely associated with happiness, sunshine, brightness, confidence, positive outlook and youth. However in some situations, misuse of  yellow can portray a sense of cheapness and potentially deceit.

For this reason, its best to avoid using yellow for a professional website and instead focus on marketing materials that are more subtle. Future London Academy have done an incredible job incorporating this difficult hue into their website.

yellow promotes happiness, sunshine, brightness, confidence, positive outlook and youth

If you’re planning on using a bright yellow for your site, we would recommend using it sparingly. Softer, pastel yellows can be used more because it's great for drawing attention to text and CTAs without overpowering the viewer.

Orange

Orange is viewed quite similarly to yellow. It's an exciting and warm colour, but can also be associated with warnings and caution. 

Orange is perfect for drawing attention to calls to action, like subscriptions, clearances and online sales. This colour is very popular in eCommerce, childcare and automotive.

Although it's generally less in your face compared to red, it can still be overpowering so use it carefully. We think boost have managed to balance the orange in their website so well, its the right shade and is quite invigorating to look at.

orange promotes warnings and caution

Green

Green is symbolic of nature, calmness and balance. It is scientifically proven to be subconsciously associated with health, fertility, prosperity, growth and good luck .

While it rarely has negative associations, it can be the colour of envy. Still, it’s one of the most harmonising colours in our colour spectrum and drive sales sky high. Amazing stuff, right?

In terms of website design, green is one of the easiest colours to place because of how naturally our eyes take to it. It's the perfect colour for science and tourism industries, as well as medicine, humanitarianism and the environment.

Because of how organic it appears, it's best to avoid using green with luxury brands and technology. As a general rule of thumb, green and digital products do not mix well together.

Brown

Brown is a very natural colour, too. It’s of the earth's crust and rugged mountain ranges. Brown is almost universally associated with rich chocolate flavours and with coffee too, and is therefore perfect for food-related website design. Just Desserts has played up the rich chocolate-brown of their website, with mouth watering effect.

brown promotes rich chocolate flavours

Think about using brown if your aim is to stimulate appetite and hunger. It can also be paired well with animal services and veterinary. Lincor have used a soft beige brown to showcase their lush watches, and we think it pays off.

lincor uses soft biege to showcase their lush watches

While brown is a sturdy colour, it can also be quite boring. It's best to avoid brown for call to action buttons, or you will find they aren’t clicked too often. 

Blue

Blue can be such a grounding, incredible colour. It’s associated with the world's deepest oceans and is refreshing to the human eye. It is also the colour of trust, dependence and loyalty.

This is why some of the world's largest businesses use blue - it stands for all the things consumers want from their product or service, reliability.

And as if blue wasn't used enough to boost global retail ecommerce sales, its also excellent colour for health care, dental, legal and technology. 

The most important thing to remember when using blue in web design, is that the shade of blue matters. Any freelance designer or large design services will be able to tell you this. See how Zero uses a medium sky blue to highlight their website below.

xero uses blue to promote grounding feelings

The darker, royal blues can sometimes appear quite harsh and cold. Most businesses will avoid this shade. However if you choose to use royal blue, you can offset it with a warmer, more vibrant colour such as pink.

Interestingly, blue has been associated with a reduction of our appetite hormone, so be careful using this in food and food delivery related website design.

Purple

This is our favourite colour for a reason. For hundreds of years, purple has been the hallmark colour for royalty and ultimate wealth.

It is the visual embodiment of sophistication and class, mystery and conversely respect. It is such a complex colour that can be utilised in a magnitude of ways. 

Dark purples give off this incredible sense of luxury, almost like a soft velvet sitting on the site. Lighter purples give off more of a spring, young, romantic type of energy.

For years this colour has been used in the beauty industry too, especially to showcase anti-aging beauty products and luxury makeup brands.

Overall, there aren’t too many situations in which this colour cannot be used because it is so versatile and interesting. Semrush have done a great job at incorporating this dynamic hue into their website.

It is fairly soothing, so if you’re aiming to nab the attention of your viewers - it might be best to choose another instead. That being said, in all other cases feel free to use it liberally. 

the colour purple in web design promotes royalty and wealth

Pink

Pink is a soft and feminine colour. There’s almost a fragility to it, like the petals of a flower. Some darker tones, like magenta and fuchsia, can be loud and exciting for the eye too. It is also the colour of love, romance, connection and emotional attachment.

In addition to feminine products and floral design, pink is also perfect for baby brands and certain types of confectionery too.

Kylie Jenner’s ‘Kylie Skin’ uses pink effortlessly in its web design, to deliver that feminine touch. It’s hard to overdo pink in web design. As long as you have some other colours in there to break it up, you can pretty much go crazy with it. 

pink in web design is usually used for feminine products

Black

Black is the powerhouse of all colours. Of all in the spectrum, black is the most diverse in terms of what we associate it with.

Black can be seen as a strong, powerful colour, commanding respect and authority. It can also represent elegance, sophistication and sleekness. And of course, black is also the hallmark of death and loss too. Such a broad application, right? 

Black is perfect for luxury brands, fashion statement pieces and high end cosmetics. Chanel uses black as its signature colour to create drama and a sense of lavishness.

On the flip side, using it too much can become overwhelming quite fast. We recommend that if you are an ecommerce platform interested in utilising black in web design, that you use it as a statement piece and offset it with plenty of white space.

the colour black is seen a strong, powerful and commands respect

White

The colour of purity, peace and crispness. It doesn't matter if you are in the business world or not - white is a secure, grounding colour that is full of virtue and calmness.

Use of white is one of the hottest business trends this year, simply because it balances other colours so well. It’s used widely in healthcare, and is great for technology companies too. 

If paired with the right accents, like gold, silver, chrome, then it can also be used for luxury goods too. Use white wherever it fits, you can do no wrong really. 

Your Target Audience As An Online Retailer

Everyone perceives colour differently

The most important thing to remember about colour psychology is that everyone perceives colour differently. What one person finds calming may another person find stimulating. That's why it's so important to understand your target audience before you start designing your website. Once you know who your target audience is, you can choose colours that will appeal to them on an emotional level.

Despite your industry or your own personal favourite colour palette, it is a smart business strategy to use colours that appeal to your target audience. This just makes sense.

Global Data

You better believe that there are large scale studies conducted to identify the preferences of the masses. We took a medium sized dive down that hole, and here’s what we have found. 

  • The world has a favourite colour - and it is… blue. Over 50% of all males on this planet, and just over a third of all females have said that blue is indeed their favourite colour. 
  • Men love blue, green, black and red the most. Women prefer blue, purple, green and red. There are some similarities, so if any of these colours suit your industry and personal feel for your website - go with it! 
  • Only a small portion (we are talking less than 5%) of the global population like yellow, orange, brown and white. Maybe don’t use these as your primary brand colours if you can avoid it.

Population Variances

There are other really important things to consider regarding your audience also. Some of these facts, you may not have expected. 

  • Fact: babies cry much more in rooms painted yellow. If you ever want to sleep again, avoid it at all costs. 
  • Fact: pre-adolescent children prefer bright primary and secondary colours. 
  • Fact: teenagers like complex colours due to their exposure to computer graphics, and almost always go through a black colour phase too. 
  • Fact: young adults do not tend to differ much from teens, but their tastes do begin to change at around 25 years of age as they finally find their feet. 
  • Fact: adults prefer softer, less ‘in your face’ tones and are much less likely to experiment. 

It’s Time To Apply This Knowledge To Your Online Store

Selecting The Right Colour

Colour psychology is more than just selecting the right primary colour for your website. It’s about how that colour is used to create meaning for your viewers, and how that meaning will draw on emotional cues deep in their brain. It’s about how you place the colour, your use of accents and tones, and the depth and scale of white space too. 

For years web designers have recommended the 60-30-10 rule. This is a rule in which your dominant colour is used across 60% of the website, your secondary colour for 30% and your accents using up the remaining 10%.

It’s a great idea to stick your primary colour into a colour palette generator. This will give you a great idea of the hues and shades that would pair nicely with your chosen theme. By selecting the right colours, you’ll increase your website conversion rate, guaranteed. 

In addition, the way you use colour can also have an impact on how effective your website is. For example, using too much of one colour can be overwhelming and off-putting, while using a variety of tones can be visually appealing and inviting. Pay attention to the overall theme of your website and make sure it creates the right atmosphere.

Finally, don't forget that colour can also be used to highlight certain elements on your website. If you want people to pay attention to a particular call-to-action, for example, using a colour that stands out can be very effective.

A Case Study

There’s an excellent study that was conducted, highlighting just how powerful colour psychology is not only for website conversions but brand growth too. Take a look at the image below. 

a case study to highlight how powerful colour psychology is

This website was highly geared towards a green colour palette. To test their colour theory, A/B testing was performed - one green and one red CTA. There were a total of 2000 page visits during the two days of testing, and each click on the CTA was recorded. 

So what happened? Well… the red button outperformed the green button by 21%. That’s massive. 21% more people clicked on the red button compared to the green.

Absolutely nothing changed once the button was clicked, the visitor still ended up in the same place. But the enticement to click a red button is known to be much higher than other colours, and this is just proof in the pudding. An increase in conversion rate of this scale, means massive downstream effects. 

Final Thoughts

You now know that colour psychology is a very real factor in great website design, and is perhaps far more important for website conversion than you originally thought possible.

As behavioural scientists study the effect of colour on human behaviour more, patterns are starting to emerge - it only makes sense to utilise this knowledge for your online store success.

Work closely with your designer. Pick someone who loves design and will bring your vision to life. And if you're doing this yourself, seek out some design support resources to help you get underway.

Think about your industry and start building a colour palette that feels right for your brand; think about the message you want to convey. Think about what you want your customers to feel, when they visit your site.

Factor in placement of colour and shades across your website, and what colour you decide on for your calls to action. All of these thoughts will play a major role in converting your website visits to sales. 

What's Next?

If your eCommerce store or website is sitting on Shopify, how about you grab our free web design audit?

As part of this audit, we review your eCommerce store and give many actionable tips to take your eCommerce store to the next level.

Let's make magic

We live on the leading-edge of eCommerce.
You can too.