Choosing the Perfect Colour Schemes for Your Website

Choosing website colour schemes is one of those interesting parts of web design and digital marketing that’s both art and science.

A great example of this is the time that Google tested 41 different shades of blue for one of its toolbars to find out which shade encouraged people to click on it the most. They essentially ran a huge number of scientific tests, measured the results and then picked the shade with the highest performance

Of course, they had to have a control colour, and that was the blue that was picked out by their designers. They took that art, augmented it with science and came up with the perfect colour to use.

But that was just for one toolbar, so how do you choose the perfect colour schemes for your website as a whole? Let’s take a closer look and find out.

Choosing Website Colour Schemes

Perhaps the most important thing for you to consider when choosing website colour schemes is the way that the different colours interact. For example, purple and blue can blend together, while pink and green just look terrible.

You can avoid clashes and blending by borrowing a trick from artists and using the colour wheel. Canva even has a handy little tool where you can choose your base colour and then find complementary colours.

colour palette

By using the colour wheel and experimenting with different colour combinations, you can start to understand what works well together and what doesn’t. This can then form the base that you build upon.

You’ll also want to consider which elements of your website are the most important. For example, if your goal is to get people to make a purchase, you’ll want your “buy now” button to be a nice, bright colour, like yellow.

Don’t be afraid to use more neutral colours, like black and white. This can help you to make sure that the colours you choose are as eye-catching as possible. Nothing makes a yellow “buy now” button pop like a neutral background behind it.

Finally, consider your niche and the psychology behind the colours you use. If you’re a funeral company, you’ll want to go for sombre colours, while if you manufacture children’s toys then you might want to go for colours that are brighter and more playful.

The Psychology of Colours

Speaking of the psychology of colours, let’s take a closer look at the different colour options available to you and the symbolism behind those colours:

Primary Colours

  • Red: The colour of passion and energy, as well as the colour of danger. It draws attention but can also make us stop in our tracks due to its association with stop signs and warning signs. It should be used sparingly in web design.
  • Yellow: Yellow is an optimistic colour that can work well for buttons and other important features that you want people to notice (and click on). This is particularly true when it’s used to contrast against a darker background.
  • Blue: Blue is seen by many as a soothing, peaceful colour due to is associations with the sky and the ocean. However, bear in mind that the precise shade of blue that you use can have a huge impact on the way that it’s perceived. As Google found out!

Secondary Colours 

  • Orange: A warm, fun and playful colour, orange was the corporate colour of a creative agency I used to work for. It’s also popular amongst sites that have a younger target audience.
  • Green: Green is the colour of nature, and many people find it to be relaxing and rejuvenating. In many cultures, it’s also seen as the colour of money, which may be why it’s also associated with prosperity.
  • Purple: Purple is the colour of royalty, in part because it used to be super expensive to make purple dye. It’s also associated with wisdom and spirituality. You’ll often see it used by high-end brands that are aiming to establish a feel of exclusivity.

Neutral Colours

  • Brown: This is one of those colours that people tend to either love or hate. I fall into the latter camp, but there are those who say that it’s the colour of reliability, perhaps due to its association with the earth.
  • Black: Sleek and sophisticated, black is powerful and a symbol of strength. It’s a popular colour amongst high-end brands, but be aware that too much black can be overwhelming and it’s not always easy to read text on a black background, especially on mobile devices.
  • White: White is often associated with innocence and purity, which is why brides traditionally wear white dresses. It’s also very much the default background colour for a website and provides the perfect blank canvas to build upon.
  • Grey: Grey is essentially your middle ground between black and white, making it perhaps the most neutral colour there is. It’s associated with stability, perhaps because it’s the colour of concrete, and while it’s not exactly the flashiest of colours, it has its uses.


The concepts that we’ve touched upon today provide just a basic introduction to choosing website colour schemes, but the hope is that you’ve learned enough to get started. Often, the best way to approach choosing website colour schemes is through trial and error, although that can quickly become expensive. Be sure to have a designer make mock-ups before you start building.

Remember, too, that your website’s colour scheme is only part of the equation. You’ll also need to think about the layout and the content that you share, with your colour scheme ideally helping to tie everything together.

Of course, you don’t have to do all of this alone, and we’ll be more than happy to help if you’re struggling to choose the right colour scheme for your site. Reach out to XCITE Web Design today to find out more about how we can help.

In the meantime, be sure to share your thoughts with us in the comments and to follow us on your favourite social networking sites for more. We’ll see you soon for another article!

Posted on October 4, 2023 by Tyler

Send Me A Message