What Colour is Chucknorris?

In CSS, colors are typically specified using the RGB (Red, Green, Blue) format or the hexadecimal format. However, it is interesting to note that HTML indeed accepts any random string of words as colors, thanks to the CSS Color Module Level 3 specification.

When a random string of words is used as a color value in CSS, the browser will try to interpret and match it with a predefined list of color names. This list includes commonly used color names such as "red," "blue," "green," "yellow," and many others. If the random string of words matches any of the color names in the list, the corresponding color will be applied.

Hexadecimal color code


Why does HTML think chucknorris is a color?

In CSS, a string is considered a valid simple color if it meets the following criteria:

  1. The string must be exactly seven characters long.
  2. The first character of the string must be a U+0023 NUMBER SIGN character (#).
  3. The remaining six characters must be ASCII hex digits, representing the red, green, and blue components of the color in hexadecimal format.

The hexadecimal format uses a base-16 numbering system, where each digit can be any of the following: 0-9 or A-F (both uppercase and lowercase). The first two digits represent the red component, the middle two digits represent the green component, and the last two digits represent the blue component of the color.

For example, #FF0000 represents the color red, with FF as the hexadecimal value for the red component, and 00 for both green and blue components, indicating no contribution from green and blue channels, resulting in pure red.

This simple color format allows developers to quickly specify colors in a concise and standardized manner, making it easy to work with colors in CSS. It is particularly useful for defining custom colors and ensuring consistent color representation across different platforms and browsers.

Hexadecimal Conversion

If you are putting any word at bgcolor that contains a few hexadecimal character then that character will show you some unexpected color that you never imagine.

For example, if you write the following HTML:

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

You would see the body background painted a nice red.


The Chuck Norris Color code

The logical explanation behind this - during Netscape days, incorrect digits in a color code were considered as 0.

So if you apply the same rule to chucknorris

  1. Replace all non-hex characters with 0 - you get c00c0000000
  2. Pad out the characters so the total numbers are divisible by 3 - c00c 0000 0000
  3. Split into 3 groups for RGB - c00c, 0000, 0000
  4. Truncate the digits from the right to 2 characters in each color group - c0, 00, 00 (RGB).

This gives you the hex color #C00000 which is a shade of red.

Supported Browsers: The browsers supported by this procedure are listed below:


chucknorris supporting browsers

Conclusion

While using random words as colors can be fun and creative, it is essential to remember that CSS is primarily designed to work with recognized color formats like RGB and hexadecimal codes. Predefined color names provide a convenient way to use common colors, but for more precise and custom color selection, developers should rely on standard color representations to ensure consistent and predictable results in their web designs.