animuson animuson - 6 days ago 6
CSS Question

Using 3-digit color codes rather than 6-digit color codes in CSS

I recently went through my CSS file and switch all my 6-digit hexadecimal codes to simple 3-digit codes (for example, my

#FDFEFF
got shortened to
#FFF
). It renders pretty much the exact same color as before, it seems to me that the in between parts are fairly useless and removing them saved me an entire 300 bytes in my CSS file.

Does it matter which version you use? I rarely ever run across websites that use only the 3-digit codes (or I guess I just never run across ones that do). Is it still perfectly valid to use 3-digit codes over 6-digit codes, or are we supposed to use the full 6-digit codes?

Answer

The 3-digit codes are shorthand, #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 3-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 3-digit codes, but unless you're designing for a low-bandwidth situation those 300 bytes won't really save you all that much.