views:

96

answers:

6

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?

+2  A: 

If the "3 digit" versions produces the colour you need then you can use it as much as you like. It's certainly not wrong.

Jan Hančič
+3  A: 

It does not matter whether you use shothand or normal hex colours, so go ahead and convert them if you desire.

removing them saved me an entire 300 bytes in my CSS file

Wow, a full 300 bytes! :D, sarcasm ftw

The thing is unless your going to minify, compress and combine all of your css, javascript etc 300 bytes is barely worth bothering with, especially as the average internet speed is increasing.

Have fun!

ILMV
Actually, I was trying to get my external CSS size below 8K, and I had already been considering doing this anyways so I figured, why not?
animuson
+3  A: 

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.

Chris
I do feel that saving the extra 300 bytes is more important than having more *exact* colors which you can barely tell the difference from anyways.
animuson
You say that because your example is #FDFEFF, which is pretty close to #FFFFFF anyway and is barely noticeable when you nudge it that way by using the shorthand. But if you look at #F0F0F0 and #FFF, that *is* noticeable. Or look at #E0F040 and then shorten that to #EF4 - huge difference. Graphic designers would throw fits if you try to tell them those colours are "close enough".
Chris
@Chris: If you shortened #F0F0F0 to #EEE (#EEEEEE), wouldn't that still be fairly close to the same color?
animuson
+1  A: 

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.

Pekka
A: 

That is true, but this transformation is not general:

#FFF == #FFFFFF
#CCC == #CCCCCC

So what it does is it "doubles" each hexadecimal digit. So it is not the same color. It is however possible that it looks the same because the differences are minute. A calibrated color workflow could help in this case.

GorillaPatch
A: 

If you want to save bytes then you better use CSS minification techniques

Carlos Muñoz