Colour Blog Banner in web design

Why should I care about colours in Web Designs?

Now you may be wondering why should you care about implementing colours to your web design. There are many reasons to but the most important one would be:

  • Branding

    Every brand often has a set of colours that are chosen to represent the company. The colours chosen are often used in everything related to the company such as printing flyers, sending email, packaging of company products and more. As websites are essentially the company or business’ online presence, it would make sense for the website to include colours of the brand.

    Example: Below are some info-graphic taken from HubSpot that 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

Therefore, with a website as an entity’s online presence, it is important to include brand colours when designing the website to keep it consistent.

What are colours?

Before we dive into applying colours to web design, let’s get to know more about colours. What are colours? We all know what colours are, they are all around us and is something most of us don’t pay too much attention to until it catches our eyes. We also know that “Colours” can also be referred to as “Hues” (Pure Colour) and they are split into 2 basic groups:

Primary Colours
Primary Colour Wheel in web design

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

Secondary Colours
Secondary Colour Wheel in web design

Green, Orange and Purple. Secondary colours can be obtained via the mixing of 2 primary colours.

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

And the colours are split into 2 groups: “Warm” (Red, Yellow & Orange) and “Cool” (Green, Blue & Purple) colours.

Bonus information: The Primary and Secondary colour wheels are a part of “Basic Colour Theory” along with a 3rd wheel known as “Tertiary Colours”. Tertiary Colours are also known as “Intermediate Colours” and are obtained by mixing a primary and secondary colour.

Tertiary Colour Wheel in web design

Techniques to create colour schemes from the wheels are known as “Colour Harmonies”. We will be covering the techniques at a later part of the blog using the tertiary colour wheel.

Diving even deeper

A slightly more advance knowledge about colours is that other than the colours from the Basic Colour Theory, there are 3 colours that can be applied to the colour wheel thus giving them a different appearance. This allows a wider variety of colour choices.

The 3 colours and the terms for adding them to the colour wheels are:

Tint

To apply tint to a colour,

Hue + White

Tone

To see a different tone of a colour,

Hue + Grey

Shade

Also known as “Shadow”,

Hue + Black

Hue, Tint, Tone and Shade in web design

Picture from TheFutur.

Choosing the right colours

Now that you know what colours are, you might be asking how should you go about choosing them. Although you can rely on your brand’s colours, somethings you need another colour to compliment it. And the greatest difficulty would be to find a suitable colour scheme to go with it.

Luckily, there are a few ways to choose colour to fit your brand’s colours and we are here to share 4 basic colour schemes.

complementary colour wheel in web design in web design
Complementary Colours

This is the use of colours that are exactly opposite of each other on the colour wheels. For example, Red and Green.

The best method to utilize this colour scheme is to use it with vibrant colours to make things stand out. It is not recommended to be used in bulk or for texts because it can be quite clashing and jarring to the eyes.

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

This is the use of colours that are next to each other on the colour wheels. For example: Purple, Red and Orange.

The best method to utilize this style is to use 1 as the main, 1 as supporting and 1 as accent. It is recommended that you have contrasting factors as it offers a comfortable and harmonious palette which makes it hard to stand out.

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

As the name suggest, this is the use of colours selected from an evenly spaced triangle. For example: Turquoise, Red and Yellow.

The best method to utilize this style is to use 1 as the main and 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

Again, as the name suggest, this is the use of colours selected from an evenly spaced Square. For example: Sapphire, Red, Yellow-Orange and Green.

The best method to utilize this style is to use 1 as the dominant colour. It is recommended that you balance the number of warm and cool colours in this method.

Square Colour colours on white and black background in web design

As another bonus, we’ll share 2 other methods that are very similar yet different which may prove to be helpful:

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

Like a combination of Complementary and Triad, it is made of 2 colours that are adjacent to the complement of the base. For example: Green, Red-Orange and Red-Purple.

This method is good for beginners as it offers a strong contrast with less tension, making it hard to go wrong.

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

Like a combination of Complementary and Square, it is made of 2 pairs of complementary colours. For example: Red, Orange, Green and Blue.

This method has a wide variation of colours and works best if 1 colour is used as the dominate colour.

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

How do I apply colours to Web Design then?

With the knowledge of how to pick colours, you might be asking yourself “How or where do I apply it?”. There are many areas which applying colour to web design can greatly improve your website and the user’s experience.

By applying colours in Web Design, it can allow the reader to browse through the site more efficiently. For example,

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

As you can see, out of the 4 examples, there are 3 with indicators and 1 entirely without. Although underlining texts allows the linked text to be more obvious, the underlined texts may be under the assumptions that it’s for emphasis of words when used in a large paragraph.

Instead, adding colours to the texts or underlined text allows the readers to immediately recognize that the texts are linked.

Colour-Responsive Buttons in web design
Providing Feedback

By using colours on interactive elements such as buttons, it provides a visual feedback. The feedback informs the user that they are about to or has interacted with an element. For example, a button changing colours when a mouse is hovering over it.

Other examples includes a linked text in blue darkening after being clicked to inform the user that they have visited the link before.

Coloured Heading Text in web design
Colour Coding Contents

Sometimes you have a large list of contents that you want to list out but with just the use of Bold, Italic or Underlining, things may get boring or repetitive. By adding colours to the mix, it helps to differentiate the contents while making it appealing to the readers.

Of course, the use of indentation and checklist would further increase the effectiveness of mass listing.

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

Sometimes in terms of spacing contents, you would like to give off an illusion that the contents are not too widely spaced. Or perhaps you want to separate them without the use of a line that might ruins the aesthetic and confuse readers like:


Well, by using colours, you can subtly yet effectively do so. Example: Using a grey background to give an impression that the wide spacing is not that empty.

Note: The grey background’s intensity in the photo is just for show.

Therefore, with the help of colours, a website’s contents can be consumed more smoothly and visitors of the site can navigate the site more efficiently.

And with that,

We have come to the end of our blog about the basics of colours in Web Design. Whether you decided to implement colours in you website to brighten it or to brand your online presence, we hope our blog has been useful. Make sure to check out our other blogs to learn more about Web Design and other related topics.