You spot background: #FFF in a colleague’s code while you wrote #FFFFFF. Both work, so you assume they are two colors. The browser actually reads #FFF as #FFFFFF and renders the exact same pixel. What is left to settle is which colors can be written with three digits.
In this article
1. When a 3-digit HEX is valid
A six-digit HEX splits into three pairs: RR, GG, BB — one per red, green, and blue channel. The condition for shrinking to three digits is strict: both characters in every pair must be identical.
#FFFFFF splits into FF, FF, FF — each pair repeats, so it becomes #FFF. #FF6600 splits into FF, 66, 00 and likewise qualifies as #F60. But in #FF6B35 the pairs 6B and 35 differ, so it stays at six digits.
| Six-digit | Three pairs | Can shorten? |
|---|---|---|
#FFFFFF | FF / FF / FF | yes → #FFF |
#FF6600 | FF / 66 / 00 | yes → #F60 |
#336699 | 33 / 66 / 99 | yes → #369 |
#FF6B35 | FF / 6B / 35 | no |
#1A1A2E | 1A / 1A / 2E | no |
2. How #FFF expands to #FFFFFF
The rule is duplicate each digit. In #F60 the first digit F becomes FF, the 6 becomes 66, the 0 becomes 00, giving #FF6600.
#FFF → #FFFFFF
#F60 → #FF6600
#369 → #336699
#ABC → #AABBCC
The browser does this expansion at parse time. Whether the source says three digits or six, the same pixel value reaches the renderer — there is no precision difference.
3. 4- and 8-digit HEX with alpha
Add two digits after the six and you get 8-digit HEX, where the last pair is transparency; add one after the three and you get 4-digit, where that digit is transparency. The expansion rule is the same — duplicate each digit.
| Digits | Structure | Example | Expands to |
|---|---|---|---|
| 3 | RGB | #F60 | #FF6600 |
| 4 | RGBA | #F608 | #FF660088 |
| 6 | RRGGBB | #FF6600 | already full |
| 8 | RRGGBBAA | #FF660088 | already full |
/* 4 digits: orange at about 53% opacity */
background: #F608; /* expands to #FF660088 */
/* The equivalent rgba form */
background: rgba(255, 102, 0, 0.53);
00 is fully transparent, FF fully opaque, and 88 is 136/255 — about 53%, not 88%.4. Shorthand vs full form compatibility
The 3-digit form has the widest support — it has existed since CSS1 and even legacy IE parses it. The 4- and 8-digit forms arrived later as part of CSS Color 4: every modern browser supports them, IE does not.
- Modern browsers only: three, four, six, eight — pick whichever reads best.
- Legacy environments: use six digits plus rgba() for transparency and avoid the 4- and 8-digit forms.
- Values from design tools: Figma and Sketch export six digits, ready to paste.
5. How to tell quickly whether it can be shortened
Split the six digits into three pairs and check whether the two characters in each match. After a few rounds you will read it at a glance:
- Do digits 1 and 2 match? (RR pair)
- Do digits 3 and 4 match? (GG pair)
- Do digits 5 and 6 match? (BB pair)
- All three must match for a 3-digit form; one mismatch is enough to rule it out.
Two examples: #00CC99 splits into 00, CC, 99 — all match, so it becomes #0C9; #FF6B35 has 6B in the second pair, so it stays at six digits.
A pair collapses to a single digit only when its two characters match — that is the whole shorthand rule. So when #FFF and #FFFFFF appear side by side, neither is more correct: both hand the renderer the same pixel value. Only the notation differs.