Does style="color: #FFF;" render as #F0F0F0 or #FFFFFF?

When defining colors using "shorthand hexidecimal" (style="color: #FFF;"), is there a defined method for expanding the shorthand? (style="color: #F0F0F0;" or style="color: #FFFFFF;")

Do all browsers use the same expansion method? Is this behavior by specification (if so, where is it defined)? Does the expansion method perhaps vary between CSS 1/2/3?

I've observed that "most browsers" expand to #FFFFFF.

Are there any other places (outside of HTML/CSS) where this shorthand notation is allowed, but the expansion method is different?

I've always avoided using shorthand hex, because I've never known the answers to these questions...

CSS 2.1 (<http://www.w3.org/TR/CSS2/syndata.html#value-def-color>;):

> The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This ensures that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the color depth of the display.

Wordings of CSS 1, CSS 3 are the same. The CSS 4 draft say similar things.

The Internet Explorer and Firefox docs state the same method.

As a practical example, please check out this snippet, which features 3 <div>s of styles

div { width: 100px; height: 100px;  }

<div style="background-color:#f0f0f0;">#f0f0f0</div>
<div style="background-color:#fff;">#fff</div>
<div style="background-color:#ffffff;">#ffffff</div>

On Mac OS X 10.6, all Firefox 3.6, Opera 10.10, Safari 4 rendered #fff as #ffffff.

I don't see a reason why a browser or the standard wants to deviate from this expansion in the future, since the color #ffffff is far more common than #f0f0f0.

The CSS2 spec section 4.3.6 Colors:

> The RGB color model is used in > numerical color specifications. These > examples all specify the same color: > > > em { color: #f00 } /* #rgb / > em { color: #ff0000 } / #rrggbb */ > em { color: rgb(255,0,0) }
> em { color: rgb(100%, 0%, 0%) } > > > The format of an RGB value in > hexadecimal notation is a '#' > immediately followed by either three > or six hexadecimal characters. The > three-digit RGB notation (#rgb) is > converted into six-digit form > (#rrggbb) by replicating digits, not > by adding zeros. For example, #fb0 > expands to #ffbb00. This ensures that > white (#ffffff) can be specified with > the short notation (#fff) and removes > any dependencies on the color depth of > the display.

Since all modern browsers support CSS you can assume it will work this way in your web sites and web applications.

Testing on IE8, Firefox 3.6, and Google Chrome 5.0 beta, all three browsers repeat the hex digit:

• 000 produces 000000
• FFF produces FFFFFF
• 876 produces 887766

...and so forth.

I feel I should encourage people to not do this, as it is equivalent to telling someone you want 15 of something and then expecting them to show up with 255. What a gross and strange way to shorthand 0xFFFFFF. This is the "r u there" of web design to me.

I've not known a browser to not expand #FFF to #FFFFFF. I'd be interested in knowing which you think doesn't - or do you mean some continue to show #FFF?

However, as I understood it, the #FFF is valid shorthand, and #F0 would also (validly) expand to #F0F0F0.

This might be of interest http://www.websiteoptimization.com/speed/tweak/hex/