How does hex shorthand expansion work?

Each hex digit in a 3-digit code is duplicated to make a 6-digit code. So #f0c becomes #ff00cc: f→ff, 0→00, c→cc. The shorthand and full form represent the exact same color.

In the 8-bit channel range 00–ff, doubling a single digit maps it to the value where both nibbles match. The digit f means the high nibble is 15; doubling to ff means 15*16 + 15 = 255, the channel maximum. Single-digit shorthand can only represent those 16 evenly-spaced values per channel.

Does it support 4-digit shorthand with alpha?

Yes. A 4-digit code like #f0c8 expands to #ff00cc88, where the fourth digit is the alpha channel and is also doubled.

What colors cannot be written in shorthand?

Only colors whose channels are repeated digits — like #ff00cc or #1188aa — can be written in shorthand. A value such as #ff01cc cannot, because 01 is not a doubled digit.

Is any data sent to a server?

No. The expansion is simple string manipulation that runs entirely in your browser. Nothing is uploaded.

3-Digit to 6-Digit Hex Color Expander

The hex color expander converts CSS shorthand hex codes into their full-length form. The 3-digit shorthand (#RGB) is a compact way to write certain colors, but tools, gradients, and color math usually need the full 6-digit #RRGGBB form. This tool doubles each digit to expand it instantly.

How it works

A hex color channel is a byte written as two hex digits, 00–ff. Shorthand works because some colors have channels where both digits are identical, like ff or 33. In that case CSS lets you write the single digit once, and the browser expands it by duplicating each digit:

#f0c  →  #ff00cc
 f → ff
 0 → 00
 c → cc

The same rule extends to the 4-digit form with an alpha channel: #f0c8 → #ff00cc88. Expansion is purely textual — each of the 3 (or 4) digits is repeated to form the long code, and the resulting color is identical.

Notes

Only colors with repeated-digit channels can be written in shorthand, which is why shorthand offers just 16 values per channel.
The leading # is optional in this tool; it is added back to the output.
The live swatch lets you confirm the expanded color looks right.

Everything runs locally in your browser — your input is never uploaded.