Computer colours
Q. How many colours can a computer display?
A. 16,777,216.
That's a lot of colours. And a very specific number. Why is it that number?
How colours are made
You already know that you can make different colours by mixing a small number. You've seen it work with paints, but it also works with light. That's why we get rainbows - the white light from the sun is a mixture of all those colours, and the raindrops split them up.
But it happens that you don't need all the colours of the rainbow to make a rainbow. You just need the 3 primary colours: red, green and blue. Mix those together in the right proportions, and you can make all the rest. You can check this for yourself: hold a magnifying glass up to a computer or TV screen, and you'll see it's made of red, green and blue dots. Varying the amount of light each of those dots emits gives you all the colours you're seeing.
That's great. But why 16,777,216?
So to make any colour, all your computer needs is an amount of red, an amount of green, and an amount of blue. Which is why they're called RGB colours. And the amount of each can run from 0 to 255 (so including the zero, that's 256 settings for each colour). How many combinations does that give you?
256 x 256 x 256 = 16,777,216Okay. So why 256?
256 is a convenient number for computers, and the reason has to do with binary and memory. I'll explain this more elsewhere, but computers store things in binary (0s and 1s). Each 'bit' of memory can have 2 states, either a 0 or a 1. Eight of these bits make a 'byte' (computers like to deal in bytes), which gives a total of 256 possible combinations (28).
Here are a few colours - hover the mouse over them, and you'll see the amount of red, green and blue in each.
There's even an HTML form element that lets you pick colours. What this looks like will depend very much on the browser you're using, but you can play around with one here:
A HEX on you
You'll often see colours that look like #A2B5FF, #CCCCED or #14880C. What kind of numbers are they? These are hexadecimal numbers. Again, we'll say more on this another day, but just like binary is base 2 and decimal is base 10, hexadecimal is base 16. Why is base 16 good? Because 16 x 16 = 256, so we only need 2 digits to represent the 256 shades of each colour.
The '#' tells the computer this is hex, and the numbers that follow are RRGGBB. Because we run out of numbers when we get to 9, the numbers A - E are used to represent 10 - 15. Here are a few examples:
#10 = (1 x 16) + (0 x 1) = 16
#39 = (3 x 16) + (9 x 1) = 57
#AA = (10 x 16) + (10 x 1) = 170
#FF = (15 x 16) + (15 x 1) = 255
Anything else? Transparently so
So that's RGB colour. But there's one more thing - alpha. RGBA colours allow a fourth parameter, which define the opacity, or how 'see through' the colour is. This doesn't actually create new colours, but it allows the specified colour to be altered based on what lies beneath it.
You can do the same thing with hexadecimal colours, but in that format the alpha value runs from 00 to FF.
Transparency allows for some pretty cool effects. You can mix colours, fade objects in and out, make text readable over noisy backgrounds, and create shades of any color without having to calculate the values for each one. Have a look at the Glassmorphology article for one of my favourites uses.