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.