Menu
Why do certain random strings produce colors when entered as background colors in HTML?
For example, the following code produces a page with a red background across all browsers and platforms:
<body bgcolor="chucknorris"> test </body>On the other hand, the value chucknorr produces a yellow background!
What’s going on here?
745
HTML recognizes the following 16 color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. In addition to these HTML-defined colors, Microsoft Internet Explorer and Netscape Navigator recognize 140 standard color names.
HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values.
Colors are very important to give a good look and feel to your website. You can specify colors on page level using <body> tag or you can set colors for individual tags using bgcolor attribute.
As an HTML color code, purple is represented as #800080, which is hexadecimal for 128 red, 0 green, and 128 blue. Tip. If a visited link color is not defined, a browser defaults the color to purple.
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:
Replace all nonvalid hexadecimal characters with 0’s:
chucknorris becomes c00c0000000 Pad out to the next total number of characters divisible by 3 (11 → 12):
c00c 0000 0000 Split into three equal groups, with each component representing the corresponding colour component of an RGB colour:
RGB (c00c, 0000, 0000) 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>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 that you could do color="crap" and, well, it comes out brown.
155
I'm sorry to disagree, but according to the rules for parsing a legacy color value posted by @Yuhong Bao, chucknorris DOES NOT equate to #CC0000, but rather to #C00000, a very similar but slightly different hue of red. I used the Firefox ColorZilla add-on to verify this.
The rules state:
chucknorris0 chuc knor ris0 ch kn ri C0 00 00 I was able to use these rules to correctly interpret the following strings:
LuckyCharmsLuckLuckBeALadyLuckBeALadyTonightGangnamStyle UPDATE: The original answerers who said the color was #CC0000 have since edited their answers to include the correction.
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
