Why does HTML think “chucknorris” is a color?

avatar
191    1 year ago

How come certain random strings produce colors when entered as background colors in HTML? For example:

<body bgcolor="chucknorris"> test </body>

...produces a document with a red background across all browsers and platforms.

Interestingly, while chucknorri produces a red background as well, chucknorr produces a yellow background.

What's going on here?

Answers { 3 }
avatar
1 year ago

Most browsers will simply ignore any NON-hex values in your color string, substituting non-hex digits with zeros.

ChuCknorris translates to c00c0000000. At this point, the browser will divide the string into three equal sections, indicating RedGreen and Blue values: c00c 0000 0000. Extra bits in each section will be ignored, which makes the final result #c00000 which is a reddish color.

Note, this does not apply to CSS color parsing, which follow the CSS standard.

<p><font color='chucknorris'>Redish</font></p>
<p><font color='#c00000'>Same as above</font></p>
<p><span style="color: chucknorris">Black</span></p>

avatar
1 year ago

It is from the blog post A little rant about Microsoft Internet Explorer's color parsing which covers it in great detail, including varying lengths of color values, etc.

If we apply the rules in turn from the blog post, we get the following:

  1. Replace all nonvalid hexadecimal characters with 0's

    chucknorris becomes c00c0000000
  2. Pad out to the next total number of characters divisible by 3 (11 -> 12)

    c00c 0000 0000
  3. Split into three equal groups, with each component representing the corresponding colour component of an RGB colour:

    RGB (c00c, 0000, 0000)
  4. Truncate each of the arguments from the right down to two characters

Which gives the following result:

RGB (c0, 00, 00) = #C00000 or RGB(192, 0, 0)

Here's an example demonstrating the bgcolor attribute in action, to produce this "amazing" colour swatch:

<table>
  <tr>
    <td bgcolor="chucknorris" cellpadding="8" width="100" align="center">chuck norris</td>
    <td bgcolor="mrt"         cellpadding="8" width="100" align="center" style="color:#ffffff">Mr T</td>
    <td bgcolor="ninjaturtle" cellpadding="8" width="100" align="center" style="color:#ffffff">ninjaturtle</td>
  </tr>
  <tr>
    <td bgcolor="sick"  cellpadding="8" width="100" align="center">sick</td>
    <td bgcolor="crap"  cellpadding="8" width="100" align="center">crap</td>
    <td bgcolor="grass" cellpadding="8" width="100" align="center">grass</td>
  </tr>
</table>

This also answers the other part of the question; why does bgcolor="chucknorr" produce a yellow colour? Well, if we apply the rules, the string is:

c00c00000 => c00 c00 000 => c0 c0 00 [RGB(192, 192, 0)]

Which gives a light yellow gold colour. As the string starts off as 9 characters, we keep the second C this time around hence it ends up in the final colour value.

I originally encountered this when someone pointed out you could do color="crap" and, well, it comes out brown.

avatar
1 week ago

Coloring in HTML basically takes two types of values, RGB(R, G, B - each from 0 to 255) or HEX#(RR, GG, BB each from 0 to F in hexadecimal) which can be represented interchangeably. If you are putting any word at bgcolor that contains a few hexadecimal character then that character will show you some unexpected color code that you never imagine. The logical explanation behind this - during Netscape days, incorrect digits in a color code were considered as 0.

So if you apply the same rule to chucknorris

  • Replace all non-hex characters with 0 - you get c00c0000000
  • Pad out the characters so the total numbers are divisible by 3 - c00c 0000 0000
  • Split into 3 groups for RGB - c00c, 0000, 0000
  • Truncate the digits from the right to 2 characters in each color group - c0, 00, 00 (RGB).

This gives you the hex color #C00000 which is a shade of red.