Monday 17 February 2014

The Chuck Norris Color

      In HTML specifying "chucknorris" as color makes the element a dark shade of red. As an example the line

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

will render the background color of the page red. Check it out at http://jsfiddle.net/rvt5f/ . For those who dont know who Chuck Norris is read this wiki article's internet meme section. Trying out various combinations of strings as colors leads to "sick" being rendered as green and "crap" being rendered as brown. So is HTMLS's rendering of the letters "chucknorris" as RED, some sort of a subtle hint about how dangerous World's Greatest Human is? Well, No.

      Just about anything that you can put into the color attribute in HTML will be rendered as some sort of color. This is becuase of the way HTML parses color names. It uses the following algorithm to generate a color value (of the form #dddddd, where d represents a hexadecimal digit) from an invalid color string(see Note #1) :

1. Pad the letters with 0's till the length of the string is a multiple of 3.
So "chucknorris" becomes "chucknorris0"

2. Divide the string into 3 equal parts.
"chucknorris0" = "chuc knor ris0"

3. Replace all non hexadecimal characters with 0's.
"chuc knor ris0" = "c00c 0000 0000"

4. Truncate 2 characters from the right from each substring.
"c00c 0000 0000" = "c0 00 00"
   
So now the colour
#c00000
is rendered which is rendered as a darker shade of red.

Similarly "sick" corresponds to #00c000 (a shade of green) and "crap" corresponds to "#c0a000" (a shade of brown)

"sick" = "sick00"
"sick00" = "si ck 00"
"si ck 00" = "00 c0 00"

"crap" = "crap00"
"crap00" = "cr ap 00"
"cr ap 00" = "c0 a0 00"


Following is a list of invalid strings that render interesting colors :

chucknorris
sick
crap
snow
grass



Note :

1. The above algorithm applies only to strings which are not actual colors(i.e. invalid strings). So when "blue" is given as colour attribute, the element will actually turn out blue rather than "#b00e00"(darkish red) which is obtained by the above method.


"blue" = "blue00"
"blue00" = "bl ue 00"
"bl ue 00" = "b0 0e 00"

Similar is the case for all of the following colours that HTML recognizes :

    Black = "#000000"           Green = "#008000"
    Silver = "#C0C0C0"          Lime = "#00FF00"
    Gray = "#808080"            Olive = "#808000"
    White = "#FFFFFF"          Yellow = "#FFFF00"
    Maroon = "#800000"        Navy = "#000080"
    Red = "#FF0000"              Blue = "#0000FF"
    Purple = "#800080"          Teal = "#008080"
    Fuchsia = "#FF00FF"        Aqua = "#00FFFF"


2. None of the above work if the strings are put in a CSS colour.