RGB and hex codes

Three numbers

Each pixel on a screen has a red, a green and a blue light source, and each can be set to one of 256 levels. Zero is off and 255 is full. So rgb(255, 0, 0) is pure red, rgb(0, 0, 0) is black, rgb(255, 255, 255) is white, and equal values in between give greys. Three channels of 256 levels allow 256 times 256 times 256 combinations, a little under 16.8 million colours. Most screens show colours in a standard version of RGB called sRGB, agreed in the 1990s.

Reading a hex code

Hexadecimal is a way of counting in sixteens instead of tens. It uses the digits 0 to 9 and then the letters A to F for ten to fifteen. Two hex digits cover 0 to 255, so FF is 255, 80 is 128 and 00 is zero. A hex colour is three such pairs after a hash sign: red, green, blue. #000000 is black and #FFFFFF is white. A three-character short form doubles each digit, so #F60 means #FF6600. An optional fourth pair sets transparency.

Limits

RGB numbers are instructions to a device, not measurements of a colour. The same code looks different on a cheap laptop, a good phone and a projector unless each is calibrated. The numbers are also hard to reason about. It is not obvious that #808000 is olive, or how to make it a little lighter. That is why designers often work in hue, saturation and lightness and convert at the end. RGB also cannot describe colours that a screen cannot produce, such as a fluorescent orange or the deepest cyan.

How to do it

1. Split the six characters into three pairs: red, green, blue.
2. Read each pair as a level from 00 (none) to FF (full).
3. The largest pair tells you the dominant colour. Three similar pairs mean a grey.
4. High values in all three mean a pale colour. Low values in all three mean a dark one.

Sources and further reading

• RGB color model on Wikipedia
• MDN Web Docs: rgb()
• MDN Web Docs: hex-color
• W3C: A Standard Default Color Space for the Internet, sRGB