What's the difference in #FFF and #FFFFFF in CSS and why does it matter?

The triplet is still technically hexadecimal but it is a shortcut. All it does is repeat each of the values and use that for the RGB. #333 becomes #333333, #abc becomes #aabbcc etc.

I think a the reasons for using this are two-fold: very minor space savings and values of R, G and B stepped by 16 evenly which helps proper colour reproduction on low-colour devices (the hex triplet would give a range of 4096 unique colour values). Nowadays that is becoming less useful since so many devices can display large numbers of colours natively.

Does that mean if I had a color like #FF0099 could it be rewritten as #F09 ?

@Perchik, yes, that’s right. Another side effect of using it is that I think you’ll always get a “web-safe” value but I’m not 100% sure about that.

Three? Three. Three?!!?

What a wasteful kind of shorthand. I agree with @paul… that’s all that makes sense. A weak kind of sense at that.

The full hex representation (six digits) allows specification of 2^24 (24-bit) colors.

I cannot imagine any kind of realistic savings from that convention. The amount of “space” saved in text files or in transfer is negligible (or less)! What sucks so hard about it is that it causes undue confusion… hence this discussion here.

@Paul… there’s only 216 colors in the web-safe palette… and this crazy shorthand convention will still allow for 16^3 (4,096) unique colors.

@robmandu, 216 – that is really safe – I’d forgot all about information like that being glad that those days were long gone. The real funny thing about this is that even if there’s a space savings in the text the actual data has to be represented with the same size of bytes when interpreted. Very odd indeed.

Spell out the whole color. If your HTML ever runs across a program in the future that doesn’t recognize the shorthand, it will botch up your website. It’s hard enough to keep code compliant and establish a standard view on multiple monitors nowadays, I can’t see saving 3 keystrokes & having to comb through & repair it all someday because your friend told you it looks goofy on the computer she’s using.

I agree with psyla — it’s not a good idea to use this shorthand. The risk of hitting a browser that does not recognize the shorthand far outweighs the benefit of saving three characters’ space. Plus.. I find that it generally takes more time to think about how to translate the 6 digit color into a 3 digit color as it does to hit three keys.

Well, thanks for all the advice. I didn’t plan on using it unless there was some other benefit. Good to know there isn’t. Thanks!

Using three chars doesn’t guarantee “safe” colours (yeah right, like you need to take that into account…). #222 or #222222 isn’t “safe”.

Anyway, IIRC this is better to use. All browsers support it and should support it in the future (and it’s part of the specifications) and shorthands like this (but also e.g. background: <colour> url(”<location>”) etc.) are supposed to render faster. So it’s not that the shorthand saves you time as much as it saves the browser rendering time.

It is true that it will save the browser some rendering time, that’s for sure. But there are some outdated browsers that do not support it, namely earlier versions of IE. If your clientele is pretty tech-savvy, it probably won’t be a problem to use. But if you’re aiming at the general public.. just know it’s insane how many people still use older browsers.

I should probably ask this as a new question, but here goes…

How, exactly, does using the shorthand version of the color designation instead of the full hex triplet save rendering time in the browser?

As a basic rule, the less data the browser has to process the faster it goes. If it only has to process three characters, it’s going to go faster than processing six. A little faster. Minimally faster. Unnoticeably faster, for that matter, unless your code is going through thousands of hex triplets. A similar answer can be found here.

@lefteh, great link. And pretty much expands on my original quip given above.

At the very best, the amount of time saved in rendering is in the nanosecond range. But, it could actually be worse, depending on how that calculation is performed.

If the browser gets the shorthand (like #ABC), translates it to full hex (like #AABBCC), and then begins its RGB work and drawing, well, that just added a step.

@lefteh – exactly how outdated are you talking about? There might still be a lot of people using IE4, but they’re relatively few. Also, if you continue to support them you’ll never make progress – you’ll be very restricted in what you can do on your webpages.

@robmandu – that would be a design fail in the browser.

@Vincett, the design fail is in the shorthand convention itself. Since #ABC doesn’t actually mathematically correspond to any numbering system, it must be converted to a real number representation first (hex, decimal, binary, octal, whatever).

There’s no argument here though… I think we all agree that, as a shorthand convention, it’s limiting, unclear, and unlikely to deliver any realistic performance gains.

Good discussion!

Hmm… Good point.