0 votes
in HTML by
Why does HTML think “chucknorris” is a color?

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?

1 Answer

0 votes
by
It’s a holdover from the Netscape days:

Missing digits are treated as 0[...]. An incorrect digit is simply interpreted as 0. For example the values #F0F0F0, F0F0F0, F0F0F, #FxFxFx and FxFxFx are all the same.

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, finally, 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>

Related questions

+1 vote
asked Jan 28, 2021 in HTML by SakshiSharma
0 votes
0 votes
asked Feb 22 in HTML by DavidAnderson
...