October 23, 2017

Chuck Norris, the HTML Color

Filed under: Main — admin @ 12:01 am

A story appeared on StackOverflow about how Chuck Norris’ name is an HTML color. It’s funny because, well, Chuck Norris his own superhuman meme. But it’s also true because of the way HTML interprets color names.

HTML is the formatting language for web pages. It’s not a programming language, though many mistakenly refer to it as such. HTML sets out the way a page looks. It can be quite complex, especially when coupled with cascading style sheets (CSS) and JavaScript (which is a programming language), or it can be really simple. I once coded all my webpages using Windows Notepad because the HTML codes are easy to use and feedback is immediate.

In HTML, colors are defined in two ways.

The nerdy way is to set independent red, green, and blue values for the color. That sounds easy, but HTML uses hexadecimal values in a clutch of 3 or 6 digits. So a pure, red color is HTML color code #FF0000 or #F00. That “number” is interpreted as red.

The second, easier way is to use a color word. HTML defines specific color words, such as “red” or “green” or “pink,” which you can use instead of the color codes. Click here to view HTML color names.

How “Chuck Norris” becomes a color is in the way HTML interprets color code words. If the word isn’t recognized, HTML slips back into the color code number interpretation. Valid code numbers are 0 through 9 and A through F. In the case of “Chuck Norris” (or any random text) invalid characters are interpreted as value 0. Therefore, “Chuck Norris” is transformed into a color code:

“Chuck Norris” -> “chucknorris” -> C00C 0000 0000 -> C0 00 00 -> #C00000 ->

This conversion doesn’t happy only to the might Mr. Norris. You can type your own name as an HTML color code and see what color you render as.

Below is a gizmo I coded that lets you type in an HTML color or code — or your name (no spaces) — to see how HTML interprets it. Have fun.

 
Color name:

No Comments

No comments yet.

RSS feed for comments on this post.

Sorry, the comment form is closed at this time.


Powered by WordPress