About this lesson
In this lesson, students explore the RGB (Red, Green, Blue) colour model commonly used in digital imaging and display systems. They learn how each colour in the RGB model is represented by 8 bits and understand why there are 256 color intensities for each channel. Students will represent the 8 bits using their mathematical understanding of powers of 2. Additionally, they will practice converting decimal numbers (which use the digits 0 to 9) to binary.
Year band: 7-8
Curriculum LinksLearning hook
Computer images
How does a computer store and transmit image data in a digital system?
Share the slide Pixel images. Ask students what they notice and wonder.
Discussion should provide an insight into what students know and understand about how a computer stores and uses image data in binary.
Image: Pixel viewer screen capture: Kangaroo – the zoom-in on the right image shows RGB colour model values for each pixel)
Learning map and outcomes
Share the learning map outlining the main sections of the lesson and its outcomes.
- Investigate how digital systems represent images using integers.
- Understand how digital systems represent integers in binary.
- Use mathematical operations of multiplication and division to convert a decimal number to binary.
Learning input
Pixels
Students:
- explain that a computer stores and reads a combination of values to create images on screen.
A computer sees images as individual picture elements (pixels). Use this Pixel viewer to show that an image is made up of pixels. Each colour pixel in the image is made up of numbers that represent the colour as a combination of red, green and blue (RGB). Students can explore the RGB colour values of images.
Learning construction
RGB Colour model
Students:
- describe a colour using the RGB colour model.
Use the RGB colour mixer to explore the RGB values and the effect on a colour when red, green or blue values are changed.
Ask students to create a colour swatch of at least three different colours or a progression of shades of a colour. Each colour needs to include its RGB values.
Learning demo
Converting a decimal number to binary
Students:
- describe a colour using the RGB Colour model
- convert RGB colour values to binary
- explain how binary is used to represent images.
Students explore patterns and relationships between decimal numbers and their corresponding 8-bit binary representations. They will learn how to convert whole numbers typically used for characters and RGB values. By recognising the patterns and applying number rules, students develop a deeper understanding of the binary number system and its applications.
In the example colour the RGB values are:
 |
R 35 G 115 B 166 |
Using powers of 2
As a class, build the following table on a whiteboard, allowing for students to see a pattern and predict what is in the next column or row above or below.
|
128 |
64 |
32 |
16 |
8 |
4 |
2 |
1 |
|
27 |
26 |
25 |
24 |
23 |
22 |
21 |
20 |
Once the table is established, work through examples of converting a decimal number, for example, 35, which is the R value from our colour example. Start from left and record 1 if our number (35) contains the number on the top row. We can see 32 fits in 35 leaving 3 remaining. 16, 8 and 4 are bigger than 3 so we record a 0 for each of those. We can see 2 and 1 fit into 3 so a 1 is recorded for each. Making the binary number 00100011. We call this an 8-bit binary number. Repeat for the G 115 and B 166 values of the example colour.
|
128 |
64 |
32 |
16 |
8 |
4 |
2 |
1 |
|
27 |
26 |
25 |
24 |
23 |
22 |
21 |
20 |
|
0 |
0 |
1 |
0 |
0 |
0 |
1 |
1 |
Mathematically we can use powers to convert a decimal number to binary.
Demonstrate how to convert the G 115 value to binary using powers.
Start at 27, which is 128. It is larger than 115, so we mark that as a 0.
Next is 26, which is 64. This fits into 115 with 51 remainder, so we mark it as a 1.
Next is 25, which is 32. This fits into 51 with 19 remainder, so we mark it as a 1.
Next is 24, which is 16. This fits into 19 with 3 remainder, so we mark it as a 1.
Next is 23, which is 8. This is larger than 3, so we mark it as a 0.
Next is 22, which is 4. This is larger than 3, so we mark it as a 0.
Next is 21, which is 2. This fits into 3 with 1 remainder, so we mark it as a 1.
Next is 20, which is 1. This fits into 1 with 0 remainder, so we mark it as a 1.
So to write 115 as binary we start from the 27 value through to the 20 value, 01110011
The resulting 8-bit binary representation for 115 is 01110011.
Mathematically we can divide by 2.
Demonstrate how to convert the example RGB values (35, 115, 166) to binary using division by 2.
For the red value of 35
Start with 35.
Divide it by 2. The answer is 17 with a remainder of 1.
Continue dividing: 17 divided by 2 is 8 with a remainder of 1.
Continue dividing: 8 divided by 2 is 4 with a remainder of 0.
Continue dividing: 4 divided by 2 is 2 with a remainder of 0.
Continue dividing: 2 divided by 2 is 1 with a remainder of 0.
Finally: 1 divided by 2 is 0 with a remainder of 1.
Write down the remainders in reverse order: 100011.
For the green value of 115
Start with 115.
Divide it by 2. The answer is 57 with a remainder of 1.
Continue dividing: 57 divided by 2 is 28 with a remainder of 1.
Continue dividing: 28 divided by 2 is 14 with a remainder of 0.
Continue dividing: 14 divided by 2 is 7 with a remainder of 0.
Continue dividing: 7 divided by 2 is 3 with a remainder of 1.
Continue dividing: 3 divided by 2 is 1 with a remainder of 1.
Finally: 1 divided by 2 is 0 with a remainder of 1.
Write down the remainders in reverse order: 01110011.
For the blue value of 166
Start with 166.
Divide it by 2. The answer is 83 with a remainder of 0.
Continue dividing: 83 divided by 2 is 41 with a remainder of 1.
Continue dividing: 41 divided by 2 is 20 with a remainder of 1.
Continue dividing: 20 divided by 2 is 10 with a remainder of 0.
Continue dividing: 10 divided by 2 is 5 with a remainder of 0.
Continue dividing: 5 divided by 2 is 2 with a remainder of 1.
Continue dividing: 2 divided by 2 is 1 with a remainder of 0.
Finally: 1 divided by 2 is 0 with a remainder of 1
Write down the remainders in reverse order: 10100110.
So the binary representation of the RGB colour (35, 115, 166) is (100011, 01110011, 10100110).
Discussion
Have students share what they learned about binary numbers and RGB.
Extension
Find a mathematical reason why 256 colours are commonly used in computers.
Why is this relevant?
This lesson focuses on:
- binary numbers
- colour pixelation.
Bitmap images are commonly displayed using the RGB colour model, which combines red, green, and blue channels. Each colour in the RGB model is represented by 8 bits. When all three colour channels (red, green, and blue) are combined, the resulting colour is represented by 24 bits. The RGB model can have 256 different intensity levels for each colour channel, ranging from 0 to 255 (inclusive). To find the total number of possible colours, you multiply the number of values for each component: 256×256×256=16,777,216
Mathematics
With 8 bits, you can represent 28 (2 multiplied by itself 8 times) or 256 different combinations. Students can explore powers and what it means. For example, 25 is pronounced as ‘two to the power of five’ or ‘two raised to the power of five’. It means multiplying 2 by itself five times: 2 × 2 × 2 × 2 × 2, which equals 32.