Got the 0000FFs

Given up on attaching meaning to those three- or six-character codes that define colors in HTML and CSS? Sure, you can use an online color picker, but let me give you a nuts-and-bolts explanation of what they mean. This info is worth having because:

1. It's a time-saver. If you want to make a color a little more blue, or a little less saturated, you can do the math in your head and take care of it right there in your editor.
2. It gives you more options. If you find a cracking color combo in the Color Index, but it's given only in RGB values, you can convert it to HTML-ready values using just math.
3. It's satisfying. Don't you prefer knowing how something works, instead of just how to work with it?
4. It will be diverting. There will be stories, you know me.

Two experiences in my childhood laid the foundation for my understanding of hex color codes, so I will share them with you. (See? Stories.)

When I was very young, I learned that the three primary colors are red, yellow, and blue, and when you mixed them together you got, well, mud, but theoretically black. That's true for pigments (paint and ink; think magazines and newspapers), and if you're going to be pedantic, those pigment primary colors are properly called magenta, yellow, and cyan. (Add blacK and you have CMYK, the other color scheme you'll see mentioned in design books.) But it's a whole 'nother ball game when you are mixing light instead of pigment, and computer monitors are big light bulbs.

My seventh-grade science teacher, Mr. Saeger, created an excellent demonstration that I still think of when I'm mixing up hex color codes. He set up the overhead projector. He placed a square of red cellophane on the projector, and it threw a red square of color up on the wall. Sure. Then he added a piece of green cellophane, and the area where they overlapped was... yellow? That's curious. Last he added a piece of blue, and the intersection of all three was white. It blew my mind.

If you can replicate this effect (shine a light through overlapping colored plastics), it's a great science experiment to share with your kids. It will help you remember the mixing of light colors with the same intuition you have for mixing pigments. And it's cool.

The second formative experience from my youth was working the stage lights in my high school theater. Hanging above the stage were three rows of lights; the lights alternated amongst white, yellow, red, and blue, and were controlled by a huge wall of levers backstage. Big, creaky, ancient things, that really let you know you were working the lights. I had to crouch and get my shoulder under them to move the big ones.

Picture them: Four rows of colored levers, corresponding to each color of light out over the stage. Each lever controlled a light. Down was off, and as you pushed the lever up, the light would gradually brighten. A big handle at the end of a row would move all the levers of that color, so you could, for example, bring up all the whites in unison. You could slowly turn down the yellows over the course of a scene while a teammate pushed up the reds, and make a sunset. You could push all the colors up to make the light full and cheery (and make the stage hotter than a tanning booth), or pull them all down to plunge the stage into darkness at the dramatic conclusion of Act I.

Levers... lights... hex codes, here we go.

Light is mixed from red, green, and blue. (Remember the order: RGB, RGB, RGB.) Computers like to count not from 1 to 100, but from 0 to 255. Think of 0 as off, with the lever all the way down, and 255 as on, with the lever all the way up. To make yellow, you need a lot of red and a lot of green, and no blue, so R = 255, G = 255, and B = 0. To make a paler yellow, you want to bring it closer to white. White is all three on at maximum; therefore you need to turn up the blue. Maybe R = 255, G = 255, and B = 153. To make it more orangey, you'd back off the green. And so forth.

So we have three levers. A hex color code has three pairs of characters. That yellow would be #FFFF00. Put another way: FF, FF, 00. It's the same three RGB values, but in base 16 instead of base 10. 255 in base 10 becomes FF in base 16. Counting in base 16 is like counting in base 10, if you had 6 extra fingers. 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10.

The Math Bits site gives a visual explanation of how to convert from base 10 to other bases. Also, you can use the calculator on your computer. In Windows, set the calculator to Scientific mode in the View menu, make sure the "Dec" radio button is marked, type in your base-10 number, then switch to the "Hex" radio button and read the converted value. But usually when I'm writing HTML, I just need to nudge a color a little, not do a whole decimal-to-hexadecimal conversion. So it is sufficient to know that all zeroes is all black, all Fs is all white, CC is more "on" than 99, and EE is just a teeny bit less than full on.

CSS also permits three-character color codes. The same color-mixing is happening there, it's just a shortcut that doubles each character for you. So #ca9 is equivalent to #CCAA99.

Putting this into practice...

#FFFFFF	Turning all three levers full on makes white.
#CCCCCC	Backing them off a little, but keeping them all equal, makes gray.
#000000	Turning them all off: Black.
#FF0000	Red on and the rest off makes red.
#990000	Turning down the red, so that it moves closer to black, makes a darker red.
#FF6666	Turning up the others, so that the whole mix moves closer to white but has more red than anything else, makes pink ("Lightish red!").
#FFFF00	Red plus green (when mixing light) make yellow.
#FF9900	Keep the red, but reduce the green, to make orange.
#00FFFF	Green and blue make teal.
#FF00FF	Red and blue make purple.

So there you have it: An explanation of hex color codes by way of my seventh-grade science class and my high school drama—er, drama department. Right.