Choose the best colours for your website — Get 6 tips!

Colours have a profound influence on our experience of everyday life and the world. They also convey information and influence your customers’ perception of your brand. Studies show that, on average, it only takes a minute and a half from a customer’s first impression of a product until they decide whether they want to buy it, and up to 90% of this first impression comes from colour. This shows the importance of the colour choice on your website, regardless of whether you have an online shop or a blog where you share your expertise and your thoughts with the world.

In this article, we delve into the psychology of colour and look at how you can use colour to shape the user experience on your website and strengthen your brand. We also share 6 tips to make choosing your colours as easy as possible!

 

Colour psychology

The psychology of colours is the scientific study of how colours affect people. It is a subject that has been studied long before marketing and websites saw the light of day. Even the ancient Egyptians realised that colours influence how we feel, and so used painted rooms or sunlight shining through crystals as a form of therapy. Whether it worked we’ll probably never find out, but it tells us something about how important colour is and always has been.

There are many articles claiming that certain colours convey specific feelings, thoughts and concepts. Examples are green shades for growth or environmental awareness and yellow for joy and positivity. Although there is some truth in that, it is important to consider that our perception of colours depends largely on who we are, where we grew up, our age, the context in which the colours are presented and much more. We will take a closer look at what some of the colours signal later in the article.

Colours and emotions

The colours in our surroundings affect everything from our mood and emotions to our thoughts, well-being and perception of places and things we are presented with. Colours play a significant role in marketing precisely because, if used in a strategic way, they can help shape the user experience.

Most of us have bought something because the feeling and atmosphere around it influenced us in one way or another. Even if we had no real need for what we bought. The calculation can therefore be made as simple as: colours affect emotions and emotions affect actions = colour choice is an important tool in marketing and web design. In the next section, we take a closer look at why the colours on your website are so important.

Colours and UX design

The colour of the wall in a room we enter affects our perception of the room, and can even make it seem larger, smaller or more welcoming. The same applies to your website, which in many ways is a digital space that your visitors enter when they click on a link in the search results. But what exactly makes your website’s colours so important?

Why do website colours matter?

Colours are one of the most important tools in UX design. Your website’s colours can set the tone for your brand, strengthen brand trust, attract attention, evoke emotions and influence actions.

The goal of your colour strategy should be to choose colours that go well together, are not overwhelming, and communicate the same across your entire website. At the bottom of the article, you will get specific tips you can use when choosing a colour palette for your website.

Colours and branding

In many cases, colours can help increase sales and make it easier for customers to remember your brand. If we say fries, red and yellow, you probably think of a certain fast-food chain. Perhaps the combination of yellow, blue and furniture makes you think of a large chain that is also known for Swedish meatballs? Or what about the colour blue and social media? You are probably thinking of several here, and there is a good reason for that, but we will return to that a little later.

Colours and web accessibility

The colours on your website also have an impact on web accessibility, i.e. how accessible and inclusive your website is to all people.

Aspects that affect web accessibility when we talk about colours are, for example, the readability of texts in certain colours, background colours and colour contrasts.

Furthermore, all the information you convey, written as well as graphical, should be interpretable, even if the user cannot distinguish between the colours. For example, if you have a chart with bars in different colours, the bars should, in addition to colours, also have different patterns, so that users with colour blindness can easily distinguish between them. If a large part of your target group consists of older people, readability is of course extremely important.

You should avoid these colour combinations if you want to ensure good web accessibility on your website:

• green and red
• green and blue
• green and brown
• green and black
• green and grey
• blue and grey
• light green and yellow
• blue and purple.

What do the colours mean?

As mentioned in the sections above, it is probably not possible to choose colours that are perceived in the same way by all people. There are so many factors that affect our perception of colour that the answer can never be straightforward. Even so, within UX design, there are several theories about which colours to choose depending on which signal you want to send to users. Below you will find a list of what the colours can signal:

• Blue: Loyalty, trust, and communication.  

• Green: Wealth, nature, and renewal. Lime green signals growth.  

• Orange: Creativity, energy, and adventurousness – it can also create a retro feeling.  

• Yellow: Joy and optimism. Pastel shades are good for gender neutral designs. Stronger shades signal creativity.  

• Purple: Royal, something mystical or spiritual, and creativity.  

• Black: Sophisticated and luxurious. Depending on the context, black can also be perceived negatively.  

• White: Purity and simplicity. A popular choice for minimalist designs.  

• Grey: conservative or gloomy, depending on context. 

• Brown: Earthy and cozy, often linked to nature, but can also be experienced as drab.  

Although globalisation has made the perception more standardised across national borders and cultures, it is still important to remember that the interpretation of colours will always vary. In the US, for example, many associate the colour green with money (the colour of dollar bills), while in China many associate red with money.

6 colour tips for your website or online shop

Now it’s time for us to look at 6 tips you can use when choosing colours for your website.

1. A monochromatic colour scheme 
    
   If you don’t have much experience with colour theory, a monochromatic colour scheme is typically the easiest to work with. A monochromatic scheme consists of a combination of several shades of the same colour, such as different shades of pink or green. It gives a coherent and simple look that fits well with most websites. 

2. Stick to three colours 
    
   A colour palette with a maximum of three colours is always a good choice – less is more! This is simply because the more colours you use, the more you distract your users. Consider, for example, how you are feeling when you stand in the supermarket and look at the shelf with shampoo. Having a hard time choosing? This is probably due to the many different colours on both packaging and text. The same applies to web design. Therefore, three colours or less is your safest bet. 

3. Follow the 60-30-10 rule 
    
   Once you have chosen your colour palette, you can use the 60-30-10 rule to create a harmonious balance between the colours on your website. The rule implies that you choose a base colour, a secondary colour, and a contrast. The base colour is used on 60% of your page, the secondary colour 30% and the contrast colour on 10%. The primary and secondary colours should be relatively neutral. You can, for example, use the contrasting colour for your call-to-action buttons. 
   
4. Use your colours consistently
   
   You should always use your base colour, secondary colour, and contrast in the same way throughout your website. For example, if you have used a dark blue shade for your call-to-action buttons on one page, you should use the same shade for all your call-to-action buttons across all the pages on your website. This makes it easier for your users to understand the purpose of the buttons.
   
5. A/B test your colours
   
   If you have an online shop where you sell physical products or digital services, it is of course extra important that potential customers click on your call-to-action buttons. As mentioned above, it is best to choose a contrasting colour for the buttons so that they stand out from the other colours in your website’s colour palette.
    
   To be sure that you choose the best colour for your buttons, it is a good idea to run an A/B test on two different colours. That way, you let your users decide which colour is the most tempting to click on. A/B tests are a valuable tool in many contexts because your website should be tailored to your target audience. You can read more about A/B tests here.
   
   
6. Blue for trust
   
   Do you remember that above we touched on the connection between blue colours and social platforms? Think Facebook, LinkedIn, and formerly Twitter, before the white bird with the blue background became an X on a black background. There is a good reason why shades of blue are used by these major platforms. Several studies show that most people perceive blue as a colour that expresses reliability. This is probably also why many banks, such as Barclays, use these colours on their websites. Shades of blue, especially dark blue, can therefore make your brand appear more trustworthy and reliable.

Make the choice easier with ready-made website templates

The process of choosing and applying a colour palette to a website can be made faster and simpler with the help of ready-made templates and themes. We review this below.

Apply colour themes in our user-friendly Website Builder

When you create your website with one.com’s Website Builder, you can choose from many different templates where the colour theme is already set for you. Here, you can either continue with the template’s colour theme or edit the theme if you prefer to use your own colour palette. The Website Builder also gives you suggestions for colours that go well together and ensures that all your CTA buttons are the same colour.

If you want to see how easy it is to activate and edit a colour theme in the Website Builder, you can read our step-by-step guide right here.

The Website Builder is included in all our hosting packages. Read more here.

WordPress themes and colours

Do you prefer to make your website with WordPress? Then you can choose from thousands of different themes, created by designers who know everything about how to put together the best colour palettes. You also get access to 40 customisable templates that you can edit and make unique yourself. You can read how to do it right here, in the Edit your profile settings section.

Time to add colour to your website!

The colours on your website can help you shape the user experience, improve web accessibility, strengthen your brand, and increase sales. The colours also become part of your brand’s personality. Therefore, it is worth investing time in choosing a good colour palette that matches your brand, your concept, and your goals.