[MASTERMIND NAEGI]

"But Novas, you can't read colors! That's insane!"

OH YES YOU CAN.

This quick little tutorial is going to help you understand the basics of the hex color codes we use in our daily web designing life. Once you learn this trick, you should be able to adjust shades of the color of your choice as well as determining the amount of contrast between two colors - all without having to test them visually. Note, however, that these would only help as estimations, but it does save some time. It's also a good way of starting to plan out your palette even when you're not in front of the computer.

So, what are the hex color codes? They are probably most familiar to you in the format of #000000, combined with color attributes and the like. You might think of them as some weird 6-digit code, but technically it's not. Simply put, hex codes are three sets of 2-digit hexadecimal numbers.

If you ever had a Computer Science class, you should be familiar on what hexadecimal means - it's another form of counting with a single digit that counts from 0 to 15. Because of this fact, it's also known as base 16. In comparison, our usual way of numbering (0-9 per digit) is called decimal or base 10, and the wacky 0111010101 stuff we see in computer things is called binary or base 2.

As mentioned before, hexadecimal counts from 0 to 15 in each digit. In order to avoid confusion, the numbers from 10 and above are substituted into letters - A = 10, B = 11, all the way to F = 15. (Everything up to base 35 uses the same logic). Therefore, 10 in hexadecimal isn't 10 in decimal - it's actually 16. If you do a bit of math, 00 is equal to 0 in decimal (duh), and FF is equal to 255 in decimal.

Let's move on to the more complex part. As mentioned, hexadecimal color codes are actually three 2-digit numbers. Each two digits in the code symbolizes one of the three primary colors of light, as so -

[atrb=border,0,true][atrb=style,font-weight: bold; text-align: center;, bTable]00	00	00
RED	GREEN	BLUE

Therefore, each pair determines the amount of that color. #000000 is the absence of color, so that's black. In contrast, #FFFFFF has all the colors on in their highest setting, so it's pure white. Anything with equal values on all three numbers means that it's a shade of grey.

Of course, #FF0000 is red, #00FF00 is green, and #0000FF is blue. If you mix two colors, you'll get the primary colors of paint - #FFFF00 is yellow, #FF00FF is magenta, and #00FFFF is cyan.

This is also why you see the 0-255 RGB values in programs like Photoshop - they use the exact same concept. If you're a math wiz, you can even try converting the hexadecimal numbers into decimal numbers and vice versa!

So there you go. Of course, the closer the combination, the less the contrast exists between those two shades. Keep that in mind in your next design.

And that's it! Told ya you can read colors.