Understanding Hex Colors

One developer I worked with used “mistyrose” as his background color on all his tests because he wanted a go-to color name he could remember easily and not a confusing hex code. Although you can still use color names in designing websites, hex codes give the most flexibility and range in our high definition world.

Color, so important to websites, is controlled by hexadecimal codes. These codes can be mystifying and even daunting when you first see them. But just like the paint store uses a recipe of colors to mix the exact shade of paint you want to paint the living room, computers need to know the recipe for the color you want on your website.

That recipe is the hexadecimal code. Website designers are used to seeing this code but many don’t have a clear idea of what it means and how they can use it better.

Ben Gremillion has an excellent article in Smashing Magazine on hexadecimal codes at  http://www.smashingmagazine.com/2012/10/04/the-code-side-of-color/ that is very helpful. However, I wanted to explore this topic in a different, perhaps less technical, way.

As you learn more about hex codes, I highly recommend you experiment on your own with two great sites:

1. What the Hex? – This addictive online game asks you guess which of the colors matches the hex code.

2. Colorpicker – Enter a hex code to see the color you’ve generated.

Mystery #1 – Breaking down the color pairs

Hexadecimal codes are six characters. (There are special circumstances when they can be abbreviated to three characters — more on that later.)

For example:

#335599

Each pair of two characters represents one of the primary visual colors – red for the first pair, green for the second pair, blue for the third pair.

#335599

Each pair represents how much of that primary color the computer needs to “mix” into the final color your see. As you can probably guess, the higher the number the more of that primary color adds to the final color.

Since the blue has the highest value in the code above, you will probably guess that this color is a blue, with a substantial amount of green, and a little red mixed in. And you’d be right. Here is #335599 –

Switching the values around to emphasize green will give you

#339955

Switching the values around to emphasize red will give you

#993355

 

Mystery #2 – Why are they called hexadecimal?

“That’s easy,” you may say, “but the codes I see have letters in them. What are those?”

First you need to know that the hexadecimal codes are not built in our base 10 system, they are built in base 16. In base 10, 33 means 3 tens plus 3 ones or 55 equals 5 tens plus 5 ones. In base 16, 33 equals 3 sixteens plus 3 ones (or 51 in base 10) and 55 equals 5 sixteens and 5 ones (or 85 in base 10).

Don’t worry! You probably won’t have to do hexadecimal conversions in your head to understand color codes.

Here is a link to a hex to decimal converter if you are interested.

So in our #335599 code above the red pair would equal 51 in base 10, green would equal 85 in base 10, and blue would equal 153 in base 10.

And we wind up with blue being the dominant color –

So now about the letters…

Mystery #2 – What’s the Deal With the Letters?

In base 10, we have 10 digits available – 0,1,2,3,4,5,6,7,8,9. However base 16 will need sixteen digits for each place, so letters have been added to our 10 digits for the other digits.

So in hexadecimal code you have:

0,1,2,3,4,5,6,7,8,9 digits equal the save value as in our base 10 system, and…

a=10
b=11
c=12
d=13
e=14
f=15

Why no letter for 16? Because, as in our base ten system, when we reach 10 it becomes adds a 1 to the tens place, when you reach 16, it adds a 1 to the “16s” place in the pair.

So the first digit in each pair is represents that number times 16, while the second place in the pair represents the ones.

So in the first hex code below, you can see that red now dominates the color because the first pair is (15*16) +1 =241 in base 10, compared to 85 in base 10 for the blue pair ((5*16)+5) .

#f19955

But if we switch the 1 to the 16s place and the f to to the 1s place, it is different story. Now the first pair has a value of (1*16)+15=31, so blue is the highest value ((5*16)+5=85) with red and green mixed in.

#1f3355

Looking for a shortcut?

Not really interested in converting from and to base 16 when you are figuring out a code? Fortunately, as you can see from the above example, the easiest way to figure out the relative dominance of the primary colors in a hex code is to look at the first number of each pair, because that number multiplied by 16 is likely to have more effect than anything in the ones place.

Ready to Have Fun?

Of course this isn’t all of it. There’s more — the subtractive colors of yellow, cyan, and magenta, brighter vs. darker shades, and more. But this should help you get started.

1. What the Hex? – This addictive online game asks you guess which of the colors matches the hex code.

2. Colorpicker – Enter a hex code to see the color you’ve generated.

 

Author: Terry Matz

Digital media expert with 18 years experience delivering web site strategies and solutions to improve business results through web site user experience, search engine optimization and marketing, and social media. Innovative thought leader with a cross-functional background in technology, communications, design, and marketing.

Share This Post On