Abbreviated Hex Codes

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

So you know how to read a hex code as a sort of recipe for color ratios, but so far, they’ve been six digits long. And then all of a sudden, you’re looking through someone’s tutorial, and you see they talk about the color #80F.

That’s like… only half a hex code.

Who cares?

The hardest part about translating hex colors is not getting intimidated by the number system. Most developers will use a color-palette generator like Paletton to identify a good blend of colors.

So even though mixing them “by hand” or by picking values at random isn’t all that common, it is useful to be able to take a peek at a hex code like #37F089 or even #3F8 and know a few things right away:

• What color is most present?
• Is this going to be bright or dark?
• Is this color really similar to or identical to another one of my colors?

Hexadecimal Place Value

The more time you spend with hex colors, the more you realize that only the first digits actually matter. Is 92 really going to be that different from 9B? Would this color change much if we use BF instead of B5? Absolutely not.

In fact, you could still kind of identify a color even if you were missing each one of the second digits.

In the example to the left, even though we don’t know the exact values, we can still know about how much of each color to use on a scale from 00 to FF.

In this case, we’d use almost all of the blue, about half red, and almost no green.

How did we know?

Well, let’s take a look at them on the number line:

That’s just about all the available blue, and about half the available red. Since red and blue make purple, we can guess this will be some form of purple — probably a bluish shade.

Even if we assume the MINIMUM or the MAXIMUM amounts for those missing digits, they look almost the same. On the left, we filled the missing digits in with the lowest value, 0. On the right, we used the highest value, F, and the color is only the tiniest bit lighter:

In most cases, only the leading digit really matters.

So do computers just ignore the second digit?

Not at all — most browsers are actually specifically programmed to handle abbreviated hex colors. For example, the color #80F is only three digits, so browsers will assume you want each digit doubled.

#80F will be rendered as #8800FF.

Shortening your hex codes to only the three leading digits can be a handy trick if you’re coding your colors by hand and need something easy to remember and easy to type — it can also save a few bytes of memory here and there.

Next in this series: brightness and darkness!