Skip to main content

Colour theory: A jargon-free designer's guide

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.

(Image credit: Creative Commons)

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 (Image credit: Creative Commons)

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

It’s worth also 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.

The emotions of colour

Colour can play a vital role in how people feel when they see an image since certain colours tend to be associated with certain emotions. There are many complex reasons why a colour creates a psychological reaction in a viewer, and it depends on context, societal influences and interactions with other colours rather than the colour’s inherent properties alone.

A field of yellow flowers would be a bright, uplifting scene, but yellow is also associated with danger as it appears on warning signs and poisonous insects. As a result, some associations may seem contradictory, but it's worth bearing in mind how they can affect the way people feel.

RED = excitement, aggression, romance
YELLOW = warmth, friendliness, danger
GREEN = nature, sickliness, envy
BLUE = relaxation, coldness, grief
WHITE = cleanliness, innocence, emptiness
BLACK = oppressive, calm, powerful

Key

When it comes to painting, the key of an image is the dominant tonal value that it has overall, and how limited its tonal values are to a certain range. A high key composition is dominated by light tonal values. It will tend to omit or only minimally use dark tonal values, with more pastel colours dominating, while saturated colours act as colourful shadows. As a result, high key compositions often have a light, airy feel.

In contrast, low key compositions allow dark tonal values to predominate, and omit, or minimally use light tones. This can be good for creating atmospheric effects. The addition of small touches of light values creates dramatic tonal contrast.

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

Colour theory: designer's guide

(Image credit: Future)

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

Colour theory: monitor calibrator

(Image credit: Shutterstock)

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

Colour theory: colour adjectives

(Image credit: Blake Stimac)

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

Colour theory: McDonald's logo

(Image credit: McDonald's)

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

Colour theory: Use colour to shape UX

(Image credit: Future)

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

Colour theory: CMY

(Image credit: Creative Commons)

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

Colour theory: easyJet

(Image credit: EasyJet)

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.

Sam Hampton-Smith

Sam is a designer and illustrator based in Scotland. He splits his time between art and design, motion and video and writing for various creative titles.