First things first, HEX color codes are a type of HTML color code. They are often referred to as hexadecimal colors or hex codes. The reason behind using hexadecimal numbers is that they provide a human-friendly representation of values in binary code. In simpler terms, they make it easier for us to understand and work with color values in digital environments.

Believe it or not, the origins of the hexadecimal notation system can be traced back to 1859 when a Swedish American engineer named John Williams Nystrom developed it. Nystrom's original proposal, also known as the tonal system, had applications in various fields, including mathematics and metrology. Little did he know that his creation would become an essential part of web design centuries later.

So, how do HEX color codes actually work? Well, it's all about breaking down colors into their primary components: red, green, and blue. Each pair of letters or numbers in a HEX code represents one of these primary colors. The first two digits determine the intensity of red, the next two digits control the intensity of green, and the last two digits govern the intensity of blue.

But why letters and numbers? Here's the scoop: When the value of a color component is between 1 and 9, we use regular numbers. However, when the value exceeds 9, we switch to letters. In the hexadecimal system, A represents 10, B represents 11, C represents 12, and so on up to F, which represents 15.

Now, let's get down to the nitty-gritty of calculating a hexadecimal number. It's actually quite simple once you know the formula. Remember, we use the hexadecimal system, which is base-16, unlike the decimal system we're accustomed to, which is base-10.

‍

Here are the three quick steps to calculate a hexadecimal number and translate it to RGB:

‍

Multiply the first digit (or the converted value from a letter) by 16. Multiply the second digit (or the converted value from a letter) by 1. Add the two products together to get a single value. For example, let's say we have a HEX color code of #42C0FF. We take the first digit, 4, and multiply it by 16, which gives us 64. Then we take the second digit, 2, and multiply it by 1, which gives us 2. Finally, we add 64 and 2 to get a single value of 66. That's how the HEX color code #42C0FF translates to an RGB color value.

‍

So, the next time you come across those enigmatic HEX color codes, you'll have a better understanding of what they are and how they work. And that's the story behind HEX colors—bringing a touch of science and creativity to the world of web design, one hexadecimal code at a time.

‍