CS 100 (Learn) — CS 100 (Web) — Module 01
NOTE: If your internet access is restricted and you do not have access to YouTube, we have provided alternate video links.
While it makes sense to represent characters with numbers, how can we possibly represent something like a colour as a number?
One system that is used in the real world is create a catalog of numbered colours. This is used in graphic design, artist supplies and paint stores.
In the early days of computing they used a similar system of assigning numbers to colours and it is still used in a few applications.
The problem with this approach is that you end up with a very limited number of colours, or to borrow a term from colour theory, a very limited "palette".
The easiest case to consider is how to represent different shades of grey. Despite what you may have heard, there are more than fifty shades of grey. In reality, colours and light intensities are continuous and so there are an infinite number of shades of grey between black and white. Of course, we will need to discretize them.
In practice, using one byte to represent a shade of grey is quite common. We can represent the numbers zero through two hundred and fifty-five [0 ... 255] in a single byte. We will assign zero to black, and two hundred and fifty-five to white, and then every number in-between will be a shade of grey, slowly progressing from black to white.
For example, two hundred [200] would be a light shade of grey, while fifty [50] would be a dark shade of grey. A very small number like three would be almost indistinguishable from black.
To represent the full spectrum of colour, we need to understand some colour theory and how colours combine to make other colours.
There are two core ways of thinking about combining colours: subtractive and additive colour theory.
When you were a kid, you were probably more familiar with subtractive colour theory, because when you mix paints or crayons together -- they become darker. If you mix green paint and red paint, you'll get a yucky brown-ish paint. It's called subtractive colour because combined paints will absorb more light (or take away light).
The colour theory that is used by most computer displays is additive colour theory. Additive colour is what happens when you combine coloured lights together: instead of becoming darker, they become lighter. Imagine that you have a green flashlight and a red flashlight: if you combine them, you will get a yellow light.
For additive colour theory, the three primary colours are red, green and blue. By combining different intensities of those three colours together you can get pretty much any colour that you could imagine.
They are almost always in that order: Red, Green, Blue or RGB. To help remember that, if you know your rainbow colours, that's the order they are in the rainbow: Roy G Biv [RoyGBiv]. Or, if you prefer, they are in reverse alphabetical order.
Similar to what we did with grey scale, we will use one byte for each colour: one byte for red, one byte for green and one for blue. This is three bytes times eight bits per byte which equals twenty-four [3 * 8 = 24] bits. Twenty-four bit colour is the most popular method of representing colour in televisions, phones and computer displays. Unless your display is ancient or very expensive, you are viewing this in twenty-four [24] bit colour.
Just like with grey scale, the intensity of each colour will be in the range of zero through two hundred and fifty-five [0 ... 255]. So for red, zero would represent black and two hundred and fifty-five would be bright red. A low number like fifty would be dark red, and a high number like two hundred would be light red.
One convention for specifying the three intensities of red, green and blue is to write it as RGB bracket number comma number comma number close bracket [rgb(number, number, number)]. The easiest way to see how it works is with a few examples.
rgb(100, 50, 200) is medium red, very little green, and a lot of blue. When you put that together it creates a nice purple.
If you increase the red to 200, then it becomes a nice pink. If you then increase the green to 200, it becomes grey. If all of the three colours are the same intensity, then it becomes equivalent to a shade of grey, as we discussed earlier.
rgb(0, 0, 0) is solid black, and rgb(255, 255, 255) is solid white.
In practice, representing 24-bit colour as a six-digit hex code is very popular because it is very compact and easy to use once you get used to it.
To show a hex colour, it starts with a hashtag and then each colour (in the order of RGB) is two hex digits.
Following this convention, #FF0000 is pure red, #00FF00 is pure green, #0000FF is pure blue, #000000 is black, and #FFFFFF is white.
If you google "hex color" you can find a wide variety of tools that will allow you to experiment with different colours and see what their corresponding hex code is.
As a tip, remember that the most significant digit in a two-digit code is the first number, so if you see a code like #F37E0B and you want to get a sense of what the colour is, look at the most significant digits: F seven zero. That will be a lot of red (F), medium green (seven) and almost no blue (zero). We know that red and green make yellow, but this has more red than green, so it will appear orange.