Colours in Web Design: Some Tips and Tricks


There are a lot of elements that affect the user experience (UX) of a website. The overall layout of the site, the way information is structured, and the performance of the site itself are dominant aspects that need to be crafted properly. Readability is also an important UX metric in today’s competitive market.

Colours are just as important to UX these days. The overall mood of the site, as well as the colours you use as part of the site’s design, can greatly affect how the users feel about the site. The next several tips and tricks we are about to discuss in this article will help you use colours more effectively.

Limit Colours

The last thing you want to do is add too many colours to a web page. A colourful site may seem like a good idea at first, but it is exactly the kind of website that delivers moderate to poor user experience; with the internet being as competitive as it is today, this isn’t something you can afford to do.

Ideally, you want to use no more than three to five colours throughout the site. You can add different shades of the same colours to the mix for accents and dimension, but adding more colours will start to feel counterproductive after those first three.

Limiting the number of colours also help with branding, particularly with maintaining a consistent branding. With a colour scheme selected, you can use the same colours to design social media pages and other elements of the brand’s or the client’s online presence.

Don’t Forget About Photos

Have you ever wondered why the website you design feels cluttered even after you limit the number of colours you use? The answer to that question lies in the stock photos you add to the site. Aside from limiting the number of solid colours, it is also a great idea to limit the number of colours – or overall tones – appearing in photos.

You now have plenty of sites offering free to use stock image collections, so finding similarly-toned photos is no longer a challenge. When choosing nature photos, for instance, you can stick with photos with certain dominant colours to maintain a more uniformed look throughout the site. It is a subtle change to make to the design, but it is a change that really matters.

The Most Important Colour Is White

While adding colours and using the right design elements are important, you must never forget about the need for sufficient whitespace. Keep in mind that whitespace doesn’t always have to be white; it just needs to be the same colour as the site’s background colour.

What’s important is leaving that gap between web elements so that the site feels spacious and comfortable to use. The extra five pixels of whitespace you add between photos or paragraphs make all the difference.

These are the tips and tricks to keep in mind about how to use colours in web design. Be sure to refer to the tips we covered in this article the next time you’re setting a colour scheme for a website.