Colour theory: A jargon-free designer’s guide

Colour theory is a crucial part of designers’ and artists’ practice. However, colour is such a pervasive part of everything we visually encounter in the world that for many, it becomes an intuitive choice. If you think back to school, you’ll probably recall being taught the basics of colour theory: there are three primary colours – red, yellow, and blue – and any colour can be created by mixing these three colours in varying quantities.It turns out that this isn’t quite the whole story (although it’s still workable enough to be taught to five-year-olds). 

Understanding how colour is formed and, more importantly, the relationships between different colours, is one of the most vital art techniques to master. It can help you use colour more effectively in your designs, and make sure you pick the right palette for your projects. In this guide, we’ll walk through what you should know about colour theory, including explaining any design terms you might not be clear on. 

While you’re here, you also might want to check out our guide to how to manage colours in Photoshop.

The Bauhaus school understood the power of colour in the 1920s and 1930s, with staff and students going on to develop colour theories for evoking particular moods and emotions through choice of palette in design and architecture. (Take a look at our guide to Bauhaus design for more on this.)

The theory of colour is a discipline that stretches back much further than that – at least to the 15th century – and uses physics, chemistry and mathematics to fully define and explain the concepts. However, much of this is unnecessary to being able to use colour effectively. Here, we’re going to offer more of a handy overview of all the important aspects of colour theory you need to help you start making informed decisions.

Colour systems

A colour system is a method by which colour is reproduced. There are two primary colour systems: additive and subtractive (also known as reflective). We use both on a daily basis. Screens use additive colour to generate all the colours you see, while books and other print materials use subtractive colour for their front covers.

In simple terms, anything that emits light (such as the sun, a screen, a projector, and so on) uses additive colour, while everything else (which instead reflects light) uses subtractive colour.

01. Additive

Colour theory: RGB

Additive colour is based on red, green, and blue – RGB for short

Additive colour works with anything that emits or radiates light. The mixture of different wavelengths of light creates different colours, and the more light you add, the brighter and lighter the colour becomes.

When using additive colour, we tend to consider the building block (primary) colours to be red, green and blue (RGB), and this is the basis for all colour you use on screen. In additive colour, white is the combination of colour, while black is the absence of colour.

02. Subtractive

Colour theory: CMYK

Subtractive colour is based on cyan, magenta, and yellow

Subtractive colour works on the basis of reflected light. Rather than pushing more light out, the way a particular pigment reflects different wavelengths of light determines its apparent colour to the human eye.

Subtractive colour, like additive, has three primary colours – cyan, magenta, and yellow (CMY). In subtractive colour, white is the absence of colour, while black is the combination of colour, but it’s an imperfect system.

The pigments we have available to use don’t fully absorb light (preventing reflected colour wavelengths), so we have to add a fourth compensating pigment to account for this limitation. We call this ‘key’, hence CMYK, but essentially it’s black. Without this additional pigment, the closest to black we’d be able to render in print would be a muddy brown.

The colour wheel

In order to make it easier to see the relationship between different colours, the concept of the modern colour wheel was developed around the 18th century. These early wheels plotted the different primary colours around a circle, mixing different primary colours together in strict ratios to achieve secondary and tertiary colours.

The colour wheel allows us to see at a glance which colours are complementary (opposite on the wheel), analogous (adjacent on the wheel), triadic (three colours positioned at 120 degrees on the wheel from each other) and so on.

Each of these relationships can produce pleasing colour combinations. There are many more pleasing relationships between colours based on their position on the wheel. There are free apps for picking a colour scheme, or you could use your designer’s eye to pick your own. Click through to the next page for a little help on this.

Next page: the three components of colour, colour gamut, and more…

The three components of a colour

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: hue, saturation and brightness.

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.

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%.

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 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 the range 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 our articles on the subject of colour. Read some of these highlights below.

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

What are the ‘right’ combinations of colours, and how can designers sidestep subjective debates to harness the power of colour more effectively in branding projects? We speak to experts in colour branding and look at tools to help you make the right choices. Read our designer’s guide to using colour in branding.

02. The best monitor calibrators in 2019

To ensure your monitor is displaying colours as accurately as possible, you need to make sure it’s properly calibrated. This is essential for anyone who works with graphic design, video, photos or digital art – if your monitor isn’t calibrated properly, you could be seeing a totally different colour to what your audience are seeing. This guide to the best monitor calibrators will help you find the right tool for the job.

03. Choose the right website colour palette

Get started picking the perfect colour scheme with help from this guide on how to choose the right colour palette for your website. It’s a good introduction to the different things to consider when making your design decisions, with references to psychological studies and colour theory.

04. How to pick the perfect colours every time

The Colour Affects System identifies links between four colour groups and four basic personality types. If harnessed correctly, designers can use this system to kill subjective debate around colour in client meetings. This guide explains how.

05. Use colour to shape UX

Use colour to shape UX

When creating a site that resonates with your audience, your choice of colour can be surprisingly impactful. This article on how to use colour to shape UX takes an in-depth look at how you can use specific colours to build trust and increase revenue.

06. 10 colour management terms 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, but this guide will help. You’ll soon be able to sort your spectrophotometer from your tristimulus colorimeter…

07. 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. Explore these outstanding uses of colour in branding.