Colour Trends For The Web: How to make them work for your website.

Posted by Karl on 24th January 2023.

Share:

Facebook
Twitter
LinkedIn
Reddit

With an ever changing landscape that comes with websites and a clear focus on being inclusive of all the unique people that will make up your audience. It is more important than ever for your websites colour palette to be both inclusive and considerate, while remaining engaging, addressing your customers needs and evoke the feelings that you want associated with your brand and your business in order to build a loyal following and ultimately lead to more conversions and sales. The purpose of this blog post is to look at colours holistically and how you can make them work best for your website.

Colour fit for purpose.

Surprisingly, a significant amount of research and financial backing has been made over the last few years to advance the colour palette industry as a whole. The rise of data visualisation, responsive web design, technological advancements and our growing demand for using various devices, has played a huge role in both how we use colours to sell and evoke specific feelings, and also how those colours are displayed to us.

Gone are the days where one colour looked the same on every computer, now there are things like refresh rates, how much of the colour spectrum that specific screen can display, whether the screen is an LCD or an organic LED one or something in between. And while some of these things might seem a bit silly to worry about it can genuinely be the difference in some instances between your imagery serving up as a red or a pink depending on the display.

Our advice to those that are wanting to be colour specific, is that when you’re deciding on a colour palette for your brand, consider your audience. Think about how your content is going to be viewed and then test those colours on a range of devices that your audience is most likely to use and in a range of scenarios as well. Once you have enough data on your website about your audiences usage you can begin to tweak things or split test different colours and see how that impacts on your conversions, then rinse and repeat.

Colour stories, moods and emotions.

Many industries have a very distinct colour history, as an example, the medical industry is typically whites and blues, agricultural is usually earthy greens and browns. In the same way that we align certain colours with specific niches or industries we also align them with certain moods, energies and emotions.

Whether you sell sun cream for beach-goers, maternity wear for new mums or DVDs for families, finding the right colour palette is all about finding the tone that will best resonate with your audience and your brand’s personal identity. By focusing on your business’ values, the people that are a part of it and what you want it to represent, you will be able to discover some of the traits that you want your business to showcase and in turn the colours that best express them.

Using colours that represent these qualities and bring out the emotions that you want with your audience will help them relate to your business and in turn help to build a loyal following. These people have to be part of your considerations when constructing your colour palette because ultimately they are more likely to buy your services and goods if they can relate to your brands values and messaging.

Below is an image of various colours and the types of moods and emotions they can evoke (both positive and negative) for your customers when it comes to making purchasing decisions.

 

Positives

Negatives

  • Red – Triggers appetite, stirs up excitement, energizes you and raises strength and self confidence.
  • Orange – Makes you happy, positive and energetic.
  • Yellow – Cheery, vibrant, raises your self esteem and creativity.
  • Green – Makes you feel calm, soothing, peaceful, creates harmony and balance.
  • Pink – Romance, passion, sexuality and femininity.
  • Blue – You feel calm, relaxed, cool and serene, aids communication, raises trust and efficiency.
  • Black – Sophistication and glamour.
  • White – Peace, purity, cleanliness, simplicity and sophisticated.
  • Red – Aggression, danger, defiance and strain.
  • Orange – Raises your frustration, deprivation.
  • Yellow – Makes you cranky and lose your temper.
  • Green – Boredom and stagnation.
  • Pink – Makes you feel physically weak and causes inhibition.
  • Blue – Aloofness, coldness and lack of emotion.
  • Black – Coldness, heaviness and oppression.
  • White – Unfriendliness, coldness.

How to use colours on a website.

As a general rule of thumb we like to keep things relatively simple, and almost always recommend 2-3 neutral tones for the core of the website and then no more then 3 colours for creating a bit of dynamic and to draw users around your website (gradients can be made up of these colours).

For fonts the best thing you can do to make things readable is to use blacks and charcoals against a white background, it’s what we are naturally geared to seeing having used paper for so long, otherwise white and light greys (the opposite) against a darker background also works. You can employ a bit of colour in your copy however you want to stay away from colours that contrast too harshly and typically you will want to have a lighter tone on a dark background and vice versa otherwise it’s too hard to read and can cause eye strain for the reader.

Things like call to actions (CTA’s), buttons, menu navigation’s and headers allow a bit more freedom and you should definitely use a bit of colour here to create some punch and attract your users attention to where you want them to navigate to on the website as they scroll through the various pages.

Another important thing to remember is to use colour throughout your website to provide a form of feedback to the end user. Say for example, they hover over a link or button, having it change colour provides them with the feedback that it is an interactive part of the website that can be clicked or engaged with.

So again, personally we like to keep colour palettes relatively simple with 2 to 3 tones from black to white and no more then 3 colours for things like buttons, call to action and directing people around our website.

Some of the colour tools we use.

Below are a couple of tools that the website wizards use while exploring colour options

  • Adobe Color – probably our preferred tool for creating a colour palette for your website from scratch, allowing up to 5 different colours to be chosen, there is also a colour harmony tool for trying out different colour rules.
  • Coolors – a great tool for looking at trending palettes. Take note of the fact that you can sort the palettes by a certain colour.
Blog Capture Form

Join our Newsletter

Receive promos, updates and tips every week in your inbox.

*