Who is Chuck Norris?

Chuck Norris is American martial artist and actor.

How is he related to HTML color?

The reason is the browser can not understand chucknorris as color and try to somehow translate it to what it can understand and in this case into a hexadecimal value.

Most browsers will simply ignore any NON-hex values in your color string, substituting non-hex digits with zeros.

chucknorris starts with c which is recognized character in hexadecimal, also it's converting all unrecognized 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) as - 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:

#c00000

Let's understand this with below presentation from browser point of view -

Let me demonstrate this to you but with legacy font tag but we are focused here for color so let's understand -

<p><font color='chucknorris'>Reddish</font></p>
<p><font color='#c00000'>Same as above</font></p>
<p><span style="color: chucknorris">Black</span></p>

Let's see the live demo - {% stackblitz js-gwpdzm file=index.html %}

With all that being said, I highly recommend you keep learning!

Thank you for reading this article. Please feel free to connect with me on LinkedIn and Twitter.