The Most Overlooked Aspect of UI: Colour

Colour is a highly visual language. It’s one of the most instinctive, primitive forms of communication we have. On both a conscious and subconscious level, colour conveys a mood or a nuance, it conveys meaning. For example in the case of traffic lights; green indicates positive, yellow indicates warning and red indicates prohibition.

Colours can convey an emotion, set a mood, attract attention or make a statement. That being said, harnessing colour psychology and the feelings that colours can conjure or create, is one of the most powerful tools a designer has. In relation to digital product design you must use colour carefully in order to help users act quickly based on priorities.

It’s important to keep in mind that the colours you choose as your brand colours are those with which people will recognise, and associate with your brand. Therefore, it is important to choose them wisely as it’s the combination of colours that people will remember. Think of Hermes’ iconic orange or Tiffany’s robin egg blue – two colours which have become synonymous with both brands respectively.

The Three Properties of Colour

A colour has three distinguishing characteristics; hue, saturation and brightness. Hue is what distinguishes the types of distinct colour. Saturation distinguishes the depth of the primary colour and brightness distinguishes between lightness and darkness. These three properties combined together can create a variety of visual effects.

The 60:30:10 Rule

Since colour is such a strong stimulus it’s important not to overuse it in order to avoid eye strain. Each number in the subtitle represents the portion of the background colour you have chosen. This is the most comfortable and acceptable ratio you can utilise. 

The 60% – This is usually the neutral or primary colour. This will be used as the base colour of the design.

The 30% – The secondary colour used for some medium components.

The 10% – The accent colour, this will be used for the highlight of the design. 

This method is used in order to create a well balanced website or mobile application. The application of this method will make your digital product seem more mature, neater, proportional and eye-catching for users. It will also make the digital product easier to navigate which in turn will make users stick around for longer and keep coming back due to great user experience. 

If you’re looking for a company who understands the importance of finer details in relation to design, look no further.

Contact our team via submitting a lead form or emailing [email protected]


Think Cookies

We’re dishing out some fresh cookies to help us make our website work better for you. Keep browsing if you're OK with cookies or click here to learn more.