Encoding a Color with Hexadecimal Digits

Part of our series “Everything You Ever Wanted To Know About Hex Colors”

#92B558 probably isn’t trending. That’s because it looks like nonsense. But hidden in that seeming-hashtag is the 2017 color of the year, according to the Pantone Color Institute’s analysis of New York Fashion Week.

It’s called “Greenery”, but how does a 6-digit alphanumeric symbol like #92B558 translate to a color?

To answer this question, we need to understand a few different number systems.

Decimal v. Hexadecimal

Here’s the number line you’re familiar with:

Decimal number line

This is the decimal number system, so called because there are 10 different options for each digit. Since ‘decimus’ is Latin for 10th, this makes sense. If you try to move past the nine objects, you’ll need TWO digits to represent that same value — a one and a zero to make the number 10.

Here’s the number line web browsers use to encode or decode colors:

Hexadecimal number line (bottom) next to the decimal number line (top)

This is the hexadecimal number system has 16 unique options for each digit, and again, since ‘hexa’ means 6 and ‘decimal’ means 10, this makes sense too. You can keep counting past nine without needing a new digit.

In decimal, 9 + 1 = 10. In hexadecimal, 9 + 1 = A.

So some numbers are easy to convert back and forth: a Hexadecimal ‘C’ is equivalent to a decimal ‘12’. However, a hexadecimal like ‘B7’ is fairly frustrating to convert by hand. It involves a lot of multiplying by 16, which isn’t necessarily an easy conversion.

Hex Approximation

Luckily for us, as web developers, we care far less about the exact number — we have calculators and color grabbers to help when precision matters. You can do excellent design work as long as you understand approximately what these colors mean.

These colors are broken down in three two-digit chunks — a red, a green, and a blue chunk. Taken together, they create a sort of color recipe, explaining exactly how much of each color light you need to create a target color.

A hex code, broken into three distinct chunks of information

In other words, when your computer reads this hexadecimal color code, it knows it needs 92 red, B5 green, and 58 blue.

But how much is that really?

Well, consider that the very highest hexadecimal digit is an F. That means the very highest two-digit hex number is FF. So instead of thinking about precise values, we can think about it like a sliding scale.

On the far left, 00 represents nothing, and on the far right, FF represents everything.

Here’s what 58 blue, 92 red, and B5 green look like on a two-digit hexadecimal number line.

In other words, it’s about a third of the available blue, a little more than half the available red, and about 75% of the available green.

Since there’s more green than anything else, we can surmise that when we mix those three values of colored light together, we will get a shade of green — but a more subdued green than the neon color used to tint these images so far.

Here’s what it looks like when they’re mixed together:

There you have it! Greenery, the color of the year, rendered as a color mixture recipe.

If you want to put your skills to the test, go check out the color guessing game called What The Hex.

Stay tuned for even more web color theory next week!