How can I use 3-digit color codes rather than 6-digit color codes in CSS?

Solution 1:

The three-digit codes are a shorthand, and #123 is the same as #112233. In the example you give, you've (effectively) swapped #FDFEFF for #FFFFFF, which is close to the original colour, but obviously not exact.

It doesn't "matter" which version you use, as such, but three-digit colour codes mean you have a little less choice in shades. If you feel that saving 300 bytes is worth that, then go ahead and use the three-digit codes, but unless you're designing for a low-bandwidth situation those 300 bytes won't really save you all that much.

Solution 2:

Shorthand sucks! Don't use it. It's harder to maintain and creates unnecessary variation e.g. when searching and replacing a colour value ("oh, now I have to take into consideration #FFFFFF and white and #FFF").

What you save in size is never worth what you lose in maintainability. Use minifaction and compression to save bandwidth.