Hex Shorthand Expander and Compressor

How to Use This Tool

Paste hex colours, a stylesheet, or any text containing them. Each is expanded or shortened, and the ones that cannot be shortened are marked with the reason.

The rule

Three-digit shorthand expands by doubling each digit: #f60 becomes #ff6600. So the reverse only works when every pair is two of the same digit.

#ffffff, #112233 and #aabbcc qualify. #ff6601 does not, because 01 is not a repeat.

Counting them: each of the three shorthand digits has 16 values, so there are 16³ = 4,096 shortenable colours out of 16⁶ = 16,777,216. That is 0.0244%, or one in every 4,096.

Stylesheets make it feel far more common because designers reach for round values — #fff, #000, #ccc — not because the property is common.

The mistake worth avoiding

Shortening by taking the first digit of each pair is wrong, and it is wrong quietly. #ff6601 truncated to #f60 expands back to #ff6600: one level of blue different.

Nobody sees one level. It survives review, it survives a screenshot comparison, and it can move a contrast ratio just across a WCAG threshold. Any tool that shortens must check the pairs, and any tool that shortens without checking is corrupting colours.

One colour in 4,096. The bar is drawn to scale, which is why the sliver is a single pixel.

Four and eight digits

The alpha forms follow the same rule with a fourth pair. #f60c is #ff6600cc, and the alpha byte doubles like the others.

Two things to watch:

Alpha is a byte, not a percentage. cc is 204, which is 80% opacity. Half-transparent is 80, not 50.
Support is universal now in current browsers, and eight-digit hex is still less readable than rgb(255 102 0 / 80%) for anything a human maintains.

Is it worth shortening?

Three characters per colour. In a stylesheet with two hundred colour declarations that is 600 bytes before compression, and after gzip considerably less than that — repeated strings compress well, and shortening them can occasionally make a file marginally larger by reducing repetition.

So the real argument is readability rather than size, and it points both ways: #fff is easier to scan, and mixed lengths in one file are harder. Pick one convention and let the formatter enforce it.

The one place it genuinely matters is inline styles in HTML email, where there is no compression and no stylesheet, and every byte is duplicated on every element.

Frequently Asked Questions

How does CSS hex shorthand work?

Each digit is doubled: #f60 becomes #ff6600. So a six-digit colour can only be shortened when every pair is two of the same digit.

How many colours can be written in shorthand?

4,096 out of 16,777,216 — exactly 0.0244%, or one in 4,096. Stylesheets feel full of shorthand because designers choose round values like #fff and #ccc, not because the property is common.

Can I shorten #ff6601 to #f60?

No. #f60 expands to #ff6600, which is one level different in blue. Shortening by truncation changes the colour by an amount too small to notice in review and large enough to move a contrast ratio across a threshold.

What is an 8-digit hex colour?

Six digits of colour plus two of alpha, so #ff6600cc is orange at 204/255 opacity. The four-digit form #f60c doubles each digit the same way. Note that alpha is a byte, so half-transparent is 80, not 50.

Does shortening hex codes make a stylesheet smaller?

By three characters per colour before compression, and much less after gzip — repeated strings compress well, so shortening can occasionally make a compressed file marginally larger. The real argument is readability. It matters most in HTML email inline styles, where there is no compression at all.

Should I use uppercase or lowercase hex?

Either; nothing depends on it. Lowercase is the more common convention in modern codebases and slightly easier to scan among letters. What matters is picking one and having a formatter enforce it.

Only 1 Colour in 4,096 Can Be Written in Three Digits

How the calculation works