How does hex shorthand expansion work?

Each single digit is doubled. A 3-digit hex #F80 becomes #FF8800 because F becomes FF, 8 becomes 88, and 0 becomes 00. The same rule applies digit by digit, so the shorthand and full forms always represent the exact same color.

Why does #F80 equal #FF8800 and not #F08000?

Because the rule doubles each digit rather than padding with zeros. Doubling keeps the value proportional: the single digit F is the maximum, so it must map to FF, the maximum byte. Padding with a zero would darken the color incorrectly.

Can shorthand represent every color?

No. Shorthand can only express colors whose channels happen to be a doubled digit, such as 00, 11, 22, up to FF, which is just 16 levels per channel. Arbitrary colors like #3b82f6 have no valid 3-digit shorthand and must stay in full form.

Does it handle 4-digit alpha shorthand?

Yes. CSS allows a 4-digit #RGBA shorthand where the fourth digit is alpha. The tool expands it to the full 8-digit #RRGGBBAA form by doubling all four digits, so #F80a becomes #FF8800AA.

What if I paste a value that is already 6 digits?

The tool detects that it is already in full form and passes it through unchanged, telling you no expansion was needed. Invalid lengths or non-hex characters are flagged with an error message instead.

What is the CSS Hex Shorthand Expander?

Expand 3-digit CSS hex shorthand like #F80 to its full 6-digit #FF8800 form by doubling each digit, with support for 4-digit alpha shorthand. Validates input and shows a live swatch. Runs entirely in your browser. It runs free in your browser on Gera Tools, with nothing uploaded.

CSS Hex Shorthand Expander

Name: CSS Hex Shorthand Expander
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

Get one useful tool a week

Like this tool? Enter your email and we'll send you one genuinely useful Gera tool a week — plus a link to come back to this one. No spam, one-click unsubscribe any time.

Expand CSS hex shorthand

CSS lets you write a hex color in a compact 3-digit form, where #F80 is exactly the same color as #FF8800. This tool expands that shorthand — and the 4-digit alpha variant #RGBA — into the full canonical form by doubling each digit, validates the input, and previews the result with a live swatch. It is the quick way to normalize colors before storing or comparing them.

How it works

Expansion is a simple per-digit doubling: every single hex digit is repeated to form a byte. So #F80 expands as F to FF, 8 to 88, 0 to 00, giving #FF8800. The same rule applies to the 4-digit alpha shorthand, where the fourth digit becomes the alpha byte: #F80a becomes #FF8800AA. The tool first strips an optional leading hash, checks that the body is valid hex and a legal length (3, 4, 6, or 8), then either expands the short forms or passes the already-full forms through unchanged.

A table of representative expansions

Shorthand	Expanded	What you see
`#000`	`#000000`	Black
`#fff`	`#ffffff`	White
`#f00`	`#ff0000`	Pure red
`#0f0`	`#00ff00`	Pure green
`#00f`	`#0000ff`	Pure blue
`#abc`	`#aabbcc`	Slate blue-grey
`#F80`	`#FF8800`	Orange
`#0f08`	`#00ff0088`	Semi-transparent green

Notice that shorthand can only represent 16 steps per channel (0, 1, 2 … up to F), which is why only a limited subset of colors can be expressed in three digits. Any color whose channels do not divide evenly into “digit doubled” values — for example #3b82f6 (a popular blue) — has no valid shorthand form.

Why the rule is doubling, not padding

A common mistake is to assume #F80 expands to #F08000 (padding with zeros). That would be wrong — it would change the color. The CSS specification defines shorthand as “doubling each digit” because that preserves proportionality.

For the red channel:

F in hex = 15 in decimal, which is the maximum single digit
FF in hex = 255 in decimal, which is the maximum byte

Doubling F to FF maps the maximum single-digit value to the maximum byte value. Padding with zero would give F0 = 240 in decimal — a lighter red, not the intended maximum red.

The doubling rule: digit × 16 + digit = digit × 17. So A (10 decimal) becomes AA = 10 × 17 = 170. 5 becomes 55 = 5 × 17 = 85.

When this tool is useful

CSS refactoring: You have a codebase mixing shorthand and full-form hex and want to normalize everything to 6-digit before passing to a color parser.
Comparing colors: Two hex values can look different in string form but be the same color (#fff and #ffffff). Expanding both before comparison catches this.
Design token pipelines: Build tooling that processes design tokens often requires consistent 6- or 8-digit hex input; running shorthand through this expander cleans the input automatically.
Quick validation: The tool validates whether a hex string is legal CSS before you attempt to use it in code, flagging bad lengths or non-hex characters immediately.

#abc expands to #aabbcc, and #0f08 expands to #00ff0088. Everything runs in your browser — no data is sent anywhere.