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:
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.
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:
Red, Blue and Yellow. They are the base colours and cannot be obtained by mixing any colours.
Green, Orange and Purple. Secondary colours can be obtained via the mixing of 2 primary colours.
“Warm” vs “Cool”
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.
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:
To apply tint to a colour,
“Hue + White“
To see a different tone of a colour,
“Hue + Grey“
Also known as “Shadow”,
“Hue + Black“
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.
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.
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.
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.
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.
As another bonus, we’ll share 2 other methods that are very similar yet different which may prove to be helpful:
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.
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.
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,
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.
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.
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.
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.