Happy Thursday! I stumbled upon this great website, What the Hex where you are given a choice of colors and a hex number and you have to pick which color the hex number represents. I realized that I could actually do this! It takes time and a little math, but when you understand how hex numbers work, you can too.

Every web designer recognizes hex numbers. For those who don’t know, they are a string of six letters and/or numbers that represent one of 16,777,216 colors that can be used on the web. But what do those numbers and letters represent?

First, to understand hex numbers you have to understand RGB numbers. RGB stands for Red, Green and Blue. These are the primary colors of light (you know, the stuff your monitor uses). You can combine these three colors to make just about any color you can think of. These colors are measured on a scale from 0 to 255; 0 is no color and 255 is total saturation. Red and Green make Yellow, Red and Blue make Magenta, Blue and Green make Cyan. No color at all is black. If you combine all three colors at total saturation you get white.

You can get a good idea of the color of an RGB number if you know how they work. For instance, 255, 0, 0 is bright red. Red is as high as it can go, but green and blue are non-existent. 128, 0, 0 is also red, but darker. 255, 255, 0 is a bright yellow (the weirdest part of RGB is getting used to red and green making yellow). 82, 182, 224 is a baby blue. There is a lot of blue and good deal of green which make a cyan leaning towards blue. The added red subdues the color a bit. When all three values are equal, the outcome is a neutral color. 72, 72, 72 is a dark grey while 215, 215, 215 is a light grey.

I look at RGB numbers by highest to lowest number. So if I have 143, 45, 120 I think, red is most prominent at 143, then blue is a close second at 120. The green is low, so I can tell that the color is dominated by red and blue which make magenta. There is more red than blue, so the color will lean that way. This color is a slightly reddish purple. The 45 in the green means that it is a somewhat less saturated purple. The closer the green gets to the other two numbers, the closer it gets to being neutral.

So what does this have to do with hex colors? “Hex” is short for “hexadecimal”, a fancy way of saying base sixteen. We usually do things in base 10. We go from 0 to 9 then we add a digit and reset the counter to make 10. Base 16 is the same way, but instead of resetting after 9, another digit is added after you count past “f”. In hex numbers, “a” is 10, “b” is 11, etc. all the way to “f” which is 15. So if we break down a hex number like “2d”, we know that d=13 plus “20” which instead of being 10×2 is 16×2 which equals 32. 32+13=45. Therefore, “2d”=45. “ff” is 15+16×15=255 (look familiar?). That’s right! A hex number is an RGB number in disguise. The first two “numbers” are red, the second two are green and the last two are blue. Convert the hex numbers to base 10 numbers and you have the RGB value. If you can tell a color from reading the RGB number, you can do the same thing with hex numbers.