One of the weirdest things I remember when I first started hacking away at the code being generated by Netscape Communicator and Front Page Express¹ was the seemingly random 6 digit codes I'd see associated with font tags and such:

<FONT COLOR="#FF970A">Dear God, why?!</FONT><BR><BR><BR>

After some noodling with visual editing and seeing what it did with the code, I could see that the digits were changing, and that they were numbers and letters that never went past F, which pissed me off, because I wanted to see what #GBGBGB would look like². Fast forward a few weeks, and I was teaching myself HTML from some online tutorials (with a proper editor, I think) and I found out what the sparklejesus those codes were.

Sort of.

Everything I read early on just called them Hex codes, or hexes, and they said you could get them from some color picking tools, but don't worry too much… just copy and paste, or stick with web-safe color names (you know, <A HREF="HTTP://WWW.LYCOS.COM" COLOR="BLUE">Click me!</A>).

Here's the thing:

Hex codes are like some magic voodoo as a designer.

You know one end of the spectrum is #000000 and the other is #FFFFFF. But why? This all seems arbitrary. I eventually learned they were technically called hexadecimal numbers, and figured out how to fudge them around to tweak color without a graphics program handy. But beyond that, it was kind of gibberish.

Speaking of gibberish and tech, I'd always wanted to fully understand binary notation, mostly for geek cred. My wife did an awesome cross-stitch for me that says "I love you" in binary code. Or so she tells me³. I got the concept of only using two digits (0 or 1) and moving to over a place when you ran out (0 is 0, 1 is 1, 10 is 2, 11 is 3, 100 is 4, and so on). I'd also read Charles Seife's excellent book Zero, wherein he explains how many cultures derived their counting systems, most using a base-10 or decimal system (because we have 10 fingers), while others used groups of 20 ("all my hands and all my feet" is a number for 20 in some cultures), and others in Mezoamerica used an actual binary setup ("I have one, I have two, or I have many… I have two and two and one beaded necklaces."). Even wilder, Sumerians⁴ had a base-60 numbering system.

This is all well and good, but if base-whatever just sounds like an EDM artist, we're not getting anywhere. As I mentioned, binary is base-2, so you have literally 2 characters to choose from: 0 and 1. In our base-10 system, we have 10: 0,1,2,3,4,5,6,7,8, and 9. Count up to ten and after 9 you run out of characters to use, so what do you do? Increment the next column of characters, making 10 (helps if you think of the preceding number as 09).

We're just running through a set of available characters until we run out, then we bump the next column, like an odometer. If we were base-5, instead of 10, we'd count 0,1,2,3,4,10,11,12,13,14,20… which would of course just be 0,1,2,3,4,5,6,7,8,9,10. It's all about the available set of characters we can use. If zero didn't exist, we'd start with 1, etc.

You'll notice I didn't say a set of numbers we can use, I said characters. This is a distinction that is important when we get to hexadecimal. Hexadecimal literally means 16, so we're talking about base-16 notation here. If I wanted to start counting in base-16, I wouldn't have enough numerals. 0-9 only get you 10 of the 16 characters you need. So let's add letters to the mix. The first six letters are A-F, and… yes, this should start looking familiar.

0-9 are what you'd expect, but 10 is now A, 11 is B, and so on until 15 (remember we start counting with zero, so 0-15 is 16 numbers) is F. Then 16 is 10, etc until you hit 1F, which is 31 (or the 32nd digit in base-10). You can do this, obviously forever, but let's stop with the last two character number, FF, which is 255.

Okay, you're thinking, that makes some sense. But… isn't this hex code I'm using in my CSS one GIANT number? How on earth is that a color?

No, it's actually three numbers, sitting next to each other. So, instead of #000000 just being a really long representation of 0, it's actually three sets of zero:

00, 00, 00

And each of those hexadecimal numbers can span 256 intervals, from 0-255. What else in color theory works with three values that range from 0 to 255?

Yep. RGB.

Let's take garish, stock standard computer red: #FF0000.

Break that down:

FF, 00, 00

We know this is Red, and that it is the most red biased value. What does FF mean in hexadecimal notation? Right. 255. And of course 00 is 0. So…

255, 0, 0

This should look familiar. Let's think in CSS rgb notation: rgb(255,0,0). Yep, the same red. So hex is just

R:FF, G:00, B:00

Play around with that, and suddenly hex codes make a lot more sense, and you probably won't have to write rgb notation when hacking your CSS any more.

1. Other than "WTF is this shit?"
2. It would be a form of white somehow beyond our RGB color spectrum, but I'm getting ahead of myself.
3. It may very well say "Greg sucks at Mario Bros"
4. Wikipedia focuses on it being a Babylonian numeral system, but the origins are in Sumer