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.

Why you sometimes need to expand shorthand hex

Most color-processing contexts accept both formats, but there are common cases where a full 6-digit code is specifically required:

CSS custom property manipulation — when you split a color into per-channel variables or do channel arithmetic, you need the full two-digit pairs. #f0c cannot be sliced into reliable pairs without first expanding it.

Image processing tools — many image editors and batch scripts (ImageMagick, PIL, etc.) require or strongly prefer the 6-character form.

Design token pipelines — tools like Style Dictionary and Theo typically validate colors against the full 6-digit or 8-digit format. A shorthand in a design token file can cause validation failures.

Regular expression matching — a regex that extracts the three color channels from a 6-digit hex will produce wrong results on a 3-digit code without pre-expansion.

Canvas and WebGL — these APIs require numeric channel values (0–255 or 0.0–1.0), but some helper libraries parse hex strings and assume 6 digits.

Which colors can and cannot be written in shorthand

Shorthand is only possible when each channel value is a repeated hex digit: 00, 11, 22, 33, 44, 55, 66, 77, 88, 99, aa, bb, cc, dd, ee, or ff. That gives 16 options per channel and 16³ = 4096 possible shorthand colors out of the 16 million colors in the full 8-bit-per-channel palette.

For example, #336699 can be written as #369 because each pair is a doubled digit (33 → 3, 66 → 6, 99 → 9). But #337799 cannot be shortened because 33 → 3 and 77 → 7, but 99 already short, so the whole thing would be #379 — but then expanding gives #337799. Actually this one works. Now try #336798: 33 → 3, 67 is not a doubled digit, so this cannot be shortened.

A quick test: try to shorten each pair. If any pair has two different digits (like 67, 4a, f3), the color cannot be written in shorthand form.