How to convert between RGB and HTML colors

As you probably know from basic Math, the numbering system we use is called decimal. It consists of only 10 digits labeled: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9. With those 10 digits, we can form any number we want up to infinity.

Computers frequently use another numbering system called hexidecimal. It consists of 16 digits, labeled: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. As with decimal, we can form any number we want...the only difference is that there are more digits.

Note: hexidecimal is actually just a compact way of representing binary numbers for computer programmers; a computer really only uses binary (1's and 0's).

Let's start by doing a single digit conversion from hexidecimal to decimal. Take the hexidecimal value "A"....what does "A" mean? Well, it's the 10th digit, so we say "A" has a value of 10 in decimal...in other words, A = 10. Another example: "E" is the 14th digit, so E = 14. Just remember it stops at "F"...there is no "G" or "K" or anything like that. You can refer to the chart below to see the rest of the conversions.

HEX	0	1	2	3	4	5	6	7	8	9	A	B	C	D	E	F
DEC	0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15

Now that you know what hexidecimal is, we can start doing some conversions between RGB and HTML hex colors, but first, lets just look at how each one is written.

With RGB colors, they're normally written as three decimal values separated by a space or comma. These values represent the RED, GREEN and BLUE components of the color, and they range from 0 to 255. As an example, we might write: 133, 45, 150 for a purple-ish color.

HTML hex colors are similar, but they're written in hexidecimal with no spaces or commas between the components, and they're prefixed by the "#" symbol. Each component can range from 00 to FF as well. An example would be: "#852D96".

HEX to RGB

Okay, NOW let's do some conversions. If we want to convert the HTML hex color "#2A4FC0" to its RGB decimal notation, we simply split the numbers up into 3 groups, like so: 2A 4F C0. The first group would represent the RED component, the second would be the GREEN component, and lastly the BLUE component. Let's start with the first value, "2A":

Split this value (2A) again, but into two digits. In this case, we have "2" and "A".
Convert those two hexidecimal digits to decimal (refer to chart above):
```
2 = 2
A = 10
```
Take the first digit (2), and multiply by 16
```
2 * 16
Answer: 32
```
Take the answer (32) in step 3 and add the last digit (10)
```
32 + 10
Answer: 42
```

That's all there is to it..."2A" is 42 in decimal.

It all boils down to a simple formula: firstDigit * 16 + lastDigit

Let's apply that formula to all of them:


2A -> 2 * 16 + 10 = 42
4F -> 4 * 16 + 15 = 79
C0 -> 12 * 16 + 0 = 192

So, "#2A4FC0" converts to the RGB color 42, 79, 192

RGB to HEX

Now, what if we want to convert an RGB color to an HTML color? Let's use the RGB color 155, 130, 101.

Starting with the first number (151), divide by 16 and get the remainder (the "left-over" after dividing)
```
155 / 16
Answer: 9
Remainder: 11
```
Convert the answer and remainder to hexidecimal
```
9 = 9
11 = B
```
Take the hexidecimal values in step 2 (9 and "B"), and simply combine them together
```
Final value: 9B
```

That's it, 155 is "9B" in hexidecimal.

Let's do them all together:


155 -> 155 / 16 = 9, remainder 11 -> 9B
130 -> 130 / 16 = 8, remainder 2 -> 82
101 -> 101 / 16 = 6, remainder 5 -> 65

So, RGB color 155, 130, 101 converts to "#9B8265"

I hope I've explain things alright. Most likely you'll use a calculator or some program to do these conversion for you, but it's nice to know how to do it manually if you need to.

Please note that the methods I used in this tutorial doesn't work for all numbers. It only works for two digit hex numbers (00 to FF) and decimal values from 0 to 255, but that's all we need for working with RGB and HTML colors. When you're converting bigger numbers, you use exponents and stuff, which sort of makes things more messy. I guess that's it. If you have any questions, feel free to contact me