In background color of an element:

div
with CSS-style
background-color:
table-cell
with HTML-attribute
bgcolor =
div
with HTML-attribute
bgcolor =

Real browser style:
background-color: transp.(default)

Real browser style:
background-color: transp.(default)

Real browser style:
background-color: transp.(default)

In text color of an element:

div
with CSS-style
color:
div
with HTML-element
<font color="">
Real browser style:
color: rgb(0,0,0) (default) Real browser style:
color: rgb(0,0,0) (default)
  • Tested in Firefox 23/25, Chrome 30, Opera 12/17, Safari-Win (5.1.7) and Internet Explorer 7 and 10.
  • In the textbox you can give your name (first name, last name or both; or random keys, everything is o.k.!).
  • The name you give is used as color name for a background-color and a text color.
  • Unless your input name is by accident a valid HTML color name (Black, White, Green, etc.; then you can try a random text, like "me@home" or "batman"), the color name is of course no color indication.
  • Nevertheless, not the default colors (white page, black text) stay upright, but in most cases a surprising background color and text color is coming!

What's all happening here?!

(A) - In case of an invalid color name

  • Page background color. - If the invalid color name is used in the body tag with <body bgcolor="...">, then a color appears for the page background.
  • Box 1. - If the invalid color name is used for the setting of a CSS background color of an element in the page, then nothing happens with the background of that element.
  • Box 2. - If the invalid color name is used in a <td> tag of a table, with <td bgcolor="...">, then a color appears for that table cell.
  • Box 3. - If the invalid color name is used in a <div> tag with <div bgcolor="...">, then nothing happens with the background of that element.
  • Box 4. - If the invalid color name is used for the setting of a CSS text color of an element in the page, then nothing happens with the text color of that element (still the default color black, or rgb(0,0,0)).
  • Box 5. - If the invalid color name is used in a <font> tag with attribute color="...", then a fancy text color appears.

Why?

  • A <body bgcolor="..."> is set in the html, and from the old days of Netscape 4 (!) browsers have a mystical algorithm to find out how a string can be converted to a color value. See this 2004 article of Sam Schinke. - In this way there is for instance no difference in typing #FFFF00 (yellow) or FFFF00 (invalid notation, but per algorithm converted into yellow).
  • Box 1: is using a css declaration with an illegal value. According to the css-rules: "User agents [read: browsers] must ignore a declaration with an illegal value." (see here in the css-specification). So nothing happens and and the background stays transparent.
    Chrome says: the background-color is rgba(0,0,0,0). That is: black, rgb(0,0,0), but with an opacity of "0" = fully transparent black = transparent too!
  • Box 2: again the html notation with a bgcolor="...", applied to a <td>, and the mystical algorithm is applied again.
  • Box 3: also the html bgcolor="...", now in a <div> tag. But without result this time.
    Reason: a bgcolor="..." in an arbitrary element is not a part of the html specification. The bgcolor="..." attribute is only allowed for some elements, and not for a <div>. See the index of attributes of the html-specification.
  • Box 4: again css-styled, and again no pardon: ignored.
  • Box 5: again html-styled, and again the weird colorname is translated, this time into a text color.

(B) - In case of a valid color name

  • This can be in the form of a Hex notation #......, or a rgb(..,..,..) notation, or a rgba(..,..,..,..) notation (only modern browsers), or one of the valid color names from the w3c list.
  • For instance: a color name mediumseagreen should do the same as #3CB371 or rgb(60,179,113).
    You can try it here: mediumseagreen.
  • In this case the given color name is recognized by the css. The html could do it already. So all boxes are reacting, except Box 3: the bgcolor="..." is still not applicable for a <div>.
  • A Hex notation does the same: #3CB371.
  • But! With a shorthand Hex notation there are browser differences.
    Apparently the browsers have their own interpretation of the algorithm. Firefox, Chrome, Opera and Safari are displaying the same html color/bg-color as for the css coloring.
    Internet Explorer shows a different color: with IE the shorthand is only working in the css-boxes Box 1 and Box 4.
    Try: the dark blue #007, in css the same as #000077 = rgb(0,0,119): ██.
    In the page background and the html-part Internet Explorer gives back the almost black color #000007 or rgb(0,0,7) ██.
  • But! With a rgb or rgba notation there are also browser differences: now just in the opposite way.
    Internet Explorer shows the same color in the boxes 1, 2, 4 and 5.
    Firefox, Chrome, Opera and Safari are displaying a different html color/bg-color as for the css coloring.
    Try: rgb(60,179,113), ██.
    In other browsers than IE it does only work in the css-boxes Box 1 and Box 4, the page background and the html-coloring is set to rgb(11, 1, 17), almost black ██.

(C) - Even stranger!

  • Nobody should expect (at least I didn't), but also the css-styles can be affected by an illegal color name!
    I encountered the phenomenon that the invalid css color names
    .. {background: background;}
    .. {color: background;}
    are turning on, in all browsers, a special medium blue color #004E98 ██ as well in background color as in text color.
  • With browser differences!
  • In Internet Explorer and Safari it appears to be the same color as the algorithm color of a bgcolor="background" or a <font color="background">.
  • In Firefox, Chrome and Opera there is a different translation of the invalid value!
    In css it is ██ again, but in html it is a complete other color: #BA000D ██.
  • You can try it on the page The Background Virus.
  • Erratum:
    Found it! The "background" colorname is not in the list of valid css/html colornames, but is one of the colornames in the section "System Colors" of the CSS2 specification:
    "CSS2 introduced a set of named color values that allows authors to specify colors in a manner that integrates them into the operating system's graphic environment. (...) Any color property (e.g., 'color' or 'background-color') can take one of the following names."
    In this list also the colornames for colored scollbars: an Internet Explorer / Microsoft hobby! It is valid CSS-2, but mostly not implemented by other browsers: Firefox, Chrome and Opera didn't want to support this kind of things.
    So it became a dead end, while in CSS-3 all "System Colors" are abandoned (deprecated).
    And the medium blue color #004E98 ██ is ... the default desktop color of Windows XP. (see here)

More!

  • The converting of invalid color names into fancy colors is possible in all html elements which can have a html-color property for text/background color: body, link, alink, vlink, font, table, tr, th and td.

In the follow-up page Color Magic is an overview of all possibilities.
Over there you can see that deprecated or even obsolete attributes/elements don't play a role: in all browsers the phenomenon is working for all kind of doctypes.
Backwards compatibility has very long arms!

francky

Never ever use this in a real life web page!