How To Select the Colour Of Your Web Design?

How To Select the Colour Of Your Web Design?

Choosing the colour of your website involves more than pointing to a colour chart and saying, “that one” simply because you like it.

In fact, when choosing your website colour palette you should be thinking about your industry and your target market. How will your customers interpret your colour scheme, and what actions will those colours inspire them to take when they visit your site?

Colour communicates on an emotional level. Tapping into the emotions of your potential customers can be a game changer.

Why is the colour of your website so important?

Why is the colour of your website so important?

Yes, there’s much more to choosing your website colour than aesthetics and favourites. If you want to instantly create the right impression of your products and services to influence how visitors interpret your brand, you need to make the right colour choices.

According to WebFX, almost 85% of consumers say colour is the primary influence in choosing a particular product. If colours influence buying decisions, and your website is your shop window, your colour choice matters.

On a practical level, many people have colour vision deficiencies, particularly with reds and greens, so when considering accent colours to complement a primary, you need to be sure that the differentiation between them is clear to all.

Choosing a website primary colour

Choosing a website primary colour

Your primary colour must authentically represent your brand and inspire your customers. If you already have a coloured logo, your primary colour should match your branding for consistency.

  • The 60-30-10 rule is a good indicator of how much of your website should be in your primary colour:
  • 60% primary colour
  • 30% secondary or background colour
  • 10% accent colour
  • When choosing a primary colour, it’s important to understand the psychology of colours. This will help you choose a shade that elicits the customer response you’re striving for.

The psychology of colours

The psychology of colours

Marketeers subscribe to the well documented theory behind the psychology of colours. Each colour represents different personality traits and emotions that are used by designers to create a reaction.

So, what does each colour mean and when should it be used?


Youthful and optimistic.

Yellow should be used to grab attention so it’s well suited to Call to Action (CTA) buttons and other areas of the site that need to be highlighted. It doesn’t work well usually as a background or primary colour.


Energy and vibrancy.

Red increases the heart rate and creates urgency which is why it is used for clearance sales. It’s ideal for attracting impulse shoppers.


Trust and security.

Popular with banks, financial institutions and healthcare, blue creates an aura of calm, trust and professionalism. Dark blue or navy appeals to the budget-conscious.


Wealth and relaxation.

Green constitutes health and tranquillity. Of course, it’s also connected with environmental campaigns as it denotes nature and represents growth.


Aggression and excitement.

Orange is often used to represent a cheerful, confident brand. It signifies warmth and is often used for CTAs such as ‘buy’, ‘sell’, ‘subscribe’, ‘find out more’ and so on. Orange is also often used as a cautionary colour.


Gentle and romantic.

Traditionally, pink has been used to appeal to women, girls and traditional buyers. Depending on the shade it can either be comforting, tranquil and neutral, or passionate and strong.


Soothing and calm.

Connected with royalty, wealth, wisdom and success, purple is popular in the promotion of beauty and anti-ageing products. Purple is often used to represent a creative and imaginative brand.

Choosing a secondary website colour

Choosing a secondary website colour

Many designers would advocate that you only need a primary and an accent colour on your website. The only other colour might be a neutral background such as white or grey.

It’s certainly advisable to have no more than two other colours with your primary. You need content to stand out, and if there are too many colours it will be confusing, and this won’t be achieved.

Colour complements will help you choose a secondary colour, should you decide to have one. Complementary colours sit opposite each other on a colour wheel. The Adobe colour wheel is a good tool to give you some ideas. In the RGB (Red Green Blue) colour model, the complementary colour pairs are red-green, yellow-violet and blue-orange.

Choosing an accent colour

Your accent colour will be mainly used for CTA buttons and banners, so it needs to stand out to guide the customer through the sales or enquiry process. Going back to the 60-30-10 rule, your accent colour may only constitute 10% of the colour on your site but it can be the most important for conversions. Make it count.

Again, use the colour wheel for colour complements, or tools such as Paletton to find an accent colour that will stand out, but still match with the primary.

Why Choose Breeze Development?


Choosing a website colour can be complex. Breeze Development is an eCommerce web design and development company based in the north west. If you would like a no-obligation chat about how we can help you, please get in touch.