Colour Blog Banner in web design

There are many reasons why the colour selection is important in creating a web design. The most crucial reason would be to create a distinctive design that is easily identifiable with a company, commonly known as Branding.

  • Brands often have a set of colours that are chosen to represent the company. The colours are often used uniformly throughout all of the company’s marketing, advertising and media materials. As a company website is commonly a business’ most prominent online presence, it is essential for their branding to remain consistent.

    The infographics below from HubSpot shows the impression of brand colours on people:

Impression of Consumer towards "Yellow" in web design
Impression of Consumer towards "Blue" in web design
Impression of Consumer towards "Red" in web design

What Are Colours?

Commonly referred to as “Hues” (Pure Colour), they can be split into 2 basic groups- “Primary Colours” and “Secondary Colours”.

Primary Colours
Primary Colour Wheel in web design

Red, Blue and Yellow. They are base colours and cannot be obtained by mixing any colours.

Secondary Colours
Secondary Colour Wheel in web design

Green, Orange and Purple. Secondary colours are obtained by mixing 2 primary colours.

“Warm” vs “Cool”
Warm vs Cool colour Wheel in web design

The colours can be further split into 2 groups – “Warm” (Red, Yellow & Orange) and “Cool” (Green, Blue & Purple).

Tertiary Colour Wheel in web design

As part of the “Basic Colour Theory”, there is an additional 3rd wheel known as “Tertiary/Intermediate Colours” which are obtained by mixing a primary and secondary colour. Techniques to create colour schemes from the wheels are known as “Colour Harmonies”.

Tints, Tones, Shadows

There are 3 colours that can be applied to the colour wheel which gives the Hues a different appearance, allowing a wider variety of colour choices.

Tint

Hue + White

Tone

Hue + Grey

Shade (Shadow)

Hue + Black

Hue, Tint, Tone and Shade in web design

Picture from TheFutur.

Choosing The Right Colours

After deciding on a colour, most brands would need another colour to complement the existing chosen colour. Choosing a suitable colour scheme usually comes with great difficulty. There are a few ways to choose the colour to fit a brand’s colour.

complementary colour wheel in web design in web design
Complementary Colours

The use of colours that are directly opposite of each other on the colour wheel.

Example: Red and Green.

To utilise: Use in vibrant shades to make the colours pop and stand out. However, it is not recommended to be used in bulk or for texts as it might come off too loud.

complementary colours on white and black background in web design
Analogous colour wheel in web design
Analogous Colours

The use of colours that are next to each other on the colour wheels.

Example: Purple, Red and Orange.

To utilise: Use accordingly- 1 main colour, 1 supporting colour and 1 accent colour. As this colour scheme is harmonious, it can be very hard to stand out if there isn’t a contrasting factor.

Analogous colours on white and black background in web design
Triad colour wheel in web design
Triad Colours

The use of colours selected from an evenly spaced triangle.

Example: Turquoise, Red and Yellow.

To utilise: Use 1 chosen colour as the main colour and the remaining 2 as accents. It is recommended that the 3 colours should be carefully balanced to be effectively implemented.

Triad colours on white and black background in web design
Square Colour Wheel in web design
Square Colours

The use of colours selected from an evenly spaced Square.

Example: Sapphire, Red, Yellow-Orange and Green.

To utilise: Use 1 chosen colour as the dominant colour. It is recommended to balance the number of warm and cool colours.

Square Colour colours on white and black background in web design

We’ll share 2 other methods that are very similar yet different which may prove to be useful.

split-complementary colour wheel in web design
Split-Complementary Colours

A combination of Complementary and Triad, it is made of 2 colours that are adjacent to the complement of the base. Good for beginners as it offers a strong contrast with less tension.

Example: Green, Red-Orange and Red-Purple.

split-complementary colours on white and black background in web design
Rectangle (tetradic) colour wheel in web design
Rectangle (Tetradic) Colours

A combination of Complementary and Square, it is made of 2 pairs of complementary colours. Works best with a chosen colour as the dominant colour.

Example: Red, Orange, Green and Blue.

Rectangle (tetradic) colours on white and black background in web design

How do I apply colours to Web Design then?

There are many areas where applying colours to web design can greatly improve a website and allow consumers to consume the website’s content more efficiently.

Coloured and non-coloured linked texts in web design
Linked Texts

Although underlining texts allows linked texts to stand out, some consumers would be under the assumption that it is for extra emphasis of a particular word especially when it is located in a large paragraph. Adding colours will allow users to immediately recognise that the texts are linked.

Colour-Responsive Buttons in web design
Providing Feedback

Using colours on interactive elements such as buttons provides a visual feedback for the consumer, informing the user that they are about to or has interacted with the element.

Examples include: button changing colour when a mouse hovers over it, linked text darkening after being clicked to inform users that they have visited the link before.

Coloured Heading Text in web design
Colour Coding Contents

Adding colours to a huge amount of text helps differentiate contents when it gets repetitive using Bold, Italics and Underline, making it appealing to the readers. The use of indentation and checklist would also further increase the effectiveness.

Before implementing Colours to Sections in web designAfter implementing Colours to Sections in web design