I see a lot of designers specifying their colours with only three characters, like so:
Can someone explain how this works? I still currently use full hexidecimal values, like this:
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?
you can only use three characters when each of the 3 pairs are the same two chars.
#FFFFFF can be #FFF #666666 can be #666 and #FF0066 could be #F06
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/
It looks like three char hex values only work when one or more color element is duplicated, i.e. ff = f, ee = e, etc.
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.
case sensitivity is not an issue, although I think Hex Notation looks best all uppercase for readability .
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:
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.
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
#AAA) is the same as
#aaa). Personally I like to use lower case mostly because it make everything in my CSS lower case except where there is camel case.