Colour and Web design: A Guide To Choosing The Right Colour Schemes

An image uploaded to Strapi
An image uploaded to Strapi

Waseem Ahmad


Why do some websites/designs/decorations feel absolutely awful?

The answer might lie in the choice of colours. Colour is one of the most primary consideration in design. When you buy a shirt from a store, you chose the one that you like the most based on your instinct. You might like a website, poster or even a home or even design one without giving much thought to the colours, but there’s an entire science behind called colour theory that can guide you to a good design.

Random Colours-min.jpg

No matter what you are designing, the colours you chose have a profound impact on the end product. If your work involves the use of colour in any way, then you must know the basic rules that govern our choices.

When you are designing something, it is very much possible that you can play with colours and chose any colour that looks nice or fits into the idea. But it takes a lot of trial and error to get the desired result. Instead you can chose from the tried and tested colour scheme that has a proven record and looks good every single time, and even the pros turn towards the colour wheel to chose the scheme that works for them.

The basics:

Colour Spectrum-min.jpg

As you can see, the three primary colours are Red, Blue and Yellow. All the other colours are derived from them. You can get any colour by mixing just these three colours, while you can get many different colours by adding or subtracting the amount of black and white in it. Today, we are not going to study the colours in depth, but are just going to learn the colour mixing method that will do wonders in the design of your website. The colour wheel contains different hues of primary, secondary and tertiary colours.

How to Colour and how not to Colour:

Colour Scheme-min.jpg

All the colours don’t really fit very well together, as you can see from the picture above. Harmonious Colour Schemes use colours on different portions of the colour wheel and one of the things that someone new does is that they randomly chose the colours. The four colour schemes: Analogous, Monochromatic, Triadic, Complementary, and spit complementary colour schemes can come very handy in graphic design, UI/UX design and even while chosing the colour scheme for your home decorations. These are just some of the basic colour schemes, and many other colour schemes can also be derived from them.

The Colour Schemes

1. Analogous Colour Scheme

Analogus Website-min.jpg

The colours analogous to each other, i.e, next to each other on the colour wheel are used to create analogous colour scheme. This colour scheme offers a balanced feel and is pleasing and to the eye. One of the most commonly used scheme in design is the analogous colour scheme.

**2. Monochromatic Colour Scheme. **

Monochromatic website-min.jpg

Monochromatic refers to the use of same base with different intensities and values. So without changing the hue, the use of different tints, shades, and tones will create Monochromatic colour scheme. It offers a very interesting visual feel and is very easy on the eye.

3. Triadic Colour scheme

Triadic Website-min.jpg

The use of three equally distant colours on the colour wheel is called triadic colour scheme and can be a very tricky colour scheme to pull off. It can be composed of all the primary colours, the 3 secondary colours or 3 of the tertiary colours. One way to use this scheme so that it doesn’t become too disorienting is by giving dominant space to one colour while minimally using the other two colours.

4. Complementary Colours

Complementary website-min.jpg

The use of colours on the opposite side of the colour scheme is called complementary colour scheme. Usually one is a primary colour, while the other is a secondary colour. It is used to create a highly intensive image with a very high contrast allowing for the brighter colour to stand out and look distinct and beautiful.

5. Split-complementary colour:

Split Complementary Website-min.jpg

Instead of using the exact opposite colour, the split-complementary scheme uses a colour and the two hues of the colour opposite to it. It provides a very similar colour style but the use of two analogous colour reduces the intensity.

Using these colour schemes

Colour Scheme-min.jpg

These are just some of the basic schemes that we use in designing. You can play with hues and saturation to get a higher/ lower contrast, a sober/ dynamic feel or you can even play with colour to highlight the most important portion of your website. The use of colour can also direct the eye, and using a colour that stands out for the call to action button can immensely help you generate more leads, or even get more queries for your project. You can read about the important aspects of web designing on our previous blogs.

An image uploaded to Strapi
Waseem Ahmad

Learn about the principles of choosing the right colour schemes for your web design.