How to master colour theory

The three components of a colour

Colour theory: Hue saturation

The three component parts that help us define a colour are hue, saturation and brightness

Yellow is yellow is yellow, right? Well, actually, no; there are many different colours we could refer to as yellow. Different shades or tints, saturations and hues are all possible while still being within the yellow part of the colour wheel. As a result, there are three primary component parts that help us define a colour:

01. Hue

This is the position on the colour wheel, and represents the base colour itself. This is typically referred to in degrees (around the colour wheel), so a yellow colour will appear between 50 and 60 degrees, with the perfect yellow appearing at 56 degrees. Green, meanwhile, appears at 120 degrees on the wheel at so on.

02. Saturation

This is a representation of how saturated (or rich) a colour is. Low saturation results in less overall colour, eventually becoming a shade of grey when fully desaturated. Saturation is normally referred to as a percentage between 0 and 100%.

03. Brightness

This is how bright a colour is, typically expressed as a percentage between 0 and 100%. A yellow at 0% brightness will be black, while the same yellow hue and saturation at 100% brightness will be the full yellow colour.

Colour gamut

Colour theory: gamut

Colour gamut describes the range of potential colours a system can reproduce

Colour gamut is a way of describing the full range of potential colours a system can reproduce. It may surprise you to learn that the range of colours achievable in CMYK is different to that you can achieve with RGB.

This is partially because of the nature of the two different systems, but also (in the real world at least) as a consequence of limitations in our technology - screens aren’t always capable of producing the same range of colours as each other, and pigments reflect light at a non-uniform rate as you reduce their saturation.

Colour perception

Finally, it’s worth looking at how different colours can affect the way we perceive other colours. A typical illustration of this features a mid-grey tone placed over a light grey background, and the same mid-grey tone shown over a dark grey background.

The apparent brightness of the mid-grey is altered according to the context in which you see it - a trick of the eye, working to make sense of its surroundings. Hues works in the same way as tones when placed adjacent to other colours, allowing you to create different effects using the same palette of colours.

Further reading

There's more to explore in the world of colour, which is why we've got a tag for all of our articles on the subject of colour. Visit to explore our latest colour articles, or read some of these highlights below.

01. The designer’s guide to using colour in branding

Colour sells. Whether you’re working with a product, service or space, the ‘right’ combinations of colours can influence how someone feels, thinks and behaves – with powerful results.

What are the ‘right’ combinations, and how can designers sidestep subjective debates to harness the power of colour more effectively in branding projects? Computer Arts magazine takes a look in this guide, speaking to experts in colour branding and looking at tools to help you make the right choices.

02. How to pick the perfect colour palette every time

In the 1980s, colour psychologist Angela Wright identified links between patterns of colour and patterns of human behaviour. She went on to develop the Colour Affects System, which identifies links between four colour groups and four basic personality types, based on original research involving Aristotle, Newton and German writer Johann Wolfgang von Goethe.

If harnessed correctly, designers can use the Colour Affects System to control the message of their colour palettes and, crucially, kill subjective debate around colour in client meetings with evidence to back up their decisions. This guide from Computer Arts magazine's colour issue explains how it works…

03. How to manage colours in Photoshop

This article provides a great overview for users who are new to colour management, with practical advice for managing colours in Photoshop.

It explores how to convert your images from RGB to CMYK mode, and the effect this will have on the colours within your image; how to customise your colour settings to suit your particular needs; and how to sync your colour profile across all of your Adobe CC apps, add a particular colour profile provided by your printer, and preview a CMYK version of your design without losing any RGB information.

04. 10 colour management terms designers need to know

Getting your colours right means getting your head around some tricky terms. There are a number of jargon terms that might baffle you - so we've put together this handy guide. 

Have a read, and you'll soon be able to sort your spectrophotometer from your tristimulus colorimeter...

05. 4 ways to master colour in logo design

Colour is a universal language in design. It can help convey a brand’s personality, create market standout, and evoke an emotional response. This article reveals four ways to work with colour more effectively in your logo design work… 

06. Outstanding uses of colour in branding

Successfully 'owning' a colour is a big deal. With this in mind, we've explored how different brands around the world have staked their respective claims to 10 colours – in some cases with considerable success.

07. The best colour tools for web designers

For web designers, one of the most important choices to make is over colour selections. Choose the wrong ones, and you might just lose out on an opportunity.

But how do you know which colours work well together? To help with the important task of colour selection, this article points you in the direction of some of the best free colour tools on the web (plus one special bonus at the end for Mac users).