How can we describe colours on a computer?
We need a way to change the colours we see with our eyes into numbers that can be stored onto a computer. We call this “colour coding”. There are different ways to code colour. We can either represent a colour in values of Red, Green and Blue (known as RGB colours), or a distance travelled along a continuous hue rainbow.
In this lesson we look at coding RGB colours. If you are doing any computer programming or image editing, then understanding colour representations on a computer is a good skill to have. Also, it is good to put to memory certain colour combinations.
Red Green Blue colour values
RGB are made up of three values, three channels. A value is given to each of the colours red, green and blue. Think of it as three torches, switched on and pointing to a blank wall, in a darkened room. One is red, another green and the final torch shines blue light. When the red-torch is shining, all that can be seen is red. When the blue light is on, and the others off, you would see a blue light. When the red and green lights are on, you will see a yellow colour. On a computer we would write these colours by a triplet of three values. The values would be placed in brackets. For example, we may write a that a colour grey is rgb(25,25,25) or the colour blue is rgb(0,0,255).
Top tip. Think of RGB colours in terms of light from a torch. The brighter the torch shines, the lighter the colour.
We need to understand the minimum and maximum value for each channel.
- We treat the minimum value as zero,
- We will use 255 as the maximum value.
So a value of 0 means that there is no light, and a high value of 255 represents the maximum light, and is therefore very bright.
Actually, the maximum value depends on the graphics system. Frequently a maximum value of 255 is used, but could be 1, or even written as a percentage (0 to 100%). But why is 255 used as a maximum value? Well it comes from how the values are stored. If we name the colours in a range between 0 and 255, then we can store it by one byte. This byte is equal to 8 bits. So each bit can either be 0 or 1. Zero is 00000000, and 255 is 11111111.
Important colour values to remember
Think of the values as a slider on a torch. With the slider at the lower position there is less light being produced by the torch and we get a darker colour. When the torch position is at 255, it is slid all the way to the top, and is on the brightest setting and we get a lighter colour. An rgb triplet of (0,0,0) would mean black, and one of (255,255,255) would be white.
By setting each of the primary colours to 255, and the other values to zero, we can define red, green, and blue.
| (0,0,0) | Black |
| (255,255,255) | White |
| (255,0,0) | Red |
| (0,255,0) | Green |
| (0,0,255) | Blue |
To get different shades of grey, we make each of the values of R, G and B to the same value. Here are some examples:
| (0,0,0) | Black |  |
| (50,50,50) | Dark grey |  |
| (100,100,100) | Grey |  |
| (175,175,175) | Light grey |  |
| (200,200,200) | Very light grey |  |
| (255,255,255) | White |  |
RGB colour mixing
We now turn our attention to making different colour hues, from mixing different values of Red, Green and Blue.
To mix colours in computer graphics, we start with the three elementary colours Red, Green, and Blue. When we place them into a Venn diagram, we can see how the colours add together.
- Magenta is made by mixing blue and red
- Cyan from mixing Green and Blue,
- Yellow from mixing Green and red.
- White is made from mixing Cyan, Yellow and Magenta.
Also, from the diagram, note which colour is opposite to another. This helps us to understand colour mixing.
- Yellow is opposite Blue,
- Cyan is opposite to red, and finally
- Magenta, is opposite green
We see the same idea in the numbers: Magenta is (255,0,255), which is opposite green and is represented by the triplet (0,255,0).
Now let us work through several examples, which will help us understand RGB colour manipulation.
Example 1. Starting black and adding red
Let’s start with black and making it more red. When we gradually increase the quantity of red, the result is to initially create a very dark red, and as we add more red the colour becomes a brighter red. In the Figure, we show three sliders for red, green and blue. The circle in the left position represents a value of 0, and the right position is 255.
Example 2. Adding cyan to red
Now let us add cyan to black. Let us focus our attention to column B. This time we mix equal quantities of Green and Blue (ie., cyan) into the mix. Each time we raise the Red value as before. Now we get lighter shades of red. People would probably say that B2 was actually Black, but it is a very dark red! B7 is now pink, rather than red.
Example 3. Starting with magenta and adding green
Now let us do the same with magenta. Here we start off with magenta, and make it lighter by adding green. Maybe it feels counter intuitive, but we are making it lighter by adding its opposite colour. Opposite to magenta is green; so we add green to make magenta lighter. The opposite of red is cyan; so we add cyan to make red lighter.
Activity
Using the colour picker below, or go to any drawing application that has a colour picker, and try out the following activities.
- Start with the RGB sliders at 0, then increase the slider for the red channel, to see how this gradually affects red.
- Find the other primary colours: Green and Blue.
- Using the sliders, create each of the secondary colours, cyan, magenta and yellow.
- Start off with one of the main primary colours (such as blue), and gradually add more yellow.
- Try to find different colours, such as orange, brown, purple.
- Now, away from the computer, and with sheet of paper and a pen. From memory, write the RGB values for the following colours:
- Black
- Green
- Magenta
- White
- Blue
- Cyan
- Yellow
- Light gray
English (UK) 
Cymraeg