In this series, we’ll look at colour theory with respect to basic concepts, colour use in art and design, and finish with how colour is applied in Affinity apps.
In this first part, we’ll look at colour basics, a subject that often feels both abstract and complex. On the way, we’ll cover history, colour models, colour spaces and profiles.
Introduction to colour
History
The subject of colour has been theorised over millennia from both artistic and scientific perspectives. In particular, the work of Isaac Newton1 and Schiffermüller2 explored colour prisms and circles of spectral colour, while Goethe3, having just written Faust, challenged acknowledged ideas and postulated a fledgeling Colour wheel concept which we see in art and design today. This was, in turn, re-evaluated by Munsell4, who proposed the Munsell Color System, defining colour as a sphere and concepts of hue, saturation and lightness.
Enough of the history lesson, let’s move on to colour itself.
Colour models
There are three colour models–RGB, CMYK and Lab. The term ‘model’ is used because the models are often visualised in 3D.
Understanding RGB
Red, Green and Blue (RGB) are primary colours–meaning you can’t create them by mixing any other colours together. However, you can mix them together to create secondary colours. Early school days taught us that you mix red and green to get yellow, green and blue to get cyan, blue and red for magenta.
This red–green–blue colour mixing is fundamental to how colour is presented in electronic technology–right from the very first colour television screens, up to modern computer desktop/mobile device screens (above). Because with RGB, colours are additive–as each colour increases, the lighter the results–and hence an otherwise black screen (above) becomes illuminated with colour. At the most extreme, you start from black and end up with white.
Note: Adding equal amounts of red, green and blue will always give you shades of grey.
Understanding CMYK
For CMYK, Cyan, Magenta and Yellow colours are primary pigment colours. These are used in printing as each colour directly represents a physical ink (K means Key, which is black).
CMYK is a subtractive colour model because as each colour increases the darker the results–colour is taken away (i.e. blocked or subtracted), so ultimately, a white (page) will turn to black.
Understanding HSL
Munsell created a colour system where Hue, Saturation and Lightness (HSL) were considered properties of colour. His three-dimensional system attempted to offer a perceptually uniform system that wasn’t adversely affected by conforming to a “containing” geometric model.
The HSL system remaps (or transforms) a colour space as hue, saturation and lightness values—these settings let you interpret colour more easily and intuitively compared to visualising combinations or RGB, CMYK or Lab colour mixes. Imagine what RGB colours you would mix for a turquoise colour?
-
Hue: This is the most prominent wavelength on a colour spectrum. Think of Hue as being the colour of a rainbow, i.e., the red, orange, yellow, violet, etc.
-
Saturation: (Sometimes called Chroma) sets the purity of the chosen hue, ranging from fully saturated to desaturated. Full saturation would lack any black; desaturation tends towards grey.
-
Lightness: The amount of light reflected from the hue.
A few words about HSB and HSV. You may have seen these mentioned in relation to colour, so how do they compare to HSL?
-
HSL: Here 100% lightness (L) makes white; 0% lightness makes black; they are absolute opposites.
-
HSB/HSV: Here B means Brightness, and V means Value–both are the same except for naming. When compared to HSL, for both HSB/HSV, at 0% and 100%, the hue/saturation colour will still show but at their very darkest or lightest (compared to HSL’s respective black and white).
Understanding Lab
The Lab (CIELAB) colour mode is an alternative to Munsell’s Color system. Lab is named after its channel characteristics–a Lightness channel plus two colour channels opposing values of ‘red–green’ (a) and ‘yellow–blue’ (b). This three-dimensional colour space is based on the theoretical range of human visual perception, and was intended to be more perceptually uniform compared to the RGB CIEXYZ colour space.
Colour space
A colour space is a specific implementation of a colour model (RGB, CMYK, etc). For example, Adobe RGB (1998), sRGB, etc., are all unique colour spaces for the RGB colour model. Different colour spaces are also available for CMYK and Lab colour models too.
A colour space’s colour gamut is the range of available colours in that colour space in relation to a full-gamut reference CIEXYZ colour space. This colour space and gamut is often conceptually visualised in a chromaticity diagram, as residing to different degrees within a CIEXYZ colour spectrum–the triangle’s corners depict the RGB primary colours.
You can directly compare one colour space’s gamut against another. The difference in size and shape of the colour gamut reflects the extent of colours supported in relation to a full gamut of colours. The smaller the colour gamut, the smaller the supported colour range.
Note: The sRGB colour space, due to its small gamut, has become the default colour space for computer screens.
As not all devices can display the same colour gamut, it can lead to colours looking different on each device–some colours can’t be displayed as they are outside the colour space with the smaller gamut. The difference between triangular areas is the potential colour ‘loss’ between devices.
To avoid disparity in colour, let’s now look at colour profiling, which normalises these colour disparities, i.e. the different gamuts, so that colours are reproducible and consistent across devices and workflows–the basis of colour management.
Colour profile
When we share documents between devices, the device has to work out how to display the colour. As not all devices can display the same extent of colour (i.e., the colour gamut), we use colour profiles to display or render the colour information, so it looks the same across devices.
We’ll cover colour profiles in more detail in Part 3 of the series.
Don’t miss Part 2
In Colour Theory 2: Colour in branding and design, we focus on colour messaging from a design perspective, answering questions like “Which colour should I pick?” and “How can I change the mood of my designs?” Why not check it out now?