We're all familiar with decimal numbering where each digit ranges from 0 to 9 and the position indicates a
power of 10. Binary numbers are also pretty familiar, where each digit can range from 0 to 1, and represents a power of 2.
That warm familiarity goes out the window though with hexadecimal numbers, notated with the # sign and often seen in "hex codes" that codify colors. I was curious how this worked, so this piece explains the magic of hex codes and shows what you can do with them by throwing a bunch of paint colors into a 3D space. Hang in there, this will all make sense in a minute...
Hexadecimal digits range from 0-15, where the 0th-9th values use decimal numbers and the 10th-15th values tick through A-F. For example:
Not too bad, right? Now let's look at how to interpret a color's hex code. For these purposes, we'll work with the RGB color model that encodes colors in to red, green, and blue channels with the convention #XXXXXX. Pure red is therefore #FF0000, or rgb(255, 0, 0) meaning maximum red and minimum green & blue. Green is #00FF00 or rgb(0, 255, 0) and blue would be #0000FF or rgb(0, 0, 255).
For more interesting color, let's take a look at #00A651, which happens to be the lovely dark green Revlon nail polish shade called Posh. You can see Posh in all her glory to the right as long as you have the Revlon palette selected above.
R --> #00: 0*(16^1) + 0*(16^0) = 0
G --> #A6: 10*(16^1) + 6*(16^0) = 166
B --> #51: 5*(16^1) + 1*(16^0) = 81
This translates to rgb(0, 166, 81). There's no red, a lot of green, and a bit of blue, which makes perfect sense for Posh.
For more ways to visualize these colors using different color models, take a look at this page. Or, to play around with a name generator I made that makes use of both hex code parsing and color models, take a peek at the the Nail Polish Name Generator.