# 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