Hexadecimal & colours

Maybe you have seen a code like #FF8800 in a drawing app or on a website. It looks cryptic, but it is simply a number in a different number system: hexadecimal. Once you can read it, you see at a glance how much red, green and blue is in a colour.

16 digits instead of 10

The decimal system has 10 digits (0 to 9), the binary system only 2. The hexadecimal system has 16 digits: 0 to 9 followed by the letters A to F. A stands for 10, B for 11, C for 12, D for 13, E for 14 and F for 15. You read a two digit hex number like this: the left digit counts sixteens, the right one counts ones. So 2A means 2 times 16 plus 10, which is 42. And FF means 15 times 16 plus 15, which is 255, the biggest number that fits into one byte.

Three bytes make a colour

One byte is 8 bits, and those fit exactly into two hex digits: from 00 (0) to FF (255). A colour code like #FF8800 consists of three such bytes. The first two digits stand for red, the middle two for green, the last two for blue. So #FF8800 means: red turned all the way up (255), green at 136, blue off (0). Together that makes a strong orange. The hash at the front is just a signal: watch out, a colour code follows. Whether you write the letters in upper or lower case makes no difference, #ff8800 is exactly the same colour as #FF8800.

Converting hex to decimal

Converting always works the same way: left digit times 16, then add the right digit. A few examples: the hex number 10 is 1 times 16 plus 0, so 16. 3C is 3 times 16 plus 12, so 60. 80 is 8 times 16 plus 0, so 128, roughly the middle between 0 and 255. With a bit of practice you read colour codes like #808080 (medium grey) as fluently as ordinary numbers.