Pine
ux indonesia UxjxRtDp3AM unsplash

Understanding Colour: The Complete Guide Colour Theory in UX Design

Colour is a vital component of a user interface. It’s one of the first things people notice and use to form an opinion around the product. While it may seem trivial, choosing the perfect colour scheme is a science that requires deep thought and focus. In this article, we’ll dive deep into the details of colour theory, helping you understand the science, guidelines and best practices that will help you craft a killer colour scheme that’s engaging and enhances the user experience.

The Origins of Colour Theory

a graphic showing three colours wheels with one highlighting primary colours the second highlighting secondary colours and the third highlighting tertiary colours

Our understanding of colours and their properties can be attributed to the creation of the colour wheel by Sir Isaac Newton in 1666. Through his research, Newton proposed that colour was essentially the human perception of different wavelengths of light and classified them on a wheel in three categories; Primary, Secondary and Tertiary. 

  • 3 x Primary colours: Red, Blue and Yellow
  • 3 x Secondary colours: Mixture of primary colours – Green, Orange and Purple
  • 6 x Tertiary colours: Mixture of primary and secondary colours – e.g. Blue & Green

Today, Newton’s work still forms the foundation and has provided a framework for further colour studies.


Colour Models

Over the past 20 years, advances in technology have transformed how we consume content. With more people using digital devices such as tablets, mobile phones, and laptops instead of physical books, newspapers, and magazines. This has implications as there is a significant difference in the colours both physical and digital outputs can display.

As a result, colour models, which are essentially numerical systems, are used to note down colours and make designers aware of what they can use regarding the medium they’re working with.

CMYK – Subtractive Colour Model – Print

graphic showing the colour wheel for CMYK colour model

If you’ve ever purchased ink for your printer, you’ll notice that it only comes in four colours; cyan, magenta, yellow and black. These four form the CMYK colour model, which is the basis for all colours in print materials. While RBG obtains colour with the addition of light, the CMYK model is subtractive, meaning the colour is generated with light removal using dyes and pigments.


RGB – Additive Colour Model – Digital

graphic showing a visual representation of the RGB colour model with red green and blue clearly labelled

RGB is an additive colour model that forms the foundation for all colours used on digital displays. The model has three primary colours, red, blue, and green, creating secondary colours cyan, yellow, and magenta when mixed in equal proportions.


With this model, the more light you add, the brighter the colours become. In UI design, each RGB colour is noted with a numerical value between 0 – 255, with white displayed as 255,255,255 and black as 0,0,0.

Top Tip: You can also note RGB colours as HEX values. Both are used for digital and will display the exact same colours.


Colour Harmonies

graphic showing colour harmonies monochromatic analagous complementary split complementary

Colours are the first thing people notice in a UI and use to form opinions about your product. Therefore you must choose colours that are balanced and organised harmoniously, so they’re attractive, engaging and ultimately help leave a positive first impression. While you may think you have an eye for what works before you begin mixing and making a colour selection, there are some best practices to be aware of that will help you craft the perfect colour scheme.

Monochromatic

colour wheel showcasing a monochromatic colour harmony

Pick a colour on the wheel and move along the same line to the centre for this approach. This will give you a combination of similar colours that are increasingly shaded the closer you move to the middle. A monochromatic colour combination works exceptionally well and is associated with subtlety and sophistication.

Analogous

colour wheel showcasing an analogous colour harmony

This approach involves picking colours next to each other on the colour wheel, ideally within a 90-degree angle for optimum harmony and elegance. It yields a more dynamic colour scheme than the monochromatic approach.

Complementary

colour wheel showcasing a complementary colour harmony

This approach involves choosing a base colour first, followed by complimentary colours from the opposite end of the colour wheel. The resulting colour scheme can be highly contrasted and vibrant in comparison to the others.

Split Complementary

split complementary

This involves adding colours analogous to your chosen complementary colours for a more dynamic and vibrant colour scheme.

Other colour schemes

Triadic: These schemes are created by selecting three colours of an equal distance on the colour wheel. One should ideally be the base to harmonise this colour scheme, while the other two accent colours.

Tetradic: This is the most challenging colour scheme to harmonise. It involves choosing four colours on the wheel that are complementary pairs.


Adjusting colours: Hue, Tint, Shade and Tone

After choosing your colours, you can still tweak them to create colour variants for a more harmonising colour scheme. If you decide to switch things up, you should know some essential terms, which we’ve highlighted below.

Hue

This term refers to pure colour without any shade, tint or tone. Adjusting the hue creates colour variants as you’re essentially moving around on the colour wheel’s outer layer. White, black and grey aren’t hues because they’re neutral colours.

Tint

Tint refers to when white is added to the pure colour or hue. As expected, the more white you add, the lighter your hue will appear. Pastel colours are a great example of highly tinted hues.

Shade

Shade refers to when black is added to the pure colour or hue, resulting in a darker and more intense appearance. The more black added, the darker and intense the hue.

Tone

The tone is when grey is added to the hue. As grey is created by mixing neutral colours, black and white, the tone of the hue will depend on the darkness of the grey. If you have added a light grey, the hue will have a lighter tone and vice versa with a darker grey.


Naming and documenting colours

a graphic of a stylesheet on which all the colours used on a product are showcased

After selecting your colours, it’s important that you name and organise them appropriately on a stylesheet or design system. This is so members of the team can refer to them when creating any new screens, pages and other materials.

When it comes to naming colours, you don’t need to come up with anything fancy. The name you choose should be descriptive and in context with the colour you choose. As seen in the stylesheet above, the colours are named with the hex code and where they’re used, such as neutral, primary and secondary.

The on colours, which refer to the are the colours used on-top of primary and secondary colours, for elements such as typography and other visual elements are also included. On colours are extremely important for design accessibility.


This article is part of our content series where we delve deeper into the use of colour in designing digital interfaces. In part two, we will take a closer look at colour psychology. Stay tuned

Ijaz K.

Add comment