Colour is such a pervasive part of everything we visually encounter in the world, that for many designers it becomes an intuitive choice. If you think back to primary/elementary school though, you'll recall being told that there are three 'primary' colours – Red, Yellow, and Blue. We were all taught that any colour can be created by mixing these three colours in varying quantities.
It turns out this isn't quite right (although it's still workable enough in practice to be taught the world over to five-year-olds).
How colour is formed
Understanding how colour is formed and, more importantly, the relationships between different colours, can help you to use colour more effectively in your designs.
The Bauhaus school understood this 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.
The theory of colour is a discipline that stretches back much further than that - at least to the 15th century - and encompasses physics, chemistry and mathematics to fully define and explain the concepts. However, much of this is unnecessary to being able to use colour effectively. This quick primer will give you a handy overview of all the important aspects to help you start making informed decisions!
There are two primary colour systems – methods by which colour is reproduced: additive and subtractive (also known as reflective). We use both on a daily basis – the screen you're reading this article on uses additive colour to generate all the colours you see, while the book you're reading uses subtractive colour for its front cover.
In simple terms – anything that emits light (such as the sun, a screen, a projector, etc) uses additive, while everything else (which instead reflects light) uses subtractive colour.
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.
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 each other on the wheel), analogous (adjacent to each other 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. Software such as Adobe Kuler use to help you generate effective colour themes. Read our article on choosing an effective colour scheme to learn more.
Next page: the three components of colour, colour gamut, and more...