Robot counting for humans

When you delve behind the scenes with the internet, you immediately come face-to-face with a lot of threatening computer gibberish. The most menacing codes are the ones that stand for colors, random-seeming strings of letters and numbers like #99CC66 or #4F102A. Sometimes you see colors described verbally: “black”, “white”, “blue”, etc. That’s fine for simple colors, but no good if you want exact hues. The web system for describing colors is daunting at first, but once you find out what the codes mean, they reveal themselves to be elegantly compact. If you’re willing to follow me through a little math and physics, you might find some geeky fun here.

All the colors on a computer or TV screen are combinations of three colors: red, green and blue.

The pixels on the screen each have a red, green and blue subpixel. By illuminating each subpixel a certain amount, the screen can produce thousands or millions of distinct colors. To make bright yellow, you mix the maximum amount of red and green. To make white, you use the maximum brightness of red, green and blue. For medium grey, you also mix the three colors equally, but at a lower brightness.

The computer stores colors as groups of three numbers representing the brightness levels of red, green and blue. You could do it as percentages. Red is 100%, 0%, 0%. Bright yellow is 100%, 100%, 0%. Medium grey is 50%, 50%, 50%, and black is 0%, 0%, 0%. The green background on this page is 60%, 80%, 40% and the reddish-brown links are 31%, 6%, 16%.

The web convention is to use zero as the minimum brightness for each pixel and 255 as the maximum, giving 256 possible values. 256 might seem kind of random, but it’s a nice round number in binary, two to the eighth power, so it’s convenient from an engineering perspective. Using the web color system, my background green is 153, 204, 102 and my link reddish-brown is 79, 16, 42. If the web was coming into being today, the convention would probably be to encode these colors as #153,204,102 and #079,016,042 respectively. But in the early days of the internet, data transfer was agonizingly slow. Any reduction in the number of characters being passed to and fro made a noticeable difference. So instead of encoding colors as three-digit numbers, the web pioneers opted for two-digit hexadecimal numbers instead. Computer people like hexadecimal because it converts easily to binary, but for civilians it’s daunting. Let me break it down for you.

We habitually count in units of ten because we have ten fingers. What if we had sixteen fingers? We’d probably count in units of sixteen. Think about counting up to ten. Each finger stands for a one-digit number (the word “digit” itself comes from Greek for “finger.”) You’re effectively naming your index finger “one”, your middle finger “two”, your ring finger “three” and so on. If you had sixteen fingers, you’d get up to nine and then need a few more symbols. The convention is to use A for ten, B for eleven, C for twelve, D for thirteen, E for fourteen and F for fifteen. Counting in hexadecimal (base sixteen) looks like this:

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F;

10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 1A, 1B, 1C, 1D, 1E, 1F;

20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 2A, 2B, 2C, 2D, 2E, 2F…

For me, the hardest part is the idea that in hex, ’10’ isn’t ten, it’s sixteen. ’17’ in hex isn’t seventeen, it’s twenty-three (sixteen plus seven.) ‘2D’ is forty-five (two times sixteen, plus thirteen.) An analogy that helps me conceptually is money. Imagine if each digit was a denomination. In decimal dollars, there’s a $1 bill, a $10 bill, a $100 bill etc. (For the time being I’m ignoring fives and twenties.) In hexadecimal dollars, the bills go $1, $16, $256, $4096 and on up. The two-digit hex numbers that specify red, green and blue values on the web are like the amounts of money you can specify using just $16 bills and singles. To further aid your comprehension, the web is full of handy decimal-to-binary-to-hex conversion tools, like for instance this one.

The green background on this blog: 99CC66

red: 9 9 = (9 x 16) + (9 x 1) = 153
green: C C = (12 x 16) + (12 x 1) = 204
blue: 6 6 = (6 x 16) + (6 x 1) = 102

The reddish-brown I use for links: 4F102A

red: 4 F = (4 x 16) + (15 x 1) = 79
green: 1 0 = (1 x 16) + (0 x 1) = 16
blue: 2 A = (2 x 16) + (10 x 1) = 42

Now that we routinely toss millions of characters back and forth across our computer networks in the blink of an eye, the hexadecimal system is an anachronistic holdover, like the QWERTY keyboard. Like the QWERTY keyboard, we’re going to be stuck with hex for a while, so my feeling is, might as well try to enjoy it.