Have you ever wondered about the logic behind HEX color codes? Nathaniel Dodson of tutvid has created a great video to help you make sense of those seemingly illogical strings of letters and numbers.
The video makes HEX code look simple, and you don’t need to be a math genius to understand it. Even I was able to make sense of the digits, and I’m not good at math at all. When you figure out the pattern, you’ll be able to guess the color only by “reading” its HEX code.
Let’s start with the monitor, which mixes three channels to create colors: red, green and blue. Each of the channels has 256 “slots,” ranging from 0 to 255, and 0 counting as one of the digits. When all three channels are completely full, you get the bright white. When all of them are completely empty and set to 0, you get the darkest possible color: black.
Following this logic, when the red channel is set to 256 and the green and the blue one are set to 0, you get the brightest color red. The same goes for green and blue. Mixing the values gives you a myriad of different colors, and the HEX code is there to show how much of each channel is in a certain color.
Breaking down the HEX code
Each HEX code consists of three parts, each of them containing two characters. The first two characters represent the red channel, the middle two are the green channel, and the last two are the blue channel.
The HEX numbers use 16 digits because to get any number between 0 and 255 you need a formula that needs 256 numbers, so the maximum value is 16×16. Since you can’t insert three or four numbers where you only have two digits, this is why HEX code uses letters to mark the numbers from 10 to 15:
Remember that we work with a 0 as a digit, so this in total gives 16 digits.
The formula
If all the channels are “empty” and we have the darkest color (black), #000000 is its code. On the other hand, for white, the code will be the highest possible value, which is #FFFFFF. Nathaniel breaks down the HEX code for the color white.
So, if you have six characters, every pair of them will mark a different channel. And since F stands for 15, this will be three pairs of 15 in a row.
When you break these pairs down, look at it this way: the first character of each pair is the “big number.” You take the big number and multiply it with 16.
The second character of each pair is the “small number,” and you multiply it with 1. Or basically, you leave it as is.
Finally, you add these two numbers together, and it gives you the amount of color in each channel, going from 0 to 255.
It takes a bit of time to get used to the formula, but after some practice, you’ll be able to guess the color from the HEX code. You can practice and test it out here, it’s the test Nathaniel uses in the video.
[HEX CODE for Dummies (The Non-Technical Guide) (Base-16) | Tutvid]
FIND THIS INTERESTING? SHARE IT WITH YOUR FRIENDS!