Colours have feelings too! - Your ultimate guide to Colour Theory, Colour Psychology and Colour in UI

By
Jess Ji
October 15, 2019
5 minute read

Welcome to your ultimate guide to becoming a better designer… It’s about to get colourful! 

Colour is everywhere, but you might not realise how much of an influence colour has in the decisions you make, the information you absorb and the emotions you experience. From understanding colours and knowing when to use them, your ability to design and brand will improve dramatically.

Basics of Colour and the Colour Wheel 

Firstly, understanding the basics of colour and colour theory will help your judgement in choosing what colours to put together and which combinations to definitely avoid. 

Let’s start with the foundation colours of the colour wheel - Primary colours. Primary colours consist of three colours - Red, Blue and Yellow. These primary colours are mixed together to form secondary colours - Orange, Purple and Green. Together, they form the basic colour wheel. Primary colours and secondary colours are mixed together to create six tertiary colours, which include blue-green, red-purple, etc.

Colours can also be referred to as the term - hue. Hues can then be altered with saturation, value, tint and tone. Saturation refers to the intensity of the hue, changing how vibrant or subtle the hue is. Value is the relative darkness or lightness of the hue. Tint is a hue to which white is added. Tone alters a hue by adding grey.Colours can be then be sub-categorised into warm colours and cool colours. This is generally separated by drawing a line down the center of a colour wheel. Warm colours are generally associated with brightness, action and energy, whilst cool colours are often used for calm, peace and serenity.


Colour Harmony


Now that you’ve got the basics of colour down. Let’s move to actual formulas that have been tried and tested to help you select colour combinations. 

1. Monochromatic 

This is the easiest formula and it only consists of one colour. Using one colour may seem boring, but playing with saturation, value, tint and tone can produce colour combinations that harmonise with one another and they’re guaranteed to match.


2. Analogous

Analogous colours sit next to each other on the wheel. You will find that by using analogous colours, there will always be one colour that dominates, one that accents and one that supports. They can help with creating a visual direction or visual hierarchy for your viewer.

3.1 Complementary

Complementary colours are opposite each other on the wheel. When combined, the drastic contrast between these colours can help them stand out and make an imagery pop. Complementary colours are perfect for when you want to create a clear distinction between two objects.

3.2 Split Complementary

Split complementary colours use colours on either side of the complement. They give the same level of contrast as complementary colours but gives you the option of working with more colours.

4. Triadic

Triadic colours are three colours that are evenly spaced on the colour wheel. They tend to be striking and dynamic. When used well, triadic colours can provide a visually pleasing contrast and harmonic aesthetic.

5. Tetradic

Tetradic colours are four-colour combination which form a rectangle on the colour wheel. There is a strong, vibrant contrast between the four colours. Therefore, when using tetradic colours, be mindful of how you use it in your approach. Tetradic colours can work well if you let one colour dominate and use the others as accents.

Colour Psychology

Now, let’s talk colour psychology and the emotional ‘baggage’ that each colour comes with! 

Colour Psychology is the study of colours in relation to human behaviour. It aims to study and determine how colour affects our day-to-day behaviour. Understanding the psychology of colour can help you establish your brand identity, drive sales and maybe even tell people what to do.



Before we start generalising the psychology of colour, we have to be aware that personal experience and cultural differences can affect an individual’s perception of colour. Therefore, when applying colour, the context in which you use certain colours cannot always rely on the generalised colour psychology guide.

Colour can be

Yellow can be optimistic, bright, clarity, warmth 

Orange can be friendly, cheerful, confident, enthusiastic 

Red can be exciting, youthful, energetic 

Purple can be creative, imaginative, wise, sophisticated 

Blue can be competent, calm, trust, dependable, strong

Green can be peaceful, growth, nature, health-related

Grey can be formal, professional, balanced, neutral

Colour and Culture Facts

Yellow is generally considered a happy colour, but in Germany, it represents envy 

Orange can be a sacred colour or a symbol of love, humility and health, but in Colombia, orange represents sexuality and fertility 

Red is considered an important, lucky colour in asian cultures but in some African countries, red is a symbol for death 

Purple is the colour of mourning in Thailand and Brazil, but in other parts of the world, purple generally symbolises royalty, wealth and nobility 

Blue is considered as the safest colour choice around the world

Green has traditionally been forbidden in Indonesia, whereas in Mexico, it stands for independence 

White is the colour of purity, elegance and peace in Western cultures but in some Asian countries, white represents death, mourning and bad luck

5 Tips for Using Colour in UI

  1. Can you read it? 

A basic standard and yet, legibility and accessibility are still mistakes that designers make. Make sure the colours that you use provide minimum strain on the eyes and is simply readable, specially for someone with reading difficulties. Also, don’t forget about designing for dark mode! 


  1. Plan B: Neutral Colours 

Neutral colours are your friend - black, white, grey. They help your colours stand out and they’re always a great backup, if nothing is feeling right. 

 

  1. Interior Design Hacks: 60-30-10 Rule 

Use the 60%-30%-10% proportion to give balance to your colors. The 60% is for your dominant hue, your secondary colour is 30% and your accent colour is 10%. This formula creates a sense of balance between the colours and is simple to use. 


  1. Mother Nature: Natural Inspiration

When in doubt, look around! Use nature as your inspiration because it’ll always look natural and somehow always aesthetic? Mother nature, you’re a beaut! 


  1. This Blogpost

Of course, I had to include this as a tip! Colour theory and psychology should be heavily considered when it comes to using colour for almost anything design related. Colours influence the emotions, actions and experiences of your users. 



If you’d like to work on fresh, inspiring projects with us in the future, or if you’re keen to join an agency that values continued growth, forward-thinking and innovative behaviours, leave us a note and follow us on our social media channels for more exciting stuff!

A strong digital strategy is first, design comes second.

You might also like..