Home / Questions / 267
Accepted
Ruslan López
Asked: 2020-12-03 08:32:16 +0800 CST 2020-12-03 08:32:16 +0800 CST

Why does HTML accept an arbitrary string as color?

  • 772

Running a page and setting the background color value to an arbitrary string such as "chucknorris"the background turns red. Why does this happen?

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

Original question: Why does HTML think “chucknorris” is a color?

html

2 Answers

  1. Best Answer

    Reference: Why does HTML think “chucknorris” is a color?

    If you have invalid characters in a color code that is written in hexadecimal notation, these characters are treated as 0. A hexadecimal number can contain the characters [0-9a-f], any other characters found are replaced with 0.

    For chucknorris:

    • Replace invalid characters:
      chucknorris→c00c0000000
    • Fill with 0until the number of characters is divisible by 3:
      c00c0000000(11) → c00c 0000 0000(12)
    • Format in RGB notation:
      rgb(c00c, 0000, 0000)
    • Truncate each value to two characters:
      rgb(c0, 00, 00)
    • Translate from hexadecimal to decimal:
      rgb(192, 0, 0) [ == #C00000]

    The resulting color: red.

    Other similar colors: crap, ninjaturtle, sick, grass.

    • 18

  2. It's a holdover from the days of Netscape:

    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.

    As of this blog post , which covers it in great detail, including different lengths of color values, etc.

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

    Replace all invalid hex characters with 0's

    ChuckNorris se convierte a c00c0000000

    Fill in the following total number of characters divisible by 3 (11 -> 12)

    c00c 0.000 0.000

    Divide into three equal groups, with each component representing the corresponding color component of an RGB color:

    RGB (c00c, 0000, 0000)

    Truncate each of the arguments from the right to 2 characters

    We get the following result:

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

    Here's an example that demonstrates the bgcolor attribute in action, to produce this "incredible" color 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 color? Well, if we apply the rules, the value of the string is:

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

    Which gives a light golden yellow color. Since the string starts with 9 characters, we keep the second C this time, so it ends at the final color value.

    I originally came across this when someone pointed out that you could do color="garbage" and, well, you get brown.

    from @dash's original answer on SOen .

    • 17