Making Sense of Hexadecimal Color

Web Development

There are quite a few ways to describe color to a computer.  Each of them is based on a particular mathematical model, usually called a color space.  Off the top of my head, I can think of RGB, HSV, CMYK, and L*a*b*, but there are plenty more, depending on the desired output (monitor, television, paper, etc.).

Until I understood hexadecimal notation, I thought “hex values” in HTML and CSS were simply another color space — one I found hard to read — but it turns out that hex is actually just RGB.  Seems preposterous, I know … until you see the connection.  So, how does something like #193A0B (a very dark green) relate to its decimal equivalent rgb(25, 58, 11)?  Let’s take a look. 

First, notice that the hexadecimal version has six characters in it, not counting the octothorpe (#), which is only there to indicate, “Hey, the following number is written in hexadecimal notation.”  These characters represent three pairs of values:  the red, green, and blue components of the color described.  So far, then, we have the following correlation:

  • red:  19 = 25
  • green:  3A = 58
  • blue:  0B = 11

That’s still pretty cryptic, so let’s see what else we can uncover.

Of course, it helps to know, in the first place, what hexadecimal notation is.  You’ve probably heard of binary, which is counting by ones (the only numbers involved are zero and one).  You’ve certainly heard of decimal, which is counting by tens (the numbers involved are zero through nine).  The word “hexadecimal” comes respectively from Greek and Latin words related to the numbers six (hexa) and ten (decima), which is to say sixteen.  So hexadecimal is counting by sixteens (the numbers involved are zero through fifteen — see explanation below).

Counting by sixteens seems pretty weird, for sure, but I think that’s only because we’re so used to counting by tens.  Imagine your car’s odometer.  The far right side rotates the most often:  when it hits 7, 8, 9 … it goes back around to 0, and the tens column increments.  That’s because the ones column cannot contain any number higher than nine.  When the tens column hits 9 and the ones column hits 9 — which represents the number ninety-nine — both columns go back to zero.  Makes perfect sense, of course.  Well, in hexadecimal notation, the ones column goes all the way up to fifteen.  In order to make all the digits fit, any number higher than nine is represented by a letter.

If you look back to our example, where 0B (hex) is equivalent to 11 (decimal), you can see this in action.  There are two columns:  the ones column on the right (B) and the sixteens column to its left (0).  In hexadecimal, nine is represented by 9, ten is A, 11 is B, and so on.  Since we haven’t yet gone past fifteen (F), the sixteens column remains at 0.

In hexadecimal, the number sixteen is represented by a 1 in the sixteens column and a 0 in the ones column.  Think about it that way for a moment … it should make sense.  The number thirty-two would be a 2 in the sixteens column and a 0 in the ones column.  True, you’d be looking at the numeral 20, which sure looks like the number twenty, but in hexadecimal, it isn’t!  Thirty-three would be 21 — two sixteens and a one.  Forty-two would be 2A — two sixteens and an A (a ten in the ones column).

Let that gel for just a moment.

White is represented in RGB by rgb(255, 255, 255), which indicates that each primary color appears at “full volume.”  How would this look in hexadecimal?  To deduce that, you’d need to figure out what number to put in each column.  If you’ve dealt with HTML or CSS at all, you probably already know that #FFFFFF is white.  Each FF pair indicates a 15 in the sixteens column and a 15 in the ones column.  Does that add up?  15 times 16 is 240.  240 plus 15 is 255.  Bingo.

I’m not suggesting that, by knowing this, you’ll have the skill to read hex values as easily as you do decimal values.  I certainly don’t!  But I hope you’ll at least an inkling of how to “break down” a hexadecimal color if you don’t happen to have Photoshop handy.

In the case of #193A0B, for example, separate out your three primaries:  19, 3A, and 0B.  Then work your way through.

  • 19 means one sixteen and nine ones; in other words, 16 plus 9 (equals 25).  In terms of color, that’s 25 out of 255 for red.  Very little red.
  • 3A means three sixteens and then ones; in other words 48 plus 10 (equals 58).  Still pretty low, but you know there’s more green than red.
  • 0B means zero sixteens and eleven ones; in other words 0 plus 11 (equals 11).  Barely any blue at all.

So even if you can’t picture the color in your mind, you know it’s pretty dark, since rgb(0, 0, 0) is black.  And it’s got to be greenish more than it is anything else.

For additional information on how computers count, check out this Community MX article by Tom Muck (free content):

http://www.communitymx.com/content/article.cfm?cid=D8C26

Leave a Reply