Introduction
When coding in CSS and a lot of times in HTML as well, we find ourselves using special color codes. The two most commonly used color codes in HTML/CSS are Hexadecimal and RGB. In this tutorial, we will cover what the relationship between the two is, and how to convert from one to the other.

RGB and Hexadecimal Color values are very similar. They both work the same way by creating a color based on 3 values - Reds, Greens, and Blues. We will work with a very easy example:
#FF0000 = Red = rgb( 255, 0, 0 )

The next page will cover the basics of the hexadecimal system.



The Basics
If we were to convert a hexadecimal color into an rgb color value, the first thing you must realize is that the hexadecimal value is 6 characters long.

  
• The first 2 represent the reds
  
• The second 2 characters represent the greens
  
• The final 2 characters represent the blues

An RGB value is compromised of 3 numerical values. Similar to hexadecimal, the first number is the reds, second is the greens, and third is the blues.

An important thing to remember is that the hexadecimal number system is based on 16, unlike the common number system used by most humans, which is based on 10.

So What's up with A-F?
A-F Represents 10-15. Think of it like this:

The next page will show you how to convert between hexadecimal and RGB.

We will now convert red (#FF0000) into its RGB values.


First we will split up the hex value into 3 parts. The reds (FF), the greens(00), and the blues(00). Let's start with the reds.
The first character of the reds is F, so look up what F is ( F is 15  ). The second character is also F, which is obviously 15 as well. Now is where the math comes in.
Converting hex to rgb is basic math, not much room to make error.

We will call the first character's value x, and we will call the second character's value y. Here's the simple math formula you use to get the RGB value.
Reds = ( x * 16 ) + y

And when you substitute...

Reds = ( 15 * 16 ) + 15 = 255

If you do the math correctly you should get 255, which is the reds value :D Do the same thing for the greens and blues (it's not needed in this example, because they are 0)