Loading...

It’s time for a lesson in computer math.

Hexadecimal, also called Hex, is a number system that is based on 16, as opposed to our typical counting based on 10. It is a common choice when determining RBG colors for web design.

When we count normally, we count by ones up until ten. We continue to count by ones until we reach ten again, at which point, we increase the tens spot by one, giving us twenty. Hexadecimal works similarly, except to get the extra digits, it uses the letters "A-F" to represent the numbers 10-15. After you reach F, you add one to the next number place (which would usually be the tens place in our base 10 counting system), and start back at zero in the ones slot. So "10" is 16, "11" is 17 and so on.

But how do we quickly know what a number like "AA" equals? When we use hexadecimal in web design, we'll only ever need to calculate two numbers at a time. With the base 10 counting we're used to, you take a number like 84, and can describe it as "(8 x 10) + 4". You essentially do the same in hexadecimal, except you multiply by 16 instead of 10. So we can use the formula (first digit x 16) + second digit. For the hexadecimal number "42", you would calculate it like this: (4 x 16) + 2 = 66. And what about something like AA? We know now that A represents the number 10, so we plug that into the formula: (10 x 16) + 10 = 170. The maximum possible value with two digits is FF, which equals 255.

You may be asking, why the heck would someone complicate things with a different number system? Hexadecimal has its origins in the days of earlier computing, where it was implemented as a simpler counting method than a computer's standard "binary" code (all zeroes and ones). Hexadecimal has been a widely used option by programmers and developers since. But don't worry. You don't need to master this counting system. The most important thing is to know what number combinations are higher than others. This way, you can better predict what colors you will produce by increasing a value.

Now, as far as actually applying this system, a pair of numbers is assigned to each color (red, green and blue), always totaling six digits.

breakdown of colors in hexadecimal

Since black is the absence of any color values in RGB, the code to represent black is zeroes across the board: #000000. And on the opposite side, white is all colors set to max, so we use the code: #FFFFFF. Here's a table showing a few other full-value combinations:

Red #FF0000
Green #00FF00
Blue #0000FF
Yellow #FFFF00
Cyan #00FFFF
Magenta #FF00FF

Any other color variation is created by using any combination of values for red, green and blue. The more stark the difference in values, the more intense the colors will be. If the values are set closer, they'll appear duller or closer to gray.

#FE13DD
#00DE11
#334899
#DEDCAD
#EEEEEF