Pixels and Colour

Look at a picture on a screen. It might be a cartoon, a photo or a game. Now here is a secret: that picture is made of thousands or even millions of tiny coloured squares, and every one of them is just three numbers.

What you need

• Paper and coloured pencils or crayons (optional).
• A screen to look at, like a tablet or a TV.
• About 35 minutes.

What is a pixel?

A screen is a big grid of tiny dots called pixels. The name is short for “picture elements”. Each pixel can glow in its own colour. Together they make the picture, like a mosaic made of tiny tiles.

Here is a small picture, zoomed in so you can see the pixels. It is only 8 pixels wide and 8 pixels tall, so it has 64 pixels.

A TV or phone screen has far more pixels. A common TV size is 1920 pixels across and 1080 pixels down. That is 1920 × 1080, which is about two million pixels! The pixels are so small that your eyes blend them into smooth pictures.

Red, green and blue

Every pixel on most screens is made of three tiny lights: one red, one green and one blue. By making each light brighter or dimmer, the pixel can show almost any colour you can think of.

The computer sets each light to a number from 0 (off) to 255 (as bright as it goes). Do you remember 255 from the bulbs lesson? It is the biggest number that fits in one byte. So each colour light uses one byte.

A colour is written as three numbers in this order: red, green, blue.

Colour	Red	Green	Blue
Red	255	0	0
Green	0	255	0
Blue	0	0	255
Black (all lights off)	0	0	0
White (all lights full)	255	255	255

Mixing light

When coloured lights shine together, our eyes see a new colour:

• Red light and green light together look yellow.
• Green light and blue light together look cyan, a bright blue-green.
• Red light and blue light together look magenta, a pinky purple.
• Red, green and blue light together look white.

This is called additive mixing, because the lights add together and get brighter. It is different from paint. Paint does not make light, it soaks up some of the light that hits it. So mixing red and green paint does not give yellow. You usually get a muddy brown.

Grey is made by setting all three lights to the same number. For example, 128, 128, 128 is a medium grey. An orange needs lots of red, a medium amount of green and no blue, like 255, 165, 0.

Mix colours with Python

Let us make a little program that adds two lights together. The most any light can have is 255, so we use min, which picks the smaller of two numbers.

red = (255, 0, 0)
green = (0, 255, 0)
blue = (0, 0, 255)

def mix(light1, light2):
    return (min(light1[0] + light2[0], 255),
            min(light1[1] + light2[1], 255),
            min(light1[2] + light2[2], 255))

print("red + green =", mix(red, green))
print("green + blue =", mix(green, blue))
print("red + blue =", mix(red, blue))
print("all three =", mix(mix(red, green), blue))
print(256 * 256 * 256)

red + green = (255, 255, 0)
green + blue = (0, 255, 255)
red + blue = (255, 0, 255)
all three = (255, 255, 255)
16777216

The first four lines match the colours in our list: yellow, cyan, magenta and white. The last number is how many colours a pixel can show. There are 256 choices for red, 256 for green and 256 for blue, and 256 × 256 × 256 is 16,777,216. That is nearly seventeen million colours!

Because each light uses one byte, one pixel’s colour takes three bytes, which is 24 bits.

Challenges

Show the answer

0, 0, 0 means every light is off, which is black. 255, 255, 0 means red and green are full and blue is off, which is yellow.

Show the answer

The mix is (255, 128, 0), which looks orange. A bit less green in the yellow mix makes it lean towards red, so you get orange.

What you learned

• A screen is a grid of tiny dots called pixels.
• Each pixel mixes red, green and blue light, each set from 0 to 255.
• Mixing coloured light is additive: red + green makes yellow, and all three make white.
• Paint mixes differently from light.
• Each pixel can show 16,777,216 different colours.

---