Make your own free website on Tripod.com
RGB TO HEX COLOR CONVERSION TUTORIAL
So, you're tired of trying to find those web-sites with RGB to Hex and Hex to RGB color conversion algorithms and you figure it can't really be that hard to convert__how do they do it? Well, you don't have to have a PHD in mathematics or astro-physics to figure out how to easily convert from the base "10" RGB values to the base "16"(Hex) values used in html website design.

R GB values are the "Red", "Green", "Blue" base 10 values used to describe pixel color in many graphics programs, etc... You can research the origin of "RGB" color via the net in addition to the other color code conventions. Let's focus on the RGB values. Red, Green, Blue? Why not?
W e use 255 shades of Red, Green, and Blue to describe colors used on the net. Each color is given a decimal value having a range of 0 thru 255, so, when we describe a color using RGB notation we must provide three(3) numbers. One for the RED, one for the Blue, and one for the Green percentages. Minimum values being 0 and maximum values being 255. If we use the maximum value of Red, Green, and Blue we end up with "white" and the RGB value is of course 255,255,255. On the other end of the spectrum, black is as expected, RGB 0,0,0.


RGB 255,0,0
RGB 0,255,0
RGB 0,0,255
I n HTML design we find that color specifications must be in RGB HEX notation. There are many web programs that do this simple conversion but with a little background, you can do the conversions in your head or by doing simple math using paper and pen. When you figure out how simple the conversion is it'll probably take you less time computing using your gray matter than reaching for the ol' calculator.

Base "10" to base "16"(Hex), how simple! All we have to do is convert each of the RGB values to the equivalent Hex value and that's it! Each decimal color value 0-255 can be converted to a Hex value having only 2(two) digits or values.

Base 10 is the counting base we learned as children. the digits are 0,1,2,3,4,5,6,7,8,9. Note, the nine distinct counting symbols(1 minus the base value).
The counting digits of base 10 are 0,1,2,3,4,5,6,7,8,9(the base - 1).
The counting digits of base 16(Hex) 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F(the base -1).
Note, in Hex we are using letters in order to maintain 15 distinct number symbols.
A=10, B=11,....F=15.
I n the base 10 number system, we count up till 9(nine) then the next number, being 10, is recorded by putting a one in the "tens" location. And the "ones" location indexes back to the value of zero. So, if we look at the "tens" and "ones" location we find that we have the value of "1" times the "ten" plus the value of "zero" times "1", this equal the sum of 10 + 0 = 10. As we continue counting, the ones position increments up until we reach 9 then, like a odometer, the 10's column is incremented and the ones column is again reset to zero. This continues until we reach 90 in the tens position. When the ones location increments again past the value of nine, the tens location is reset to zero and the hundreds column registers a value of 1. So, looking at the three columns we have 1x100, 0x10, and 0x1 and the sum of these equals 100. And, I hope we have 100 items that correspond to our 1x100 + 0x10 + 0x1 accounting. Very simple. So, in RGB we have values from 0-255 so that we only need the 100s,10s, and 1s columns in order to represent the numbers.

The RBG values are just the counting numbers from 1-255, again, an example being "255,255,255" representing "white".

S o, how do we convert to the base 16 notation? Using the base "10" example, lets just change the bases and see what happens. Wait one moment, doesn't 100 and 10 look familiar? And the both look oddly like the number 1 also. This isn't by coincidence. The value 100 is just 10*10, and the value 10 is just 10*1 and the value 1 is just 1*1 or if we know anything about numbers raised to powers, the number 1 is just 10 raised to the zeroth power. But wait, there appears to be a very distinct pattern here. Of course you knew this because we have been counting using base "10". So 100 can be represented as 1 x 10^2 + 0 x 10^1 + 0 x 10^0, where that upward pointed arrow means the number is raised to the power of.

Likewise, in the Hex(base 16) number system, we can use the same notation, that is, a number in Hex is just the sum of a number 0 - F times the base 16(sixteen) raised to a power. Where we start with the zeroth power and then increment the multiplyer until we reach the highest number, then we reset the multiplier and increment the number in the next higher position. What? Well, lets look at the number 11, in hex notation we have 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F, where 11 is represented as the letter B. So, refering to the base "10" example, the number 11 in Hex equals 0 x 16^2 + 0 x 16^1 + B x 16^0 = B. What happens when we increment towards 15? 15 is represented by the letter F so in Hex this is just F x 16^0 = F x 1 = F. And you know what happens when we increment from 15 to 16? The Hex number F is reset back to 0(zero) and the number 1 appears as a 16^1 multiplyer. so 16 decimal equals 1 x 16^1 + 0 x 16^0, note the position of the multiplyers extend from right to left so that 16 deximal equals, yes, you guessed it, 10 Hex!

T hat's all there is to it! Simple, and after a few quick examples you'll laugh at those html pages with the RGB color code converters.

#FFFFFF
#FF0000
#00FF00
#0000FF
#CCCCCC
#CC0000
#00CC00
#0000CC
#444444
#440000
#000000
#000000
#000000
#000000
#000000
#000000
RGB > Hex Conversion
RGB = 255,100,255
Convert to Hex notation.

Easy, the RGB values are in base 10 so lets convert each value to Hex. The red value is a given, 255 is equal to FF in hex but if you didn't know this lets do the simple calculations. Remember, we determined that we only need the 16^1 and the 16^0 multipliers to represent any decimal number from 0-255. We find out how many times 16 goes into the decimal number and the remainder is used as the multiplyer of 16^1 or 1. 16 goes into 255 "15" times, 15x16=240. 15 in hex remember is the letter F! The remainder is 255 - 240 = 15 and again, 15 = F. So, in Hex notation 255 = Fx16 + Fx1 = FF! Bingo!

What about 100? Use the same procedure. 16 goes into 100 6 times. 6x16=96 with the remainder of 4. The hex notation is 6x16^1 + 4x16^0 and this equals "64" in hex notation. And, we already determined the conversion for the decimal number of 255 so the hex equivalent of RGB 255,100,255 = FF 64 FF; and we push the digits together and get "FF64FF"! So simple!

What about converting from Hex to Decimal? Even simpler! Ex, Hex Color Code of "AA3311" what is the RGB decimal equivalent. Quick, get the calculator out? Remember, the Hex color code is just the RGB numbers pushed together, so lets separate the R,G,B numbers first. We get AA,33,and 11; so all we have to do is convert these numbers to decimal form and we are home free. So simple even "collective aliens" can do this stuff. Remember, with base 16 we only used the 16^1 and the 16^0 columns to represent 0-255 decimal. So,

AA = A x 16^1 + A x 16^0
AA = Ax16 + Ax1.

How simple! A, if we remember equals the decimal number of 10 so

Ax16=10x16=160
Ax1 = 10x1=10

and the Hex number
AA = 160 + 10 = 170 decimal!
What about 33? again, simple, 3x16 + 3x1 = 48 + 3 = 51! And 11? 1x16 + 1x1 = 16 + 1 = 17! So, the RGB decimal equivalent to the Hex value of AA3311 is just 170,51,17 Let's go the other way and check our results. 16 goes into 170 ten times with the remainder of 10, but 10 = Hex A, so that 170 = Ax16 + Ax1 = AA. 16 goes into 51 3 times with teh remainder of 3 so that the hex equivalent = 33. 16 goes into 17 once with the remainder of 1 so the hex equivalent = 11.

You are now a RGB-Hex color code conversion machine!