Chuck Norris es un color (en HTML)

Si introduces el texto «chucknorris» como valor de un atributo HTML que espere un color, como el vetusto bgcolor, verás que el resultado es un bonito, y muy apropiado, rojo sangre. Algo similar ocurre con Batman, Ironman o Spiderman, con los que obtenemos malva, negro y verde fósforo, respectivamente. ¿Por qué ocurre esto? ¿era el creador de HTML seguidor de Marvel? ¿o era más de DC?

Este misterioso comportamiento se debe a una de esas muchas peculiaridades que tienen HTML, CSS o JavaScript, que en ocasiones pueden traer de cabeza a los más avezados profesionales del desarrollo y el diseño web.

Lo que ocurre realmente es que el motor de renderizado del navegador está interpretando la cadena como si se tratara de un color en hexadecimal, sustituyendo por 0 los caracteres no válidos, es decir, aquellos que no son dígitos de 0 a 9 o letras de A a F.

En el caso de «chucknorris», el único carácter válido es la C, lo que hace que el navegador realmente vea «c00c 0000 0000», añadiendo un 0 al final para obtener una cadena con un tamaño divisible entre 3, por los 3 componentes rojo, verde y azul de RGB. A continuación, trunca las 3 cadenas para quedarse con sólo 2 caracteres por componente, como es apropiado, e interpreta el resultado como un color RGB: #C0 00 00, que en decimal sería 192 sobre 255 en el componente rojo, nada de verde y nada de azul.