An Animated Guide to Hex Codes

What are hex codes even?

# 95 75 CD

Hex codes are away to communicate a color value, to our browsers and eventually the computer. These are very similar to hsl and rgb values. Hsl and rgb have a clear and easy to read syntax. Hex codes unfortunately have a much more confusing syntax.

# 95 75 CD rgb( 95, 75, 75 ) hsl( 262%, 47%, 63% )

Believe it or not its not all Globity-Gook!

Lets disect hex codes to make them easier to read and understand!

In case you didnt do the math with us

Here is a hex to rgb converter that uses the above algorithm.

Hex 2 RGB Converter

rgb(255,255,255)
#

Hex codes are made up of 16 possible values

Hex codes are comprised of 6 values that are apart of the hexidecimal system, or base 16. Instead of 10 values like we are used to (0-9), there are 16. Thats where those confusing letters come from.

F
E
D
C
B
A
9
8
7
6
5
4
3
2
1
0

16 possible values

Each letter represents a number.

  • a 10
  • b 11
  • c 12
  • d 13
  • e 14
  • f 15

Hover over the a letter to see its value.

Thats Great and all, but how does that make colors

# 95 75
  • 2e
  • 5f
  • 75
  • a5

Hex codes are comprised of 6 values. There are 3 pairs of values in a hex code. The first two numbers show how much red should be added. The next tell how much green, and the next tells how much blue to add. This kind of sounds a lot like RGB.

Under the hood

So we now know that hex codes are just pairs of values that represent red, green, and blue amounts. Which is kind of like rgb. Its actually even closer to rgb than just that. The values in hex code start at 0 and go to 255, just like in rgb.

Enough theory how do we go from
hex to rgb

Lets Get Converting

# E5 73 73

Take this hex code for example

  1. Start with the first pair of values

    for us that is E5

  2. Convert any letters to their hexdecimal value

    • a 10
    • b 11
    • c 12
    • d 13
    • e 14
    • f 15

    Hover over the a letter to see its value.

    we now have

    14and5

  3. Muiltiply one of the values by 16 to the power of the values place in the pair

    # E 5 73 73

    We are going to start with the 0's place, which for us is 5, and we will multiply this by 160, since 5 is in the 0th place.

    5 × 160 = 5

    Next do the same for the E, which is in the 1s place. We will multiply E (which is equal to 14) by 161

    14 × 161 = 224

    we now have

    224and5

  4. Now smush'em together

    224
    5
    229

    We will add our two values together to get the value of the amount red that will be in our color.

    we now have

    229

  5. Rinse, and Repeat

    Now do the same for the green and blue pairs.

    After completing the greenand blue pairs. Check to see if you were correct below.

    # E5 229 73 115 73 115

    hover to see the converted value.

    we now have

    rgb(229,115,115)
👍

Great work, You did it!!!

Take Aways!

Obviously RGB and HSL values are much easier to write and more human friendly than hex codes are. However, now you know that hex codes are not just some globity-gook mess only computers can read, and are really closley related to rgb. Now that you know the basics you can kind of guess that #ff 00 00 is going to look red since is pair are the only ones that have a value, or #05ff22 is going to look greenish due how much green it has.