Question

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…

Answer 1

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.