Why does HTML think chucknorris is a color

Question

How come certain random strings produce colors when entered as background colors in HTML  For example   x000D   x000D   lt body bgcolor  chucknorris  gt  test  lt  body gt  x000D   x000D   x000D      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

User · Answer

I now this this is not an image made by me  but this image can help a lot     So  here is an little app that I created so you can play with the values  x000D   x000D  function parseColor input      input   input trim      if  input length  gt  128        input   input slice 0  128         if  input charAt 0                 input   input slice 1         input   input replace    0-9A-Fa-f  g   0      while  input length     0    input length   3  gt  0        input     0         var r   input slice 0  input length   3     var g   input slice input length   3  input length   2   3     var b   input slice input length   2   3     if  r length  gt  8        r   r slice -8       g   g slice -8       b   b slice -8         while  r length  gt  2  amp  amp  r charAt 0       0   amp  amp  g charAt 0       0   amp  amp  b charAt 0       0         r   r slice 1       g   g slice 1       b   b slice 1         if  r length  gt  2        r   r slice 0  2       g   g slice 0  2       b   b slice 0  2         return       r padStart 2   0     g padStart 2   0     b padStart 2   0         function           input   on  change   function         var input     this  val        var color   parseColor input       var  cells       result tbody td         cells eq 0  attr  bgcolor   input        cells eq 1  attr  bgcolor   color        var color1    cells eq 0  css  background-color        var color2    cells eq 1  css  background-color         cells eq 2  empty   append  background-color      input    lt br gt     getComputedStyle      color1        cells eq 3  empty   append  background-color      color    lt br gt     getComputedStyle      color2             x000D      font  monospace    input   width  100hv    table   table-layout  fixed  width  100     input  border  1px solid black border-radius  5px outline none padding  10px    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 12 4 jquery min js  gt  lt  script gt    lt p gt  lt input id  input  placeholder  Enter color e g  demofothedayischur000  or ffffssssrrrddswww   gt  lt  p gt  lt details gt   lt summary gt Color examples  drag-and-drop  lt  summary gt  Try this colors  lt br gt  Batato lt br gt  Muatre  lt br gt  fsdyelow  lt br gt  000meandthis lt br gt        lt br gt  entrcolor lt br gt  yellowofthe  lt br gt     me   you   aregre   H lt br gt        amp      lt br gt             lt br gt  thsdem lt br gt  lt  details gt   lt details gt   lt summary gt  Or     Want a big example   lt  summary gt  Here it goes  lt br gt  Batato Muatre  dtexbtfe dodx42 f 1dzxwq lorem ip os dh4huryx nyxze eimqdmuezo fsdyelow  000meandthis       entrcolor yellowofthe     me   you   aregre   H       amp                 thsdem  lt  details gt   lt table id  result  gt     lt thead gt       lt tr gt         lt th gt Left Color lt  th gt         lt th gt Right Color lt  th gt       lt  tr gt     lt  thead gt     lt tbody gt       lt tr gt         lt td gt  amp nbsp  lt  td gt         lt td gt  amp nbsp  lt  td gt       lt  tr gt       lt tr gt         lt td gt  amp nbsp  lt  td gt         lt td gt  amp nbsp  lt  td gt       lt  tr gt     lt  tbody gt   lt  table gt  x000D   x000D   x000D

User · Answer

The rules for parsing colors on legacy attributes involves additional steps than those mentioned in existing answers  The truncate component to 2 digits part is described as    Discard all characters except the last 8 Discard leading zeros one by one as long as all components have a leading zero Discard all characters except the first 2   Some examples   oooFoooFoooF 000F 000F 000F                 lt - replace  pad and chunk 0F 0F 0F                       lt - leading zeros truncated 0F 0F 0F                       lt - truncated to 2 characters from right  oooFooFFoFFF 000F 00FF 0FFF                 lt - replace  pad and chunk 00F 0FF FFF                    lt - leading zeros truncated 00 0F FF                       lt - truncated to 2 characters from right  ABCooooooABCooooooABCoooooo ABC000000 ABC000000 ABC000000  lt - replace  pad and chunk BC000000 BC000000 BC000000     lt - truncated to 8 characters from left BC BC BC                       lt - truncated to 2 characters from right  AoCooooooAoCooooooAoCoooooo A0C000000 A0C000000 A0C000000  lt - replace  pad and chunk 0C000000 0C000000 0C000000     lt - truncated to 8 characters from left C000000 C000000 C000000        lt - leading zeros truncated C0 C0 C0                       lt - truncated to 2 characters from right   Below is a partial implementation of the algorithm  It does not handle errors or cases where the user enters a valid color    x000D   x000D  function parseColor input    x000D       todo  return error if input is    x000D    input   input trim    x000D       todo  return error if input is  transparent  x000D       todo  return corresponding  rrggbb if input is a named color x000D       todo  return  rrggbb if input matches  rgb x000D       todo  replace unicode code points greater than U FFFF with 00 x000D    if  input length  gt  128    x000D      input   input slice 0  128   x000D      x000D    if  input charAt 0             x000D      input   input slice 1   x000D      x000D    input   input replace    0-9A-Fa-f  g   0    x000D    while  input length     0    input length   3  gt  0    x000D      input     0   x000D      x000D    var r   input slice 0  input length   3   x000D    var g   input slice input length   3  input length   2   3   x000D    var b   input slice input length   2   3   x000D    if  r length  gt  8    x000D      r   r slice -8   x000D      g   g slice -8   x000D      b   b slice -8   x000D      x000D    while  r length  gt  2  amp  amp  r charAt 0       0   amp  amp  g charAt 0       0   amp  amp  b charAt 0       0     x000D      r   r slice 1   x000D      g   g slice 1   x000D      b   b slice 1   x000D      x000D    if  r length  gt  2    x000D      r   r slice 0  2   x000D      g   g slice 0  2   x000D      b   b slice 0  2   x000D      x000D    return       r padStart 2   0     g padStart 2   0     b padStart 2   0    x000D    x000D   x000D    function     x000D        input   on  change   function     x000D      var input     this  val    x000D      var color   parseColor input   x000D      var  cells       result tbody td    x000D       cells eq 0  attr  bgcolor   input   x000D       cells eq 1  attr  bgcolor   color   x000D   x000D      var color1    cells eq 0  css  background-color    x000D      var color2    cells eq 1  css  background-color    x000D       cells eq 2  empty   append  bgcolor      input    lt br gt     getComputedStyle      color1   x000D       cells eq 3  empty   append  bgcolor      color    lt br gt     getComputedStyle      color2   x000D        x000D      x000D  body   font  medium monospace    x000D  input   width  20em    x000D  table   table-layout  fixed  width  100     x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 12 4 jquery min js  gt  lt  script gt  x000D   x000D   lt p gt  lt input id  input  placeholder  Enter color e g  chucknorris  gt  lt  p gt  x000D   lt table id  result  gt  x000D     lt thead gt  x000D       lt tr gt  x000D         lt th gt Left Color lt  th gt  x000D         lt th gt Right Color lt  th gt  x000D       lt  tr gt  x000D     lt  thead gt  x000D     lt tbody gt  x000D       lt tr gt  x000D         lt td gt  amp nbsp  lt  td gt  x000D         lt td gt  amp nbsp  lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt  amp nbsp  lt  td gt  x000D         lt td gt  amp nbsp  lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

The reason is the browser can not understand it and try to somehow translate it to what it can understand and in this case into a hexadecimal value      chucknorris starts with c which is recognised character in hexadecimal  also it s converting all unrecognised characters into 0   So chucknorris in hexadecimal format becomes  c00c00000000  all other characters become 0 and c remains where they are     Now they get divided by 3 for RGB red  green  blue     R  c00c  G  0000  B 0000     But we know valid hexadecimal for RGB is just 2 characters  means R  c0  G  00  B 00  So the real result is   bgcolor   c00000     I also added the steps in the image as a quick reference for you

User · Answer

The WHATWG HTML spec has the exact algorithm for parsing a legacy color value  https   html spec whatwg org multipage infrastructure html rules-for-parsing-a-legacy-colour-value  The code Netscape Classic used for parsing color strings is open source  https   dxr mozilla org classic source lib layout layimage c 155  For example  notice that each character is parsed as a hex digit and then is shifted into a 32-bit integer without checking for overflow  Only eight hex digits fit into a 32-bit integer  which is why only the last 8 characters are considered  After parsing the hex digits into 32-bit integers  they are then truncated into 8-bit integers by dividing them by 16 until they fit into 8-bit  which is why leading zeros are ignored  Update  This code does not exactly match what is defined in the spec  but the only difference there is a few lines of code  I think it is these lines that was added  in Netscape 4   if  bytes per val  gt  4        bytes per val   4

User · Answer

Answer     The browser will try to convert chucknorris into a hexadecimal value   Since c is the only valid hex character in chucknorris  the value turns into  c00c00000000 0 for all values that were invalid    The browser then divides the result into 3 groupds  Red   c00c  Green   0000  Blue   0000  Since valid hex values for html backgrounds only contain 2 digits for each color type  r  g  b   the last 2 digits are truncated from each group  leaving an rgb value of c00000 which is a brick-reddish toned color

User · Answer

chucknorris starts with c  and the browser reads it into a hexadecimal value   Because A  B  C  D  E  and F are characters in hexadecimal   The browser converts chucknorris to a hexadecimal value  C00C00000000  Then the C00C00000000 hexadecimal value is converted to RGB format  divided by 3    C00C00000000    R C00C  G 0000  B 0000  The browser needs only two digits to indicate the colour   R C00C  G 0000  B 0000    R C0  G 00  B 00    C00000  Finally  show bgcolor   C00000 in the web browser  Here s an example demonstrating it   x000D   x000D   lt table gt     lt tr gt       lt td bgcolor  chucknorris  cellpadding  10  width  150  align  center  gt chucknorris lt  td gt       lt td bgcolor  c00c00000000  cellpadding  10  width  150  align  center  gt c00c00000000 lt  td gt       lt td bgcolor  c00000  cellpadding  10  width  150  align  center  gt c00000 lt  td gt     lt  tr gt   lt  table gt  x000D   x000D   x000D

User · Answer

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   x000D   x000D   lt table gt     lt tr gt       lt td bgcolor  chucknorris  cellpadding  8  width  100  align  center  gt chuck norris lt  td gt       lt td bgcolor  mrt          cellpadding  8  width  100  align  center  style  color  ffffff  gt Mr T lt  td gt       lt td bgcolor  ninjaturtle  cellpadding  8  width  100  align  center  style  color  ffffff  gt ninjaturtle lt  td gt     lt  tr gt     lt tr gt       lt td bgcolor  sick   cellpadding  8  width  100  align  center  gt sick lt  td gt       lt td bgcolor  crap   cellpadding  8  width  100  align  center  gt crap lt  td gt       lt td bgcolor  grass  cellpadding  8  width  100  align  center  gt grass lt  td gt     lt  tr gt   lt  table gt  x000D   x000D   x000D   This also answers the other part of the question  Why does bgcolor  quot chucknorr quot  produce a yellow colour  Well  if we apply the rules  the string is  c00c00000   gt  c00 c00 000   gt  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  quot crap quot  and  well  it comes out brown

User · Answer

The browser is trying to convert chucknorris into hex colour code  because it   s not a valid value   In chucknorris  everything except c is not a valid hex value  So it gets converted to c00c00000000  Which becomes  c00000  a shade of red   This seems to be an issue primarily with Internet  Explorer and Opera   12  as both Chrome   31  and Firefox   26  just ignore this  P S  The numbers in brackets are the browser versions I tested on  On a lighter note  Chuck Norris doesn   t conform to web standards  Web standards conform to him   BADA55

User · Answer

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      make the string a length that is a multiple of 3 by adding 0s  chucknorris0 separate the string into 3 equal length strings  chuc knor ris0 truncate each string to 2 characters  ch kn ri keep the hex values  and add 0 s where necessary  C0 00 00   I was able to use these rules to correctly interpret the following strings    LuckyCharms Luck LuckBeALady LuckBeALadyTonight GangnamStyle      UPDATE  The original answerers who said the color was  CC0000 have since edited their answers to include the correction

User · Answer

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 Red  Green 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  x000D   x000D   lt p gt  lt font color  chucknorris  gt Redish lt  font gt  lt  p gt  x000D   lt p gt  lt font color   c00000  gt Same as above lt  font gt  lt  p gt  x000D   lt p gt  lt span style  color  chucknorris  gt Black lt  span gt  lt  p gt  x000D   x000D   x000D

[html] Why does HTML think “chucknorris” is a color?

Examples related to html

Examples related to browser

Examples related to background-color