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.
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?
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.
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'
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
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
The RBG values are just the counting numbers from 1-255, again, an
example being "255,255,255" representing "white".
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!
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.
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
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