For a while now I have been telling people to read ‘Color: From Hexcodes to Eyeballs’ by Jamie Wong, on the basis that it is one of the best explanatory pieces of ‘writing with diagrams’ I have ever come across. A few of those people have given the feedback that it started at too high a level for them. So I decided to write a primer on colour, to get you (if you need it) up to the point where you can access and enjoy Jamie Wong’s article.
This post is that primer. Note:
- It is necessarily full of simplifications and half-truths, but that’s OK if it scaffolds your understanding to help you get to Jamie Wong’s good stuff.
- If you are someone who assumes you don’t understand science, don’t despair. You are the target audience here! Try hard – then if you don’t get it, it’s my fault, not yours…
Primary colours
Many/most/all of us were all taught from a very young age that the primary colours are red, yellow and blue, because you can mix paints of those colours to get all manner of other colours. This is called the RYB colour model. Here is red, yellow and blue (RYB for short), in case you needed a reminder (!?).
If you are asking how I chose which red, yellow and blue to display in this diagram, you can probably skip straight to ‘From hexcodes to eyeballs’!
Now, I’m afraid to say that RYB is not a perfect choice of primary colours. A rather harsh view might be that your art teachers lied to you. A kinder interpretation might be that the RYB colour model is a historical choice of primary colours which has been improved over time.
But before we see a more modern interpretation, we should note that there are two types of classification for primary colours, sometimes called colour addition and (would you believe it) colour subtraction. We will explain both. So first…
Colour addition
When adding coloured lights (not paint) together, a good choice for the primary colours are red, green and blue (RGB for short). If you don’t believe me, take a close up look at a TV monitor. What colour are the pixels? RGB. Why? Because these are primary colours of colour addition, meaning that we can make most possible colours by ‘dialling in’ these three colours in suitable amounts (and by ‘amounts’ we mean brightnesses).
For example, what colour do we get if we mix red and green? If you are fixated on the world of paints, you will probably say ‘brown’, but in the world of coloured lights the answer is yellow. Don’t believe it? I have two pieces of evidence to offer.
The first is the picture below, in which a red and green light are shone on the same wall.
We might say ‘red + green = yellow’ or ‘R+G=Y’.
The second piece of evidence (for those suspicious people who think I may have doctored the picture) comes from the Simpsons. Pause an episode and take a close-up look at one of the character’s faces. You will see that the red and green pixels are firing to create the yellow, with the blue pixels dimmed.
There are two other combinations of mixing two of the primary colours. Blue plus green makes cyan (B+G=C), and red plus blue makes magenta (R+B=M), as below…
Cyan, magenta and yellow (CMY) are called the secondary colours of colour addition, formed by adding equal amounts of two of the primary colours.
What happens if we mix all three primary colours? Then we make white, as shown by putting the three previous diagrams together and showing the whole picture. Look at the white light in the middle!
To understand what follows, the preceding colour combinations are essential knowledge. So here they are summarised in a table – try to learn them before you continue. Or you could use the previous diagram to do the same job…
| R + B = magenta (M) |
| B + G = cyan (C) |
| G + R = yellow (Y) |
| R + G + B = white |
We make other colours (say, orange) by mixing two or three primary colours in varying brightnesses.
We said there were two classifications of primary colours, with RGB being the first. So it’s time for the second…
Colour subtraction
This is for paints and other pigments. I’ll cut straight to the chase – the answer is that the best choice of primary colours is CMY.
If you don’t believe me because you loved your school art lessons, you will want to go ‘old school’ and plump for RYB instead. However, consider that newspapers and cardboard packaging often show evidence of test printing areas in CMY, and when you buy inkjet cartridges, they are in CMY, not RYB.
So what does colour subtraction mean? Colour addition seems fairly obvious, but subtraction? What is it? We’ll answer that by considering a different, really fundamental question – what does it mean for an object to be red? It means that when white light hits it, it reflects only the red part of the white light, and that reflected red light is what we see. So it looks red. Now if we consider white light to be composed of RGB (we have already seen that R+G+B=white), then we can say that a red object, in doing its reflecting thing, subtracts the blue and green (by absorbing rather than reflecting them) from white light.
To really hammer this home, let’s ask some puzzle-style questions. We’ve seen that a red object in white light looks red (because it is), but what colour would it look in green light?
The photo above shows that it looks fairly close to black! Green light is hitting it, and it’s no good at reflecting green light, only red, so it reflects no light. And that’s what black is. (It’s not perfect black, but it’s pretty good. If you are seeing it as red, that might be partly your brain’s knowledge of strawberries overriding your visual input. Squint at it, so you can’t tell it’s a strawberry. Not a bad black, right? Pretty dark, anyway.)
What colour would it look in red light? Red! Because it can reflect the red light that is hitting it. And in yellow light? Well, yellow light can be considered to be made of green and red – it will absorb the green part of the yellow light, and reflect the red. So it still looks red… (If you think it looks quite orange in the photo, look back at the strawberry in white light – turns out it was a fairly orange-red strawberry!)
Why not test your understanding before you carry on by asking yourself what colour a yellow object would look in (a) white, (b) red, (c) green, (d) yellow and (e) cyan light? Remember, a yellow object can reflect red and green light (that’s why it looks yellow). The diagram below might help – answers at the bottom of the page…
Look at part (a) of the previous diagram really carefully, in which a yellow object is viewed under white light. It looks yellow because it reflects the red and the green parts of the white light (which together make yellow). Another way of saying that it reflects the red and green is that it subtracts the blue from the original white. (Stop to check you understand this; it is why paints work by ‘colour subtraction’ – they subtract certain colours from the light hitting them, and reflect the rest). This makes yellow a primary colour for colour subtraction (paints, pigments etc, but not lights).
Likewise, is there a pigment that will only subtract green? Yes. To subtract green, it needs to reflect red and blue, which makes it look magenta. Magenta is another primary colour of pigments. And cyan is the third primary colour of colour subtraction, because in reflecting blue and green (= cyan), it subtracts red.
Mixing paints
Look at the two pots of paint below, in cyan and yellow.
What colour paint you would get if you mixed equal quantities of cyan and yellow? I’m confident that from childhood knowledge many of you would say ‘green’. And it wasn’t a trick question – you’d be right.
We can explain this with our RGB model of light and CMY model of colour subtraction. The cyan paint subtracts red from white light, and the yellow subtracts blue from white light. If we mix them together, the combination subtracts red and blue, so only green can be reflected. The combination looks green. The diagram below reinforces this explanation visually.
By the way, complementary colours are colours that together produce white (in addition) or black (in subtraction). So red and cyan are complementary, since cyan is blue plus green. That is, R + C = R + (G + B) = white (or black if subtracting). Green and magenta are also complementary, as are blue and yellow. Interestingly, in the RYB colour model, the sets of complementary colours are different, but we won’t confuse the issue with examples of that here.
And just before we move on to the next level of complexity, I’ll just address the fact that we have been referring to the CMY model, whereas in printing it is common to refer to the CMYK model. The K stands for ‘key’, and represents a ‘black’ pigment. Adding black to CMY allows for production of colours in a range of tones.
Next steps in understanding colour
You might have noticed a rather large simplification that we have made. We have sort of assumed that red, green and blue are the only colours of light that there are.
In fact, as Newton showed in his work on optics, white light can be split, using a prism, not into just three colours, but a whole gradient of colours called the spectrum. Each of the infinitesimally different colours along the picture from left to right corresponds to a different wavelength. Wavelengths are typically measured in nanometres (nm). 1 nm is 1 millionth of a millimetre.
The fact that we perceive the combination of red and green light as yellow does not mean that yellow doesn’t exist in its own right. It does. The colours of the spectrum are linked to the wavelength of the light – and there are single wavelengths of light that are perceived as yellow, without having any red or green in them.
Light that consists of only one wavelength (in practice, a very small range of wavelengths) is called monochromatic light. Red, green and yellow monochromatic light might appear as follows on a diagram of a spectrum.
If you’re uncertain about this diagram, you can think of it as the whole spectrum (like in the photo above), but with all the wavelengths missing apart from three…
It is crucial to realise that mixing red and green monochromatic light does not produce the ‘yellow spike’ from the diagram above, but produces a pair of ‘spikes’ (at red and green), that our eye-brain combination perceives as yellow. There is more than one way to produce light that ends up being perceived as yellow! (You will find out how this works in Jamie Wong’s article).
Another thing! In making the statement ‘mixing red and green light’, we are not being clear whether those colours are monochromatic, as in the nice sharp peaks of the diagram above, or something ‘messier’, as in the diagram below.
By the way – this diagram is a bit misleading (but I don’t know how to draw it better). Across the range of each of the lights, the colour should really change with wavelength – so the colour being shown represents the overall impression of that whole range of wavelengths…
We saw already that a red object does look fairly black in green light. What this means is that whatever messy set of wavelengths are in the green light we use, not many of them are strongly reflected by the red object. You might also, based on all the preceding discussion, expect a red object to look black in blue light. Here is a photograph of the strawberry in blue light.
It does look pretty black, but I think there is a bit more ‘red coming through’ than there was when it was under green light (or is that just me??). If so, a possible explanation is that:
- the green light had a spectrum that was comparatively ‘sharp’ (not a technical term!) and didn’t overlap with the wavelengths reflected by red, whereas
- the blue light consists of a messier range of wavelengths (that still get perceived as blue), and that range ‘bleeds’ into the range of wavelengths reflected by the red object. You could describe this as ‘the blue light has a bit of red in it’.
That explanation is represented visually in the diagram below.
Just before we sum up, it might be worth revisiting the question ‘what does it mean to be red?’ Previously, when we were talking only of RGB lights, we said a red object is one that only reflects red light. Now we can be one level more sophisticated, and say that a red object reflects certain wavelengths of light in relative quantities such that our eye/brain perceives the reflected combination as red.
Summary
- RGB is a useful choice of primary colours for light (colour addition) as exemplified by TV pixels.
- CMY is a useful choice of primary colours for paints/pigments (colour subtraction), as exemplified by colour printer cartridges.
Further complications
This whole page has been full of simplifications, in order to allow us to understand colour at a certain (fairly elementary) level. That was deliberate – often we need to embed or internalise these simplified stages before we can understand the more realistic/more complex models. We have tried to make it clear where we have made the simplifications.
But however hard we try to justify it, we have made them, and they make it pretty much impossible to tackle questions such as:
- How do we actually perceive colour? How can a spike at 700 nm (red) and a spike at 550 nm (green) have the same visual effect as a single spike at 600 nm (yellow)?
- What is pink? Or brown? After all, they are not in the spectrum!
But then if we had tackled questions like that, then you wouldn’t need to go find ‘Hexcodes to eyeballs’, would you?!
Image attributions:
- Spectrum on wall: CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0/)], via Wikimedia Commons
- Spectrum on carpet adapted from a CC0 image (source: Pixabay)
- Inkjet cartridge adapted from CC0 image (source: Pixabay)
- Newspaper excerpt, The Guardian 22 June 2018
Answers to ‘yellow object quiz’: (a) yellow, (b) red, (c) green, (d) yellow, (e) green.