RGB and hex codes

With 256 steps for each of red, green and blue, a screen can address 256 × 256 × 256 = 16,777,216 colours, and every one of them is a point inside a cube.

Three numbers, three axes

In the sRGB colour space used by the web, a colour is written as three channel values: red, green and blue. In everyday code each channel is a whole number from 0 to 255, which is the range that fits in eight bits. A channel at 0 means that light is off. A channel at 255 means it is fully on. So rgb(255 0 0) is the strongest red the screen can show, rgb(0 0 0) is black and rgb(255 255 255) is white.

Three numbers that each run over a range make a box. Put red along one edge, green up another and blue along the third, and every colour has a place inside a cube. The model above draws that cube with 512 small blocks, eight steps along each edge. Black sits in one corner. White sits in the opposite corner. The three corners next to black are pure red, pure green and pure blue. The three corners next to white are cyan, magenta and yellow, each made of two full channels. Turn on the labels and follow the edges from black to white: every path passes through one primary and one secondary colour.

The dashed line from black to white is the grey axis. Every point on it has equal red, green and blue, such as rgb(128 128 128). Colours far from that line are vivid. Colours close to it are greyish. This is the first hint of the idea behind the HSL model in the next unit: distance from the grey axis is a measure of how colourful something is.

Reading a hex code

CSS also lets you write the same three numbers in hexadecimal, after a # sign. Hexadecimal counts in sixteens using the digits 0 to 9 and the letters a to f, where a is 10 and f is 15. Two hex digits cover 16 × 16 = 256 values, exactly one channel. So a six-digit code is three pairs: red, green, blue. CSS Color 4 notes that the case of the letters does not matter, so #00ff00 and #00FF00 are the same colour.

To read a pair, multiply the first digit by 16 and add the second. For c3 that is 12 × 16 + 3 = 195. For ff it is 15 × 16 + 15 = 255, the maximum. For 80 it is 8 × 16 = 128, almost exactly halfway. A three-digit code such as #f80 is shorthand: each digit is doubled, so #f80 means #ff8800. Type a code into the Hex box under the model and the marker jumps to that point in the cube.