All simulators
Pixels & colour
Zoom into an image until it becomes numbers. Mix RGB, brighten and threshold it.
Zoom into an image until it becomes numbers. Mix RGB, brighten and threshold it.
Kite picture · 24×24 pixels
Tap a pixel
The same picture as three grids, one per colour of light. Tap a grid to switch that colour off or on.
Row 7, column 7 #D2283C
Use the arrow keys or tap to pick another pixel.
| decimal | binary | hex | |
|---|---|---|---|
| R | 210 | 11010010 | D2 |
| G | 40 | 00101000 | 28 |
| B | 60 | 00111100 | 3C |
A digital picture is a grid of tiny squares called pixels, and every pixel is just numbers. A colour pixel stores three: how much red, green and blue light to mix, each from 0 (none) to 255 (full). 255 is the biggest number that fits in 8 bits (1 byte), so one colour pixel takes 3 bytes; a grey pixel needs 1 byte and a black-or-white pixel just 1 bit.
Every edit is arithmetic. Brightness adds the same amount to every number; contrast multiplies each number’s distance from 128; invert replaces v with 255 − v; threshold turns each grey into black (0) or white (255). Answers above 255 or below 0 are clipped, and the detail they held is lost. Lowering the resolution replaces each block of pixels with their average.
Takeaway: to a computer, and to an AI model, an image is a grid of numbers. Size in bytes = width × height × bytes per pixel.
No clipping: every number still fits between 0 and 255.
24 × 24 = 576 pixels × 3 bytes = 1,728 bytes
Bar: compared with the full-colour 24×24 picture (1,728 bytes). Switching a colour off doesn’t save space: its zeros are still stored.
| decimal | binary | hex | |
|---|---|---|---|
| R | 64 | 01000000 | 40 |
| G | 128 | 10000000 | 80 |
| B | 255 | 11111111 | FF |
Grey value (R + G + B) ÷ 3 = 149. Light adds up: red + green makes yellow, all three at 255 make white, all at 0 make black.
A digital picture is a grid of tiny squares called pixels, and every pixel is just numbers. A colour pixel stores three: how much red, green and blue light to mix, each from 0 (none) to 255 (full). 255 is the biggest number that fits in 8 bits (1 byte), so one colour pixel takes 3 bytes; a grey pixel needs 1 byte and a black-or-white pixel just 1 bit.
Every edit is arithmetic. Brightness adds the same amount to every number; contrast multiplies each number’s distance from 128; invert replaces v with 255 − v; threshold turns each grey into black (0) or white (255). Answers above 255 or below 0 are clipped, and the detail they held is lost. Lowering the resolution replaces each block of pixels with their average.
Takeaway: to a computer, and to an AI model, an image is a grid of numbers. Size in bytes = width × height × bytes per pixel.
Things to try