Math Detours · Grade 8 · Connections · 5

Sixteen million colours

Why #FF8800 is orange: hexadecimal, three bytes, and 256³ colours on a standard screen.

Name ____________________Date ____________

Tonight's idea

Every dot on a screen is three tiny lights: red, green and blue. Each light has 256 brightness levels, from 0 (off) to 255 (full). A colour is three numbers. Pure red is \((255, 0, 0)\); white is \((255, 255, 255)\); equal amounts of all three make grey.

Why 256? A computer stores each level in one byte, which is 8 binary digits, and 8 bits can be arranged in \(2^8 = 256\) ways (see binary, grade 6). Three bytes give \(256 \times 256 \times 256 = 256^3 = 16{,}777{,}216\) colours. That is the "16 million colours" on the box.

Writing bytes in decimal is clumsy, so programmers use hexadecimal, base 16. The digits are 0 to 9 and then A, B, C, D, E, F for 10 to 15. Two hex digits run from 00 to FF, that is \(15 \times 16 + 15 = 255\): exactly one byte. So a colour is six hex digits, two per channel, written after a hash.

#FF8800 RGB FF = 255 88 = 136 00 = 0
#FF8800: red full on, green just over half, blue off. Red plus some green is orange.

A hex pair \(\mathrm{XY}\) is worth \(16X + Y\). To go back, divide by 16: the quotient is the first digit, the remainder the second.

Watch one: #1E90FF, and back again

Split into pairs: 1E, 90, FF. Then \(\mathrm{1E} = 1 \times 16 + 14 = 30\), \(\mathrm{90} = 9 \times 16 + 0 = 144\), \(\mathrm{FF} = 255\). The colour is \((30, 144, 255)\): little red, some green, full blue. A bright sky blue.

Now the reverse, for \((200, 120, 40)\). \(200 = 12 \times 16 + 8\), and 12 is C, so C8. \(120 = 7 \times 16 + 8\): 78. \(40 = 2 \times 16 + 8\): 28. The code is #C87828, a warm brown. Red high, green medium, blue low is the recipe for browns and oranges.

Your turn

  1. Convert each code to three decimal numbers, and name the colour roughly: #00FF00, #808080, #FFD700.
  2. Write as hex codes: white \((255, 255, 255)\), black \((0, 0, 0)\), and indigo \((75, 0, 130)\).
  3. Start from #FF8800. (a) Halve each channel, rounding down, to make a darker orange. Give the new code. (b) Replace each channel \(x\) by \(255 - x\) to make the "negative" of the colour. Give the code and describe the colour.
  4. Older phones used 16-bit colour: 5 bits for red, 6 for green, 5 for blue. (a) How many levels does each channel have? (b) How many colours in total, and why is the answer the same as \(256^2\)? (c) Suggest why green got the extra bit.

Stretch: the web-safe palette

Early browsers used 216 "web-safe" colours. Each channel had to be one of 00, 33, 66, 99, CC, FF. Convert the six to decimal and show they are equally spaced. Explain where 216 comes from. How many of the 216 are greys?

Answers

  1. #00FF00 \(= (0, 255, 0)\), pure green. #808080 \(= (128, 128, 128)\), mid grey. #FFD700 \(= (255, 215, 0)\), gold: red full, green high, no blue.
  2. #FFFFFF, #000000, #4B0082 (since \(75 = 4 \times 16 + 11\) and \(130 = 8 \times 16 + 2\)).
  3. (a) \(127 = 7 \times 16 + 15\), so 7F; \(68 = 4 \times 16 + 4\), so 44; 0 stays 00. The code is #7F4400. (b) \(255 - 255 = 0\), \(255 - 136 = 119 = 7 \times 16 + 7\), \(255 - 0 = 255\): #0077FF, a strong sky blue. Orange and blue are opposites on a colour wheel, and this is why.
  4. (a) \(2^5 = 32\) levels of red and blue, \(2^6 = 64\) of green. (b) \(32 \times 64 \times 32 = 65{,}536 = 2^{16}\), the same as \(256^2 = 2^{16}\) because 16 bits are 16 bits however you split them. (c) Human eyes are most sensitive to green, so extra green steps are the ones you would notice.

Stretch. \(\mathrm{33} = 3 \times 16 + 3 = 51\), and the six values are 0, 51, 102, 153, 204, 255, each 51 apart: \(255 = 5 \times 51\). Six choices for each of three channels gives \(6^3 = 216\). A grey needs all three channels equal, so there are 6 greys.

← PreviousNext: Why speed squared matters →