RGB: red, green, and blue
When you look at your computer screen, you see a lot of different colours. However, this variety of colours is an illusion: computers essentially know only three different colours — red, green, and blue. In this step, we will look at how these three colours merge into the colours visible on the screen, and at how they are represented by mathematical systems.
Combining R, G, and B
The RGB system is often used for computer screens and coloured lighting:
There are many colours in the image above. But how do we get all these colours using only red, green, and blue?
With a single white light, we can create two colours by turning the light either on (white) or off (black). Adding a coloured filter to the light makes the light turn a different colour. Three lights with red, green, and blue filters would create three individual colours.
Overlaying these colours allows new combinations of colours: yellow, cyan, and magenta.
With a dimmer switch capable of affecting the intensity of light, we can create a number of different shades or colours. Combining the dimmer switch with the original white light without a filter, we can create any shade on the black-grey-white spectrum by turning the light off, or turning it on and using the dimmer switch.
Using dimmer switches with the three coloured lights, we can produce different shades of each coloured light by changing the light’s intensity with the switch.
Lighting is just one implementation of the RGB system — another is website colours, which work very similarly to the lighting example. Web colours are measured on a scale from 0 (“none of this colour”) to 255 (“the most intense colour possible”). Thinking of the lighting example, this would mean 256 shades of each colour of light (256 red, 256 blue, and 256 green).
Expressing colours with the RGB system
Here’s an example of how colours are represented in RGB, in this case a particular shade of orange:
This shade of orange uses: * Red (at full intensity) * Green (at more than half intensity) * No blue
This would be represented as:
A very large variety of colours can be represented in this way. Because red, green, and blue can each be shown at different intensities, these colours can, when mixed together, create up to 16777216 unique shades:
256 reds × 256 greens × 256 blues = 16777216 shades of colour
The number of colours is linked directly to the number of available bits. In the binary table we used in previous steps you saw that a byte (8 bits) can store 256 numbers, and there’s a byte available for each colour: red, green, and blue.
Activity: create some colours
When you use the RGB system in code, you represent the colour black by
- Open a web browser and type into Google:
As you can see, a colour picker appears. It lets you choose the colour you require, and then the colour’s shade.
Use the colour picker to find the RGB values for orange, yellow, pink, and brown.
Select each colour using colour bar at the bottom, followed by the shade using the top section. Notice that the RGB and hexadecimal values change according to what colour you choose. (We’ll discuss hexadecimal in an upcoming step.)
Activity: create colours on a web page
One of the applications RGB colours are used for by computers is content on websites. RGB colours can be used for text, borders, shadows, backgrounds, and many more things.
To make use of the theory you’ve just learned, have a go at creating a web page that shows different colours.
- Open a text editor, and copy and paste this code into a file:
<!DOCTYPE html> <html> <body style="background-color: rgb(255,0,0)"> <h1 style="color: rgb(0,255,0)">This is a heading</h1> <p style="color: rgb(0,0,255)">This is a paragraph.</p> </body> </html>
- Save the file as
index.html, and open it in your web browser
- Change the colours of the website by changing the values of each
rgb(x,x,x)statement, saving the file, and reloading it in the browser
Find a colour scheme you like for your web page, and share it with the other learners in the comments!