CSS Hexadecimal System Explained
Hexadecimal colors are commonly used in CSS to provide a larger variety of coloring to your site. At first site, they may look like gibberish, and they still kind of do at second glance. But on the third time, you’ll hopefully notice the 6 digit sequence is actually directing the program to pull varying amounts from primary colors.
Primary colors are used, because together they create every color combination we know. As in if I blend some red with blue it will make purple (You may remember yellow being a primary color and not green, that’s for paint, we’re talking about lights)
Hexadecimal vs. Decimal
Now, let’s back up to what those numbers mean. Unlike the decimal system, which we use everyday, hexadecimal might be some uncharted territory.
Here’s a quick reminder on the decimal system.What we’re used to doing in the below example is finding solutions based on the decimal system, which run from numbers 0 to 9.
I’m looking to solve the following equation:
Using the hexadecimal system, our answer is resolved like this, using 16 instead of 10:
Another twist with hexadecimal is that we don’t use integers after the number 9, instead we start using letters A-F, assigning them to our ten’s placeholders.
The 6 Digit Explanation using colors
Hexadecimal system is taking three shades between red, green and blue, and scrambling them together to make one color. The shades/or amount of coloring is determined by using values ranging from 0 to F.
the number 0 represents the absence of color. Thus, making the code 000000 equal to the color white, and on the other hand, the code FFFFFF equals to black as it it the full amount of red, green and blue combined.
Let’s break it down to figure out the below colors:
We can see here that we have a some amount of red, little green and lots of blue. Which blended together would give us a vivid violet.
