TwiddleLab / Code / How Computers Store Everything

Pixels and Colors

Lesson 4 of 11 · 7 min · Free, no account needed

What you will learn

• A picture is a grid of pixels, each one a single colour.
• A pixel is three numbers, R, G, B, from 0 to 255: one byte each.
• Equal R, G and B make gray. 256 x 256 x 256 = 16 777 216 colours.
• Size without compression = width x height x 3 bytes.

Start the lesson

How the lesson goes

1. Zoom into any photo far enough. What is it made of?

   Drag the zoom all the way in.

2. A screen pixel is three tiny lamps: red, green and blue.

   Switch them on and off. How many colours can you make?

3. Each lamp has a brightness from 0 to 255. Mix orange.

   Drag the three bars.

4. Pixels and RGB.

   A pixel (picture element) is one square of a picture. Resolution is how many there are: 1920 x 1080 is about 2 million.

   RGB: each pixel is three numbers, red, green, blue, from 0 to 255. One byte each, so 3 bytes per pixel.

   256 x 256 x 256 = 16 777 216 colours. 0, 0, 0 is black, 255, 255, 255 is white, equal numbers are grays.

5. Paint your own 8 x 8 sprite.

   Pick a colour, then tap or drag over the squares. You'll use it twice more.

6. Colour match: copy each colour with three sliders.

   Four targets. Lock in when you think you have it.

7. Which of these are true grays?

   Drag each swatch into a jar. Read the numbers.

8. A negative filter turns every number v into 255 - v. This one has bugs.

   Find the pixels of your sprite that were never flipped.

9. A photo is 1000 x 1000 pixels. How many bytes does it take without compression?

10. How big is your sprite as a file?

    Drag the marker on the size scale.

Previous lesson: Letters Are Numbers · Next lesson: Sound Is a List of Numbers · Part of the course: How Computers Store Everything

Lessons are interactive and need JavaScript. Turn it on to play them.