Colour and hexadecimal.

Step 1 of 6

Three numbers a pixel

Each pixel on a screen is three tiny lights, red, green and blue, so close together that the eye sees one colour. The computer stores each light’s strength, a level between off and full. A pixel’s colour is a combination of three levels, so with $L$⁠ levels per channel there are

$L \times L \times L = L^3$$L \times L \times L =$$L^3$⁠

colours. The board shows the number of colours, but not the number of levels. Work it out.

Step 2 of 6

Bits per pixel

Look inside is open: each pixel in the magnifier has split into three lights, and each light has risen into a column as tall as its level. A whole pixel takes the bits of all three channels together. In true colour that is $3 \times 8 = 24$⁠ bits, three bytes, which is why it is also called “24-bit colour”.

Step 3 of 6

Base 16

A byte written in base 2 is eight digits, long and easy to get wrong. So programmers write bytes in base 16, hexadecimal. It has sixteen digits: $0$⁠ to $9$⁠, then A, B, C, D, E and F for $10$⁠ to $15$⁠. The place values are $1$⁠, $16$⁠, $256$⁠ and so on.

The trick is that $16 = 2^4$⁠: each hexadecimal digit is exactly four bits, so a byte is exactly two digits. $1111\,1111_2$⁠ becomes $\mathrm{FF}_{16}$⁠, and $0100\,1101_2$⁠ becomes $\mathrm{4D}_{16}$⁠, four bits per digit.

Step 4 of 6

Colour codes

Web pages and drawing programs write a colour as three bytes in base 16, after a # sign, always in the order red, green, blue: #RRGGBB, where RR are the two digits of red, GG of green and BB of blue.

#FFFFFF is white, #000000 is black, and #FF0000 full red.

Step 5 of 6

Reading a code

To read a pair of digits, multiply the left one by $16$⁠ and add the right one. Try it on the colour code of sea green, #3CB371.

Step 6 of 6

Light that adds up

The columns in the magnifier are light, not paint. When the screen lights several of them together the eye receives them all, and the light adds up: the more you light, the brighter the colour. Three full lights look white. What do you see when only two of them are on?