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:
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
Red, Blue and Yellow. They are base colours and cannot be obtained by mixing any colours.
Secondary Colours
Green, Orange and Purple. Secondary colours are obtained by mixing 2 primary colours.
“Warm” vs “Cool”
The colours can be further split into 2 groups – “Warm” (Red, Yellow & Orange) and “Cool” (Green, Blue & Purple).
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“
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 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.
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.
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.
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.
We’ll share 2 other methods that are very similar yet different which may prove to be useful.
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.
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.