28.06.2018

The rules of colour in web design

All the colours of the rainbow, but which shall you choose? There are many, many different decisions which will have to be made to bring your new website to life, but few are as significant as colour. Images can be swapped out, text can be tweaked, but it’s best to start off with a solid colour scheme from the very beginning.

The-rules-of-colour-in-web-design-MadBit-Dublin

All the colours of the rainbow, but which shall you choose? There are many, many different decisions which will have to be made to bring your new website to life, but few are as significant as colour. Images can be swapped out, text can be tweaked, but it is difficult to subtly change the colours on your website without giving your company an identity crisis! Therefore, it’s best to start off with a solid colour scheme to represent your company from the very beginning.

But how do you come up with a colour scheme?

The science of colour

Generally, people assume the colours on a website were simply the web designer’s personal preferences. However, there is actually a bit of science behind it! Colour theory is all about the interaction of colours in design. It’s a complex subject which cannot be covered in one blog post, but we can clue you into a few key elements.

Knowing where to start when picking your colours can be the hardest part. If you have a logo then this is the obvious place to begin. If your logo has multiple colours, then the hard work may already be done. Either way, you are aiming to choose three main colours:

  1. a dominant colour – 60% of your design
  2. a subordinate colour – 30% of your design
  3. an accent colour – 10% of your design

The colour wheel – oh, the nostalgia!

Remember the colour wheel from school? The main principle behind the wheel is to show how primary colours can be combined to produce secondary colours, and from there tertiary colours can be mixed. However, the colour wheel also shows how colours relate to one another.

The-rules-of-colour-in-web-design-MadBit-Dublin 2

Colours that are side-by-side on the colour wheel are analogous, because of their similarity. These are colours that are usually found together in nature. Colours opposite each other on the colour wheel are described as complementary. These combinations create a sense of vibrancy because of their sharp contrast.

There are many different colour combinations you can take from the colour wheel based on predefined models. Another example would be the triad scheme. This is achieved by drawing a triangle on the colour wheel with each point evenly spaced out. The triad model is helpful when you want three main colours, which is the very least you will need for your website design!

Colours have personalities

Just picking three colours because they work well together isn’t enough. Colours have personality, they evoke emotion and create atmosphere. What message do you want your company to communicate? The psychology of colour is important to consider when deciding on your website’s design.

Let’s have a quick look at attributes often associated with specific colours. Keep in mind different shades of colours can change the psychological effect, but in general, the following is true:

Blue – trustworthy, dependable, welcoming
Yellow – optimistic, youthful, clarity
Green – natural, peaceful, adventurous
Red – urgent, alert, energetic
Orange – action, playful, friendly
Purple – magical, luxurious, royal
White – modern, pure, calming
Black – formal, classy

Colours can be divided into warm and cold because of the psychological effect they have on us when we look at them. Warm colours tend to remind us of fire and the sun, such as yellow, red, and orange. Cooler colours, like blue and green, instead remind us of water and the earth.

The-rules-of-colour-in-web-design-MadBit-Dublin- 3

Colour and branding

Colour is a fundamental component of your brand. This is why it is important to know your audience and keep your brand message clear in your mind when choosing your website’s colour scheme.
Take a look at some famous examples, and you’ll quickly realise that most companies are harnessing the psychological effects of colour through their branding and web design. Technology companies, such as Dell, HP, IBM and Intel, like to choose blue as their colour because it conveys trust and reliability. Red, on the other hand, is the colour of excitement and urgency, hence why Coca-Cola, Virgin, CNN and Nintendo use this colour.

When considering the psychology behind your brand’s colour scheme, it is worthwhile taking some time to study your target customer demographic and apply your findings to your web design. Are you targeting a specific age group? A specific gender? A specific culture? Imagine Joe.ie or Ford.com designed with a delicate shade of lavender as the dominant colour… it just wouldn’t work!

At the same time, you should not play up to stereotypes too much. No one wants to feel as though they are being patronised and modern trends would suggest that people want to be valued for their individuality rather than being prescribed to a group. There is a balance to be maintained between identifying with your target audience and pigeonholing them!

Applying colours to your website

By now you should have a rough idea of what your dominant, subordinate and accent colours might be. But how will these appear on your website? Spreading your colour scheme throughout your website shouldn’t be done light-handedly. Instead, the proportions of each colour need to be managed. The simple diagram below demonstrates this well:

The rules of colour in web design - MadBit - Dublin

www.dontcodetired.com

 

As you can see, accent colours have been given the smallest proportion. That’s because the function of the accent colour is to emphasise the smaller elements of the website that require attention. These could be call-to-actions, buttons, links, navigational icons or promotional elements. An accent colour acts as a highlighter for information that would otherwise get lost amidst the rest of the content.

Add neutral colours

White, light grey and dark grey. No matter what your colour scheme is, there is a high chance you will want to add in these neutral shades. Too much colour can be every hard on the eye and can make it difficult to direct the user’s attention.

This is why you should not be afraid of whitespace. Look at whitespace as breathing room for your content. Technically speaking, whitespace, rather than being a colour, is the negative space between different elements on your website. It is not only aesthetically pleasing, but it helps the user digest the content in manageable chunks.

So you’ve come to the end of your quick introduction to colour in web design. There’s a lot more to it, but we can’t be giving away all our tricks now can we! Looking for some help with your web design? As experts in user experience (UX) and user interface (UI) design and strategy, we can help! Get in contact today for a website your customers will love.