# The maths behind RGB images

## About this lesson

In this lesson students explore the colour model RGB (Red, Green, Blue) commonly used in digital imaging and display systems and why there are 256 colours using mathematical understanding of powers. Students convert decimal numbers (numbers that use the digits 0 to 9) to binary.

Year band: 7-8

Curriculum Links### Curriculum Links

Years 7–8

#### Digital Technologies

Investigate how digital systems represent text, image and audio data using integers AC9TDI8K03

Explain how and why digital systems represent integers in binary AC9TDI8K04

##### Achievement standard

Students acquire, interpret and model data with spreadsheets and represent data with integers and binary.

#### Mathematics

Year 7

Represent natural numbers as products of powers of prime numbers using exponent notation AC9M7N02

##### Achievement standard

By the end of Year 7, students represent natural numbers in expanded form and as products of prime factors, using exponent notation.

#### General Capabilities

Numeracy: Number sense and algebra: Number and place value (Level 9)

### Learning 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 |

2 |
2 |
2 |
2 |
2 |
2 |
2 |
2 |

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 |

2 |
2 |
2 |
2 |
2 |
2 |
2 |
2 |

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 2^{7}, which is 128. It is larger than 115, so we mark that as a 0.

Next is 2^{6}, which is 64. This fits into 115 with 51 remainder, so we mark it as a 1.

Next is 2^{5}, which is 32. This fits into 51 with 19 remainder, so we mark it as a 1.

Next is 2^{4}, which is 16. This fits into 19 with 3 remainder, so we mark it as a 1.

Next is 2^{3}, which is 8. This is larger than 3, so we mark it as a 0.

Next is 2^{2}, which is 4. This is larger than 3, so we mark it as a 0.

Next is 2^{1}, which is 2. This fits into 3 with 1 remainder, so we mark it as a 1.

Next is 2^{0}, 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 2^{7 }value through to the 2^{0} 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.

In Digital Technologies, binary can be explored using bitmap images. Bitmap images are commonly displayed as a combination of red, green and blue, using the RGB colour model. Each colour in the RGB model can be represented by 8 bits. When all three colour channels (red, green and blue) are combined, the resulting colour is represented by 24 bit. RGB can have 256 different intensity levels ranging from 0 to 255 (inclusive).

#### Mathematics

With 8 bits, you can represent 2^{8} (2 multiplied by itself 8 times) or 256 different combinations. Students can explore powers and what it means. For example, 2^{5} 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.