Choosing the colour scheme of a website is one of the most important decisions a web designer can make. Colours communicate branding, meaning and messages to site users, making colour selections a careful process for designers. 

We’ve put together some tips to help you choose the best colour scheme for your site, whether you’re a beginner or more advanced web designer.

What is Colour Theory?

Colour theory is the interaction of colours in a design through complementation, vibrancy and contrast. What does this mean? Let’s take a look at each part first.

Complementation: is the way colours are seen in relationship to other colours. It speaks to how colours combine and work together; they provide balance for the eye, without causing any strain. In other words, the colours complement one another.

Contrast: is used to reduce eyestrain and focus the user’s attention through the division of elements on a web page. One example is the use of background colour and text colours. For instance, using a dark background colour with light text colour can help focus a reader’s attention to a specific element. A light background with dark text, on the other hand is easy to read. Complementary colours may look pretty, but could be too similar if the colours are both bright or dark, leading to eye strain. Colours with no contrast between the background and text divert the eye’s focus, causing strained eyes.

Vibrancy: is often used to cause a specific reaction or emotion from the reader or user. Advertisers often used bright, energetic colours to grab your attention, while darker shades work to relax you and bring your focus to specific areas on the site.

These are the basics of colour theory. Next, we’ll take a look at how colours are used and how they can affect site visitors.

The Psychology and Emotional Impact of Colours

Did you know that colours have their own psychology and even our emotions? Choosing the right colours for your company site can be daunting; let’s take a look at how colours can affect people.

Yellow: is usually considered a vibrant colour, one that’s full of energy. It typically brings on feelings of happiness and optimism. When you think of the colour yellow, you may think of happy occasions, sunflowers, sunshine and positive emotions. Yellow is a powerful colour and should be used sparingly.

Orange: is seen as a fun, crazy colour. This bright colour is a mix of red and yellow, and is most often associated with happiness, energy, and passion. Most of the time, orange has a positive connotation and is almost always bright and vibrant.

Red: is a highly energetic colour that can remind a site visitor of blood. This colour can bring on anxious, excited feelings. It grabs the attention and should be used sparingly.

Green: is the colour of nature and is most often associated with feelings of calm. However, if green is used in the right hue, it can also symbolize good luck, money, conservation, jealousy and more.

Blue: is a colour that often evokes calm, with focus. It’s a colour that can also symbolize commonsense, reasonable and rational thought. This is a naturally peaceful colour that can help site users to have a sense of well-being, as well as feeling rested and relaxed.

Purple: this colour has been used to symbolize and signify royalty and people of high importance for thousands of years. These days, the colour often reminds us of money (royals are wealthy), prosperity and riches.

White: this is the purest colour of all and is most often reminds of purity, innocence, and cleanliness. It’s often used on white boards, as backgrounds for web pages, etc. When combined with dark text, users’ find the page easy to read.

Black: can signify many things including death, evil, trickery, etc. It’s often seen as a dark, depressing colour; however, black can also have positive connotations including intelligence and authority. Black is most often used to convey a serious message on a web page.

Colours have a depth of psychological and emotional meanings; this is why a web designer has to carefully choose which colours to use on a specific site.

Choosing the Right Colours for a Website

When designing a site, you’ll have to consider:

1). The dominant colour: this will be the brand’s colour (here, think of Coca Cola—you immediately think of the brand’s red logo and white text).

2). Choose 1-2 accent colours to create the colour scheme.

3). Choosing the right background colour to complete the entire design.

Which Colour Should be Dominant?

This colour will depend on the site’s topic and/or brand and is a colour that should be used to elicit specific emotions and feelings when people visit the site. Think back to the previous section where we looked at colours and how they’re perceived. If you’re building a financial site, then you might choose green (for money and wealth). An ecommerce site might choose shades of orange to help products appear friendly and make shoppers feel enthusiastic, and so on.

The dominant colour will depend on the site’s topic and use. Choose carefully in order to attract your target audience.

Choose Complementary Colours

A one-colour page is boring—so you’ll need to choose the appropriate accent colours to go with the dominant colour you’ve chosen.

Accent, or complementary, colours are used to attract attention and to highlight parts of the webpage. It can be a little intimidating to choose the right accent colours, but there are some tools you can use to help.

Complementary colours can be used on subtitles, buttons, information boxes, forms, as a background, etc. The point is that they’re not the main focus of the page, but you use them to highlight areas on the page.

It’s best to use only one or two complementary colours. Too many accent colours can make the page look crazy, highlight too many focal points and just be plain confusing to site visitors.

Choosing the Background Colour

Choosing the background colour is very similar to selecting the colour of paint for the walls of a room. The site pages will serve much the same purpose as the walls of a room—they’re the backdrop on which everything else is placed. You’ll want to choose an appropriate background colour for your web site, making sure it doesn’t draw unnecessary attention away from the elements you want to highlight, including the main elements on the site’s pages.

You want to choose a colour that visitors will find comfortable, so avoid excessively bold and bright colours. In addition, the background colour should fit the purpose of the site you’re designing. Just make sure it doesn’t overwhelm other aspects on the page, or visitors won’t stay around to buy, read, etc.

Colours are an important part of branding, conveying a site’s message and more. Use colours appropriately to keep site visitors comfortable, while highlighting specific elements you’d like to bring to their focus.

If you’re in need of a little inspiration, we recommend using a tool like colorhexa.com!