How HEX colors work
HEX codes. They make our beautiful web, beautiful, but ever wonder how they work? I mean essentially, they compress the big RGB code into 6 (or 4, or 3) character long string. That’s basically it, HEX codes are a compressed representation of RGB. So let’s dive into understanding how we can read them!
1. The Structure
So, as we now understand, HEX codes are simply RGB but in text form, which means they’re structured the same. First 2 characters represent red, next 2 characters represent green and the last 2 represent blue.
Here’s a visual representation: #RRGGBB
2. The Scale
As you probably already know, RGB values range from 0 to 255 for example RGB(255, 0, 0) would give us total red.
But how do HEX color codes range? well, they range in HEX values 😇
To read HEX colors, we must first understand what each letter represents:
- A = 10
- B = 11
- C = 12
- D = 13
- E = 14
- F = 15
Now, to get the value:
- Multiply the first number by 16
- The 2nd number isn’t multiplied
- Lastly, simply combine the 2 numbers
Here’s the basic formula for “AB”: A*16 + B = 171
That’s it! You now know how to read HEX color codes
Examples
I love examples, they help me understand things deeply, I hope you do too 😚
Here is an example: HEX code of the green of Compiler #AAFF00 — Let’s break it down
Using the numbers provided above, let’s begin by converting red
- R
AA= 10*16 + 10 = 170 - G
FF= 15*16 + 15 = 255 - B
00= 0*16 + 0 = 0
As you can see, our color isn’t very complicated at all and breaking it down into integers tells us a lot about it — it’s green
Similarly let’s take #1877F2 can you guess what this is? Let’s see:
- R
18= 1*16 + 8 = 24 - G
77= 7*16 + 7 = 119 - B
F2= 15*16 + 2 = 242
Awesome, from this we can easily tell that it’s blue — Actually 🤓☝️ it’s Facebook blue #1877F2