Beautiful Dingbats

3 Digit Hex Color Codes

Shorthand Hex Color Picker
& 6 digit to 3 digit hexadecimal converter

What is a 3 digit color code?

A 3 digit color code is shorthand for the normal 6 digit color codes. A tiny fraction of the possible 16,777,216 six digit colors can be written in this shorthand.

If all three pairs from the 6 digit code contain duplicate digits. We can merge them together to make a 3 digit shorthand.

#RRGGBB → #RGB

These colors can be written in the 3 digit shorthand:

Red - #FF0000 becomes #F00

Blue - #0000FF becomes #00F

and this really nice green becomes #33CC99#3C0

But colors like these can’t be written in shorthand:

Yellow Ochre - #F6CC1b 😭

A Subtle Grey - #FCFCFC 😫

Even though only 1 out of 4096 hex codes can be rewritten in shorthand. That still leaves us with 4096 possible colors to choose from. All of which are displayed above in the color picker.

And, if you want to convert a 6 digit code into it’s nearest 3 digit neighbour, you can use the converter below.

Should I use 3 digit color codes?

Sure. But don’t worry about it too much. If there’s a color you really like, just use it. While redesigning this website I stuck entirely to shorthand colors, except for two.

If you’re still on the fence about the magical world of hex colors, consider these pros and cons. Starting with the pros…

Site Speed

The main reason for using 3 digit color codes is the small amount of bytes it saves your users from downloading. (3 bytes for every color). When this article was written Beautiful Dingbats changed most of the colors in our css to 3 digit codes and saved ~180 bytes per download.

While that’s not much on it’s own, many small interventions like this combined can make a real dent in a website’s download speeds.

Creativity with Constraints

Having too many choices can stall creativity. Applying technical constraints to your design will force you to make more creative decisions.

Limiting you color choices, you quickly realise that you don’t really need so many in the first place. 4096 is plenty.

No one will notice

Some designers will complain that the colors need to be perfect. However, that’s not possible anyway — colors shift on different devices, in different contexts, and even for different people.

and now the cons…

The lack of Subtle Grays

After a long time fiddling around with 3 digit codes, I discovered that what this website really needed was some subtle grays. Unfortunatly you just can do subtle grays with 3 digit color codes.

So, this site uses shorthand for all the colors except for gray.

Maintainability zzz

Some developers worry that using 3 digit codes makes a project harder to maintain.

For instance: You might wan’t to use a regular expression to search for colors within your code.

This is a fair point. A simple work around is to write the color codes in their long form, but make sure you use colors that can be minified to shorthand before being put into production.

Some specific old internet explorer bug

Apparently using the html attribute bgcolor with a shorthand color code doesn’t work. This has an easy fix. Don’t use the bgcolor attribute. I’d never even heard of it until now.  3 digit color codes for the win!

First Published — 25 December 2019
Last Update — 6 January 2020

by John Bartlet