Pixels Make Colour

Overview

Students investigate how digital images represent colour using pixels and binary data. Building on prior learning about binary, they use an RGB colour mixer and pixel viewer to connect screen colour with three numerical channels: red, green and blue.

Learning intentions

Students will:

• Explain that a digital image is made from a grid of pixels.
• Describe how RGB values represent the colour of each pixel.
• Convert or interpret simple RGB values in decimal, binary and hexadecimal form.
• Use digital tools to investigate and communicate how changing RGB values changes colour.

Success criteria

• I can identify a pixel and explain its role in a digital image.
• I can describe RGB as three values controlling red, green and blue light.
• I can predict or explain the result of changing one RGB value.
• I can use evidence from a digital tool to explain a colour representation.

Curriculum links

• Digital Technologies — computational thinking: understanding and applying data representation in a digital context.
• Digital Technologies — designing and developing digital outcomes: using digital tools to investigate and communicate ideas.
• Technology — technological knowledge: understanding how digital systems represent and process information.
• Key Competencies: thinking; using language, symbols and texts; managing self; participating and contributing.

Lesson structure (75 minutes)

1. 0–7 min · Hook and recall. Display the opening pixel comparison showing an ordinary image beside a highly magnified version. Ask, “How can millions of colours be stored using numbers?” Students discuss what they remember about binary and suggest what information a single pixel might need. Share the learning intentions and success criteria.

2. 7–20 min · Explicit teaching: pixels and RGB. Use the pixels and RGB teaching slides to show that an image is a grid of pixels and that each pixel stores colour information. Explain that screens use additive colour: red, green and blue light are combined, unlike paint or ink. Model RGB values using examples: black is (0, 0, 0), white is (255, 255, 255), red is (255, 0, 0), and yellow is (255, 255, 0). Link 255 to an 8-bit channel, since 8 binary bits can represent 256 values from 0 to 255. Students annotate a simple pixel diagram on the RGB and pixel investigation sheet.

3. 20–32 min · Guided investigation: colour mixer. Open the colour mixer instructions and demonstrate changing the red, green and blue sliders. Students work in pairs with one device, using the RGB mixer to create black, white, grey, yellow, orange and purple. They record each colour’s three RGB values on the worksheet and answer: “Which channel changed?” and “What happened when all three values were equal?” Circulate and question students about evidence rather than accepting colour names alone.

4. 32–48 min · Binary and hexadecimal connection. Use the number representation examples to model one colour channel, such as 255 = 11111111 in binary and FF in hexadecimal. Emphasise that decimal, binary and hexadecimal are different ways of describing the same value. Students complete four short conversions or interpretations on the worksheet, then predict the appearance of colours such as (0, 0, 0), (255, 0, 0), (0, 255, 0) and (128, 128, 128). Provide calculators only after students have attempted the reasoning.

5. 48–63 min · Pixel viewer exploration. Demonstrate the pixel viewer challenge by zooming into an image and switching between decimal, hexadecimal and binary colour-code displays. Students use the pixel viewer in pairs to inspect at least three pixels, recording the pixel location, RGB values and displayed colour. They choose one pixel and explain how its numerical values create its visible colour. If devices are limited, pairs rotate through the viewer while others complete the worksheet analysis.

6. 63–71 min · Share and revise. Show the discussion and peer-check slides. Pairs share one surprising discovery, such as a small RGB change producing a noticeable colour change. Students compare explanations with another pair, checking whether they use the terms pixel, RGB, channel, value and binary or hexadecimal accurately. Students revise one answer in a different colour.

7. 71–75 min · Exit check. Display the exit questions. Students complete the final worksheet questions independently: “What does one pixel store?” and “Why does (255, 255, 0) appear yellow?” Collect responses to identify who needs further support with RGB or number representation.

Resources

• Computers or tablets, ideally one device per pair
• Projector or interactive display
• the Pixels Make Colour teaching deck
• the RGB and pixel investigation sheet
• RGB colour mixer
• Pixel viewer
• Headphones if students use uploaded or animated images
• Whiteboard and pens
• Optional teacher-selected image for pixel inspection

Assessment

• Listen for accurate explanations during the RGB mixer investigation, particularly whether students understand that RGB values control light intensity.
• Check worksheet entries for correct RGB patterns: equal values for greys, zero values for absent channels, and appropriate explanations of mixed colours.
• Use the independent exit responses to group students for the next lesson: secure understanding, needs consolidation of RGB, or needs support connecting binary and decimal values.

Differentiation

• Support students with a printed RGB reference table, a labelled three-channel diagram, worked examples and sentence starters such as “The red channel is ___, so…” and “The colour changes because…”.
• Pair students deliberately and provide a shared role structure: navigator, slider operator, recorder and explainer; swap roles during the investigation.
• For EAL learners, reinforce visual examples and clarify “channel”, “value”, “pixel”, “additive” and “intensity” through the images and teacher modelling.
• Extend confident students by asking them to create two almost-identical colours, record their RGB values in decimal and hexadecimal, and explain why a small numerical change may be difficult to notice.