So, What the Heck is Hexadecimal?

Hexadecimal also known as Base 16 is used for a variety of things, such as CSS colors, Minecraft Redstone, and more. The main one we will focus on today will be using it in CSS.

You may have seen numbers and letters within a CSS color tag before #A1B2C3, this is using Hexadecimal to generate colors for CSS, it is used as modern computers can visualize around 16 million colors and Hexadecimal happens to be almost perfect (16^6 = 16,777,216). Hexadecimal begins like common Base 10, (0, 1, 2, 3, 4, 5, 6, 7, 8, 9 and for reference Binary: 0, 1) it is very similar it counts up from 0 to 9, after that is gets a tad bit strange, it starts using the English Alphabet (A, B, C, D, E, F) you can think of these letters like playing card values (J: 11, Q: 12, K: 13, etc.). In ascending order A starts at 10 and F ends at 15. In Base 10 each column to the left of the 1’s place multiplies by 10, Binary multiplies by 2, so Hexadecimal (Base 16) therefore multiplies by 16: 4096 | 256 | 16 | 1 or Base 10: 1000 | 100 | 10 | 1.

With this newfound knowledge we can easily convert Base 10 to Hexadecimal and vice versa. For example take the number 312 and convert it into Hexadecimal, we can do it with only three place values: 138.

To use it in CSS you initiate the color with a hash symbol # and then type in Hexadecimal, each space for R(red) G(green) B(blue) uses two values, so 16 | 1, they can simulate up to 256 different values (0 to 255), so you can think of a color as #R(_ _)G(_ _)B(_ _), and each value you add in each color space adds or removes that color from the total.

I hope you found this helpful in someway. Like clearing up misnomers or learning something completely new (I know this completely changed the CSS game when I learned Hexadecimal and could better visualize the color outputs). Go teach someone else you know who would need this.

Have a good day!

— SalladShooter