colours | 2017-10-04

Colour Models
Having recently created a neat little game, I’ve been doing some thinking about colours and the different colour models we use.
You may recall that, when we learned to paint in school, we were introduced to the colour wheel with its primary, secondary, and tertiary colours.
If you don’t recall, those are:
Primary | red, yellow, blue
Secondary | orange, green, purple
Tertiary | vermillion, amber, chartreuse, teal, violet, magenta
I forgive you if you didn’t remember all of those tertiary colours — I had to look them up as well…

This model is known as the RYB model (RedYellowBlue) and the concept is that you can start with three tubes of paint, one each of red, yellow, and blue, and from there create any other colour in the spectrum. And it works!
But if you are building a website (or playing that cool game linked above) or building a computer monitor, you’ll notice that computers don’t use this model for generating colour; they use RGB (RedGreenBlue).
The primary colours here are red, green, and blue — yellow is replaced by green.
But wait! How do you create a primary colour using a secondary colour; it defies the laws of science!!
Well, naturally, it doesn’t…
These two colour models look at colour from two different perspectives: additive & subtractive.
Both rely exclusively on the qualities of light and the reaction of the human eye to different wavelengths of light. After all, where there is no light, there is no colour.
In the subtractive, RYB model, you place a substance on a surface and expose it to light. The properties of the substance cause it to absorb (subtract) certain wavelengths of light and reflect others.
In the case of red paint, it subtracts all wavelengths of light other than the reds, which it reflects back from the surface. Your eye picks up that wavelength with the corresponding cone receptor and tells your brain you’re seeing red (the colour, not the emotion).
Put some blue paint in the same spot on the surface and it absorbs some of that red light but reflects some of the blue wavelengths, even though the red paint is still working at subtracting the blue. Then your eye gets a mix of the two sets of wavelengths and your brain is told that you’re seeing purple.
The RGB model works in exactly the opposite fashion; no subtraction but addition.
Since you are not painting on your computer screen (at least I hope you aren’t), it has to produce colour otherwise. And it does this via the tiny pixels on the screen.
Each pixel is actually a trio of LEDs: one red, one green, one blue. And, if the acronym there didn’t give it away, that trio emits light or, if you will, adds light to your environment. So, depending on the amount of light being emitted by each of the LEDs (scaled from 0 – 255 brightness), different colours are produced.
So, to mimic the example above, if a webpage is coded to display a bright and clear red, the code would be RGB(255, 0, 0) which tells the pixels to turn the red LED on all the way (255 being the top of the brightness scale) and keep green and blue off entirely. The result is your eye picking up the exact same wavelengths of light that were reflected by red paint. If you code RGB(255, 0, 255), your eye receives all the red and all the blue and your brain perceives purple.
However, this still doesn’t explain yellow and green.
Yellow and Green
Take a look at these two representations of the colour models:


In the subtractive colour model, to borrow Barney’s lyric, “when you mix blue and yellow, it makes green.”
In the additive colour model, “when you mix red and green, it makes yellow.”
To understand this, we need to go back to our old posts about eyes, particularly human eyes.
Eyes and The Electromagnetic Spectrum
You could read that entire post again and enjoy the beautiful pictures there but the key bit I want to pull out is the rods and cones in the eye which are its light receptors.
The rods detect form, motion, and brightness while the cones are divided into three types: L, M, & S (great… more random letters…)
Each of the cones reacts to different wavelengths of light: the Ls to Long wavelengths, the Ms to medium, and the Ss to short ones.
It seems pretty straightforward, then, that a reflected set of ‘red’ wavelengths or a projected set of ‘red’ wavelengths would both be perceived as red by the Ls in much the same way. For reference, the visible light spectrum goes, short to long, from violet to red.
You’ll note that the receptors do not react to particular colours but, instead, to a range of frequencies of energy — your brain doesn’t have a colour wheel inside it and your eyes don’t have an infinite set of receptors, one each for every possible wavelength of light.
Indeed, our eyes don’t even perceive large parts of the light spectrum (e.g. infrared and ultraviolet):

Here you could go back to the other posts on eyes and look at the cool things that specialized eyes see (like pollen and ultraviolet light) or look at the peacock mantis shrimp’s glorious eyes.
In fact, here’s the excerpt about the peacock mantis shrimp:
On any mantis shrimp’s head protrude two, stubby, arm-like stems on which rest the most complex eyes in the entirety of creation. Each of these eyes are split into three sections: the rhabdom, the mid-band, and the dorsal and ventral hemispheres. The dorsal and ventral hemispheres detect form and motion, the mid-band has 6 lines filled with 16 different types of photoreceptors (compared to the 3 humans have) which detect a dizzying array of colours and filter light in different spectra, and the rhabdom detects different vibrations of light (different spectra and polarization). Since their eyes are split into three sections, each eye has independent trinocular vision and therefore has depth perception even if it loses one eye stalk entirely.
Each of these special characteristics of non-human eyes is designed to detect different parts of the electromagnetic spectrum and provide the creature with helpful data to do what they do (e.g. find pollinating flowers or know when the females are in heat).
Since our three receptors react to a range of frequencies, we can understand that one doesn’t react when it sees ‘red’ but rather when it sees any ‘colour’ near red within the spectrum it reacts to.
This diagram nicely displays which parts of the visible light spectrum each cone reacts to:

You’ll notice that the Ss are mostly on their own over in the very short wavelengths but that the Ms and Ls share a lot of the spectrum.
Thus, in a similar way to mixing paint or to producing certain brightness from LEDs, the level of reactivity to certain wavelengths of light, when shared by these receptors, sends a message to the brain that is interpreted as the corresponding colour.
Since yellow is in between green and red on the visible light spectrum, the Ms and Ls both react to that set of wavelengths and their signal gets conflated as the ‘yellow’ reaction.
In the end, both the additive and subtractive models are seeking the same goal: how to provide the right light frequencies to get the desired reaction from the cone receptors.
So far on colours
Side Notes and Links
If you take a closer look at that additive model picture, you’ll see that the secondary colours are cyan, magenta, and yellow.
These are actually the basis of the CMY or CMYK colour model which is used in digital printing, a system of both subtractive and additive colour models!
Opponent Process | the secondary process which increases the efficiency of the signal from the cone receptors to the brain