How can I use 3-digit color codes rather than 6-digit color codes in CSS?
CssColorsHexWeb OptimizationCss Problem Overview
I recently went through my CSS file and switched all my six-digit hexadecimal codes to simple three-digit codes (for example, my #FDFEFF got shortened to #FFF).
It renders pretty much the exact same color as before, and 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 three-digit codes (or I guess I just never run across ones that do). Is it still perfectly valid to use three-digit codes over six-digit codes, or are we supposed to use the full six-digit codes?
Css Solutions
Solution 1 - Css
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 - Css
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.
Solution 3 - Css
If you want to save bytes then you better use CSS minification techniques
Solution 4 - Css
If you use this in a table in Internet Explorer 7, 8, or 9 (unfortunately, this is relevant as of the date of this response)
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables
Six-digit codes work fine, but three-digit codes render as black:
<table border="1" bgcolor="#ff0000"> vs. <table border="1" bgcolor="#ff0">
Solution 5 - Css
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.
Solution 6 - Css
I always use the shorthand. The best advantage is that I can easily remember the codes.
You still have 163 = 4,096 colors to choose from, and it should be enough.
However, if you save 300 bytes in shorthand color codes it means you have 100 colors declared in your CSS. Unless your page is very diverse, or all rainbows and flowers it seems like a lot. You might be good at systematic CSS, but I often see unnecessary CSS rules.
Example: if you're setting the same rule to many child elements that could have been replaced with setting the rule on the grandparent and in one exception element instead.
Solution 7 - Css
It does not matter whether you use shorthand 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 for the win
The thing is, unless you're going to minify, compress and combine all of your CSS, JavaScript, etc. content, 300 bytes is barely worth bothering with, especially as the average Internet speed is increasing.
Solution 8 - Css
That is true, but this transformation is not general:
#FFF == #FFFFFF
#CCC == #CCCCCC
So 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.
Solution 9 - Css
It is not possible. Please go through how the hexadecimal color code works. For a few color codes, we can reduce it to three digits, however, for the many hexadecimal color codes we cannot turn that down to three digits. Please check the below links for the further clarification.