3-Digit vs 6-Digit HEX Colors: How They Work

You have seen both forms in stylesheets and wondered whether they are really the same thing: #f06 in one file, #ff0066 in another, both producing the same hot pink. They are. The three-digit form is CSS shorthand for the six-digit form, and the rule connecting them is wonderfully simple — each digit is doubled. But that simple rule has edges: not every color can be shortened, the four-digit and eight-digit forms add transparency with their own ordering rules, and rounding a color down to shorthand changes it slightly.

HEX notation basics

A HEX color describes a color as three channels — red, green, and blue — written in hexadecimal (base 16) after a # sign. Hexadecimal uses sixteen symbols: the digits 0–9 followed by the letters A–F, where A is 10 and F is 15. Each channel ranges from 00 (no light) to FF (full light), or 0 to 255 in decimal. So the full six-digit form, #RRGGBB, is three two-digit pairs: red, green, then blue.

Take #336699. Split into pairs, each converts to a decimal channel value: 33 is 3 × 16 + 3 = 51 red, 66 is 6 × 16 + 6 = 102 green, and 99 is 9 × 16 + 9 = 153 blue — the color rgb(51, 102, 153), a muted blue. The six-digit form can express 256 × 256 × 256 = 16,777,216 colors, covering every color a standard screen shows in the sRGB model.

The three-digit form, written #RGB, is the same idea with one digit per channel. CSS defines it as shorthand: the browser doubles each digit before rendering, so #f06 becomes #ff0066 and #fff becomes #ffffff. The color and the rendering are identical — shorthand is a compression trick that only works for a subset of colors, as the next section shows.

Expand shorthand: the doubling rule

The expansion rule is: write each of the three digits twice, in the same order. The first digit becomes the red pair, the second the green pair, the third the blue pair. It works in both directions — you can compress a six-digit code to three digits, but only when each pair already consists of two identical digits.

Here is the core worked example, step by step. Take the shorthand #abc:

Red: the first digit is a. Doubled, it becomes aa — 10 × 16 + 10 = 170.
Green: the second digit is b. Doubled, it becomes bb — 11 × 16 + 11 = 187.
Blue: the third digit is c. Doubled, it becomes cc — 12 × 16 + 12 = 204.

So the expansion is:

#abc  →  #aabbcc  →  rgb(170, 187, 204)

Try it in FBSubNet's free HEX / RGB Color Converter: type #abc into the HEX field and the tool expands it to #aabbcc with matching RGB values and a live preview swatch — the fastest sanity check available.

Two details are worth fixing in your mind. First, doubling is per digit, not per code: #abc becomes #aabbcc, not #abcabc — repeating the whole triplet scrambles the channels. Second, letter case does not matter: #ABC and #abc expand to the same value.

More expansions to build intuition

A handful of examples makes the pattern automatic:

#f00 → #ff0000, pure red; #0f0 → #00ff00, pure green; #00f → #0000ff, pure blue.
#fff → #ffffff, white; #000 → #000000, black.
#f06 → #ff0066 → rgb(255, 0, 102), hot pink.
#fa3 → #ffaa33 → rgb(255, 170, 51), a warm amber. FBSubNet's converter uses #fa3 as its own shorthand example.
#369 → #336699 → rgb(51, 102, 153), the muted blue from the previous section.
#123 → #112233 → rgb(17, 34, 51), a very dark navy.

Notice what all of these have in common: in the six-digit form, each pair is a doubled digit. That is the only situation in which shorthand exists — colors whose channels sit on the doubled-digit grid (0, 17, 34, …, 255), just 16 values per channel instead of 256. Shorthand therefore covers 4,096 colors out of 16.7 million: plenty for grays, primaries, and simple UI accents, but nowhere near enough for a brand palette picked from a photograph.

When shorthand is impossible

Most real-world colors cannot be shortened. The test is mechanical: split the six-digit code into its three pairs, and check whether each pair's two digits match. If any pair has two different digits, no shorthand exists for that color, and writing a three-digit version would change the color.

Consider #f4a261, a sandy orange. Its pairs are f4, a2, and 61 — none doubled, so there is no three-digit equivalent. The same goes for #1e90ff (dodger blue) and #c45f40 (terracotta). If you forced one — say, writing #f46 for #f4a261 — you would get #ff4466, a vivid pink-red that looks nothing like the original. Each digit in shorthand controls a whole channel pair, so there is no way to express "almost" a pair.

That strictness raises a practical question: can you round a color to the nearest shorthand value? Yes, but the color shifts. Rounding replaces each pair with the nearest doubled digit. For #e85d3f, a brick red: red e8 (232) rounds to ee, green 5d (93) to 55, blue 3f (63) to 44 — giving #e54, which expands to #ee5544. Close to the original, but visibly a touch redder and lighter. Fine for a rough sketch; for a brand color, keep the full six digits.

Where alpha formats differ

CSS also supports transparency in HEX, and this is where the digit-count story gets a second chapter. The four-digit form #RGBA is shorthand for the eight-digit form #RRGGBBAA, using the same doubling rule — but now the fourth digit is the alpha (opacity) channel, and it is doubled too.

For example, #abcd expands to #aabbccdd: red aa, green bb, blue cc, alpha dd (221 out of 255, about 87% opaque). More commonly, #f06a expands to #ff0066aa — the hot pink from earlier at roughly 67% opacity. The same impossibility rule applies: #ff006680 (the same pink at exactly 50% opacity, since 128 out of 255 is 80) cannot be shortened, because its pairs are not doubled.

The ordering trap is worth knowing about. In CSS, alpha goes last: #RRGGBBAA. Some platforms put alpha first — Android's #AARRGGBB is the best-known example. So when you copy a code with transparency out of a design tool or native app, check which end the alpha sits on before pasting it into CSS: #80ff0066 in CSS is a mostly-transparent red-orange, not the hot pink at 50% opacity you may have intended; the CSS form of that color is #ff006680.

Browser support is the other caveat: 4-digit and 8-digit HEX only became broadly reliable around 2017. Every modern browser handles them now, but for very old browsers or email clients, rgba() — for example, rgba(255, 0, 102, 0.5) instead of #ff006680 — is the safer equivalent.

Verify converted values

Converting between shorthand and full HEX is simple arithmetic, which makes it easy to verify — and verification is worth doing, because a single transposed digit produces a plausible-looking but wrong color. Three checks cover nearly every mistake.

1. Expand and compare in the converter

Paste the shorthand into FBSubNet's HEX / RGB Color Converter and confirm the expanded six-digit value and the preview swatch match your expectation. The tool expands 3-digit codes automatically and shows the RGB triplet as a second representation to cross-check.

2. Round-trip it by hand

Expansion is reversible, so converting back catches mistakes. #aabbcc splits into aa, bb, cc, each pair doubled, so it compresses back to #abc. If the round trip does not return your starting code, something was mistyped. The same check works for alpha forms: #ff0066aa compresses to #f06a only because every pair, including the alpha pair aa, is doubled.

3. Render both forms side by side

The final authority is the rendered pixel. Put one block with background: #f06 next to one with background: #ff0066 and confirm they are indistinguishable. In devtools, inspecting a computed style shows the color in the browser's own normalized form, which exposes typos immediately — a wrong digit shows up as a visibly different swatch, exactly the kind of error a text-only review misses.

Common failure modes

Repeating the triplet instead of doubling digits: #abc expands to #aabbcc, not #abcabc.
Shortening a non-doubled color: #f4a261 has no shorthand; any three-digit guess changes the color.
Alpha at the wrong end: CSS puts alpha last (#RRGGBBAA); some native platforms put it first.
Dropping the # prefix: color: ff0066 without the hash is invalid and ignored.

Shorthand vs full: which should you write?

Since both forms render identically when the conversion is valid, the choice is about readability and team convention, not correctness. Shorthand wins on brevity: #fff, #000, and #f00 are instantly recognizable, and grays read cleaner in short form (#333, #999, #ccc). Full form wins on consistency: every color looks the same length, which makes scanning a list of custom properties easier, and there is never a question of whether a value was shortened correctly.

Most teams settle on "always six digits," the safest default for design systems and generated code, or "shorten when exact," which keeps hand-written CSS compact while preserving exact colors. What matters far more than which convention you pick is that the whole codebase follows it; a mix of #fff and #ffffff for the same white confuses code review and find-and-replace. Minifiers shorten exact codes at build time anyway, so writing the full form in source costs nothing in the shipped file. One habit pays off regardless: store colors as CSS custom properties. Define --brand-pink: #ff0066; once, reference var(--brand-pink) everywhere, and the shorthand question only ever needs answering in one place. FBSubNet's related guide How to Convert RGB to HEX for CSS Colors shows how the same values move between RGB and HEX notation.

Frequently asked questions

Is #f06 exactly the same color as #ff0066?

Yes. CSS defines the three-digit form as shorthand, and the browser doubles each digit before rendering. There is no rounding and no rendering difference.

Can every 6-digit HEX code be shortened to 3 digits?

No — only codes where each pair consists of two identical digits, like #aabbcc. That covers 4,096 of 16.7 million possible colors; everything else must stay in six-digit form.

What about 4-digit and 8-digit HEX codes?

The four-digit form #RGBA is shorthand for the eight-digit form #RRGGBBAA, with alpha as the fourth channel. The same doubling rule applies, and CSS puts alpha last — unlike some native platforms, which put it first.

Does shorthand work in all browsers?

Three-digit shorthand is one of the oldest parts of CSS and works everywhere. The 4-digit and 8-digit alpha forms are broadly supported in modern browsers since around 2017; for very old environments, rgba() is the safer fallback.

How do I check a shorthand expansion quickly?

Paste it into the HEX / RGB Color Converter, which expands 3-digit codes automatically and shows the RGB values and a preview swatch. Rendering both forms side by side in the browser is the definitive check.

Quick recap

Three-digit HEX is shorthand: double each digit to get the six-digit form — #abc becomes #aabbcc, which is rgb(170, 187, 204).

Shorthand only exists when each pair is already doubled; most colors, like #f4a261, cannot be shortened without changing the color.

Four-digit #RGBA expands to eight-digit #RRGGBBAA the same way, with CSS putting alpha last.

Verify by expanding in the converter, round-tripping back to the original code, or rendering both forms side by side.

When in doubt, write all six digits — minifiers shorten exact codes for you, and full form is never wrong.