htmlcsscolorshex

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...


Solution

  • 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.

    Behavior in different browsers

    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.