Table of contents
The Human Eye
Although the electromagnetic spectrum has a vast span, the eye can only detect wavelengths from about 390 to 750 nm, the so-called visible range. Moreover the eye only consists of three types of colour sensors, Short (S), Medium (M) and Long (L) cones which detect Short wavelengths, Medium Wavelengths and Long Wavelengths respectively. These have a maximum at Blue (b), Green (g) and Red (r) respectively, the so called Primary Colours.
When a photon of a specific wavelength hits the cones of the eye, it is either detected or not detected and the eye does not know what wavelength or colour the photon is. The brain however deduces colour by contrasting the relative intensities of the three cone types S,M and L, for instance if a high intensity of light is only detected by S cones and nothing is detected by M or L cones, then the brain would translate the colour as Blue (b). Conversely if there is no light detected by the S and M cones and a high intensity of light detected by the L cones, then the brain would translate the colour as Red (r). The brain creates all other colours by using ratios detected by the three cones S, M and L.
Additive Colour Mixing Using Light Emitting Diodes (LEDs)
Light Emitting Diodes are cheap unpolarised light sources and can be made in Blue, Green and Red. The spectra below shows a typical spectrum.
The following image shows an overlay of a Red (r), Blue (b) and Green (g) LED. Note the area where the Green (g) and Red (r) overlap appears to be Yellow (y). If we look at the spectrum of the Red and Green LEDs above we can see that there is actually very little light at 580 nm. Yellow (y) light is not actually created, instead the eye detects a low intensity of light at the S cones and a high intensity of light at both the M cones and L cones and the brain translates this high intensity of light as Yellow (y).
This type of colour mixing is called Additive Colour mixing and the light examined is light generated from the three LED sources, the three primary colours, Red (r), Green (g) and Blue (b).
- Intense Red (r) and Blue (b) appear to make the secondary colour Magenta (M).
- Intense Green (g) and Blue (b appear to make the secondary colour Cyan (C).
- Intense Red (r) and Green (g) appear to make the secondary colour Yellow (W).
- Intense Red (r), Green (g) and Blue (b) combine to make White (W) which is the maximum intensity your eye can see.
- The absence of any light appears blacK (k).
In every pixel of a computer monitor, there are three primary LEDs, red (r), green (g) and blue (b). The secondary colours yellow (y), cyan (c) and magenta (m) are a mix of two of the primary colours (r+g, g+b, r+b respectively) while white (w) is a mix of the three primary colours and black (k) is an absence of all three colours. The Matplotlib library recognises all of these single letter abbreviations r,g,b,y,c,m,w and k as well as the full colour names red, green, blue, yellow, cyan, magenta, white and black which can be used to encode colours using a single letter.
However these LEDs are typically not just merely on at full brightness or off. Instead they have a range of intensity levels. The convention is to use 8 Bit (0-255). We can instead construct a three value so called [r,g,b] array to designate each individual colour. This [r,g,b] array is commonly used in Programs such as Microsoft Paint and Microsoft Word however other programs such as the MatPlotlib library normalise this [r,g,b] array to create a [r,g,b] float array.
If we look at the Colour picker in Microsoft Word you can see the three Primary Colour Channels and how they all have a level of 255 for their respective colour channel.
The secondary colours have a level of 255 for 2 channels:
While white has a level of 255 for all 3 channels.
Black is defined as the absence of light where all three channels are off.
Intermediate values where each Channel has the same value are known as Shades. Alternatively if there is only a single channel, it is known as grey scale.
All other colours are made using various combinations and you can explore using the colour picker in Microsoft Word or another program.
[r,g,b] Array – 8 Bit Levels
Now let's have a look at the binary system which is best represented by a light switch. It can have 2=21 positions (0 or 1). If we move to 2 switches then there are 22=4 combinations that can be made (00, 01, 10 and 11). If we have 3 switches then we have 23=8 positions and so on and so forth. This is 1 bit, 2 bit, 3 bit respectively.
Colours are quite often encoded in 8 bit. Under 8 bit encoding, there are 28=256 intensity levels for the red channel, 256 intensity levels for the green channel and 256 intensity levels for the blue channel which as mentioned is sufficient for the Human Eye. Because 0 order indexing is used, we assign one of these values to 0 and we go up to the maximum value of 256 but never reach it, so the range of values for each channel is from between 0 and 255.
In Python's MatPlotLib the uint8 (0-255) values aren't usually for plotting. Instead they are presented as floating point numbers between 0 and 1. In essence one needs to divide through by 255. For instance red would in uint8 form would be [255,0,0] and in float form it would be [255/255,0/255,0/255] or [1.00000, 0.00000, 0.00000].
Colours can also be encoded with an alpha value to alter the transparancy. This gives a [r,g,b,a] float array. The fourth channel selects the transparency where 0 stands for full transparency (invisible) and 1 represents full colour.
8 bit colours are also commonly encoded using 2×4 Bit values. In 4 Bit, there are four switches and thus 24=16 numbers of combinations. Each of these combinations is assigned a number starting from 0 and going to 9 and after the first 10, once we have ran out of numbers, we instead use a Capital letter on the keyboard so continue using A and finish at F.
Since 16×16=256 we can use two characters to represent each number. Because we have three channels we need 3×2=6 Characters to specify a colour. In this Hexadecimal form we also begin with a #. So the colour red for instance is #FF0000.
The three systems represented above are all just different ways of selecting a numeric value from 0 to 255. A numeric value is then applied to the red channel, green channel and blue channel.
|8 Bit Numeric|
Spelling Differences Colour vs Color
It should be noted that there are two ways to spell colour. One with a u "colour" and one without a u "color".
"color" is actually an older spelling and it was updated to the spelling "colour" in the UK post 1777, this is after the USA declaration of independence and as a consequence of declaring independence the USA did not keep in line with British standardisations* and thus "color" is generally preferred in the USA whereas as "colour" is preferred in the CANZUK countries. MatPlotLib only recognises the former spelling "color" so if you use the modern spelling "colour" like I as a Brit commonly do, then you'll be frustrated like me when your code throws up an error.
* Ironically the UK and USA can't even "standardise" the word "standardize".
Colour Picker Tool
Note there a number of colour selection tools online for example:
People usually just use them to select a colour but I thought it worthwhile to explain the foundation behind how we select them.
Microsoft Office Standard Colours
Here are the Standard Colours in Microsoft Office.
|Microsoft Word RGB||Hex|
Subtractive Colour Mixing Using Inks
In print media Subtractive Colour Mixing is used instead of Additive Colour Mixing. For print media, the source of light comes via room light or the ultimate source of light on our planet, the sun. Print media usually involves paper which appears White (w). Paper appears White (w) because it is highly reflective and all the light incident on the paper is reflected. Dyes however absorb Light of certain wavelengths and reflect light of other wavelengths and this reflected light appears to make coloured items such as paintings and books.
The most commonly used dyes are Cyan (c), Magenta (m), Yellow (y) and Black (k). These dyes are shown at full concentration and diluted in water about 1,000 fold.
The transmission spectrum of these four diluted solutions is below.
As you see the dye that appears Yellow absorbs everything in the Blue (b) and lets through the light which is in the Green (g) and Red (r). The high intensity of Red (r) and Green (g) light passing through the dye make it appear Yellow (y).
- Reflective Piece of paper with No Dye
- White (w) = White (w)
- Cyan (c) Dye
- White (w) – Red (r) = Green (g) + Blue (b) = Cyan (c)
- Yellow (y) Dye
- White (w) – Blue (b) = Red (r) + Green (g) = Yellow (y)
- Magenta (m) Dye
- White (w) – Green (r) = Red (r) + Blue (b) = Magenta (m)
- blacK (k) Dye
- White (w) – Red (r) – Green (g) – Blue (b) = blacK (k)