I see a lot of designers specifying their colours with only three characters, like so:

background: #fff;

Can someone explain how this works? I still currently use full hexidecimal values, like this:

background: #FFFFFF;

Can every colour be converted to three characters, or is it perhaps only values in which the first three characters is the same as the last three, i.e. #C99C99? Also, are either of these formats case-sensitive?

Thanks.

6 answers

5
points

you can only use three characters when each of the 3 pairs are the same two chars.

e.g.

#FFFFFF can be #FFF

#666666 can be #666 and #FF0066 could be #F06

or

Shorthand hex notation substitutes 3-character color values for 6-character colors when each of the color channels is identical in an RRGGBB hex triplet. Shorthand hex colors save three bytes for each color abbreviated. When combined with shorthand properties, grouping, descendant, and high-level type selectors shorthand hex colors can help optimize your style sheets to their minimum size.

as it says here: http://www.websiteoptimization.com/speed/tweak/hex/

Answered over 8 years ago by Tony Crockford
  • Regarding speed, in all but the most austere conditions, I think it's mostly faster for the coder! Alex Taylor over 8 years ago
1
point

It looks like three char hex values only work when one or more color element is duplicated, i.e. ff = f, ee = e, etc.

http://www.websiteoptimization.com/speed/tweak/hex/

Answered over 8 years ago by Michael Todd
1
point

Three-character hex codes can express every colour in the 256-colour web-safe palette (in case anyone still cares). Just stick to the digits 0, 3, 6, 9, C, and F.

For example, #9F0 (#99FF00) is a web-safe light green-yellow.

Answered over 8 years ago by Michael Zajac
0
points

case sensitivity is not an issue, although I think Hex Notation looks best all uppercase for readability .

Answered over 8 years ago by Tony Crockford
0
points

Thanks guys. Michael, that link really helped, and for anyone else wondering about this, the following extract sums it up.

Nearly all browsers (version 3 and above, except IE3 Mac) support shorthand hex colors. RGB triplets can be abbreviated if each of the Red, Green, and Blue hex pairs are the same. So when you use colors where there are three pairs, you can abbreviate each color channel using one character instead of two identical characters. So this:

.dark-yellow {color:#ffcc00;}

Becomes this:

.dark-yellow {color:#fc0;}

Browsers automatically expand these three-character colors into six by replicating the R, G, and B values. This technique saves a few bytes for each color abbreviated with shorthand hex notation.

Answered over 8 years ago by Edward Williams
-1
points

No, all 6 character colour codes cannot be converted into 3 letter character codes. It only works on codes where there are repeating characters: For example:

#000000 -> #000
#ff0000 -> #f00
#dddddd -> #ddd
#ff00ff -> #f0f

The following, for example cannot be:

#1d6dc2
#477c0e
#e21641

Hex colour codes are not case sensitive, so #AAAAAA (or #AAA) is the same as #aaaaaa (or #aaa). Personally I like to use lower case mostly because it make everything in my CSS lower case except where there is camel case.

Answered over 8 years ago by Darryl Hein