RGB - Hexadecimal Color Conversion

I'm telling you, this stuff is so easy you can practically do it in your head. Why be at the mercy of someone else's program?

Alright, pay attention, slappy.

So you know what color you want, but you don't know the hexadecimal equivalent for your web page.
Or, you have one of those hexadecimal color charts, but it just doesn't have the right shade of green you were looking for. (you know, the one on the end of your finger)

Well, your worries are over, tough guy.
(yeah, yeah, I know just about every HTML editor out there - in addition to most new graphics programs - will calculate the hexidecimal for you. But if you're one of those self-rightous purists that do all their editing with a word processor, this is for you.)

(That, and I'm pretty impressed I figured it out all by my lonesome.)

Who needs fancy-pants external applications chewing up your valuable RAM, or some bodunk web page that you have to sign on to use?

All you need is one of those paint-type graphics programs like Photoshop^TM or something similar that will tell you the RGB (red, green, blue - the color space used in video) values of your favorite color.
(and if you're doing any graphics at all, you already have one.)

If your color or graphic is in CMYK (cyan, magenta, yellow, black - the color space used in printing) or is Indexed (for GIF's), you will need to convert it.

The secret to the whole thing is remembering that hexadecimal means 16.

To calculate hexadecimal colors:

Each color will have numerical values for the amounts of Red, Green and Blue that make it up. These numbers will range from 0 to 255 for each of the three.

All you have to do then - and I do mean all you have to do - is divide this number by 16.

So....

Given RGB values, where all three are 0-255 (0, 0, 0 being black and 255, 255, 255 being white), use the equation:

R/16 = x + y/16
G/16 = x' + y'/16
B/16 = x" + y"/16
(tech note: if you remember My Dear Aunt Sally from algebra class, you'll notice that y is divided by 16 before it's added to x. [Mult., Div., Add., Sub.])

This will give you a whole number, 0-15, for x, and a remainder, y, represented as a whole number, 0-15, over 16. *

*(if you're using a calculator, you will get a decimal for the remainder - multiply the decimal by 16 again to get a whole number. i.e. 76/16 = 4.75, or 4 + 3/4, or 4 + 12/16)

This will give you:

COLOR="# ^{x y x' y' x" y"} "

Now this is where it might get confusing, because you obviously need a single digit for x and y, yet each one could be two digits long!
Remember, however, that hexadecimal is a base16 numbering system.
Normally, in base10, we count all the way to 9 before we need to use double digits. In hexidecimal, we need to count all the way to 15 before we start using double digits. So what do we do after 9? Start using letters: 10 is A, 11 is B, and so on to 15 which is F.

For example:

with RGB values of 80, 6, 143,: 80/16 = 5 + 0/16,
6/16 = 0 + 6/16, and
143/16 = 8 + 15/16;
translating this to hexadecimal, where our 10-15 become A-F, you get:: 50068F
Also, with an RGB of 182, 0, 35, you would get:: 182/16 = 11 + 6/16,
0/16 = 0 + 0,
35/16 = 2 + 3/16,
or: B60023.

You can use this for a group of words:

<FONT COLOR="#blah"> your text </FONT>

or in the BODY tag, for background, text and link color:

<BODY BGCOLOR="#blah" TEXT="#blah" LINK="#blah" VLINK="#blah" ALINK="#blah"> your text </BODY>

...and back again:

You can also "reverse engineer" hexadecimal colors to their RGB values. This comes in handy if you already have a background color and want to make a transparent GIF fit seamlessly over it.
All you need to do is multiply by 16 again.

Simply take the first number of the pair (there are three pairs, one each for Red, Green and Blue), multiply it by 16, then add the second number of the pair.

Using the first pair of the above example B60023, multiply B, or 11, by 16 to get 176, then add 6 to give you 182. See? It works. (as if you had any doubt it would)

Hither and Dither...

This will effecively give you “millions” of hexadecimal colors.
Unfortunately, most browsers, Netscape Navigator among them, will only display 216 colors! (why this is, I have no idea)
Not only that, some spud with an 8-bit (or worse!) monitor can make all your hard work look like an Etch-A-Sketch. (doesn't that suck...)

What your computer does in that case is dither the colors. Dithering is the process by which your computer uses the colors it can display to approximate the ones it can't. It does this by using one base color, which is close, than adding one or more other colors as tiny dots to create the appearance of your color - kind of like the tiny dots in a newspaper picture create the appearance of solid color.

You can probably save yourself some dithering by using the hexadecimal numbers in paired multiples of 3 (e.g. 00, 33, 66, 99, CC, FF). (yeah, it's a dry-hump if I ever saw one, but what can you do?)
Why three? Well, that's more math than even I care to get into.

You can also download Victor Engel's No-Dither Netscape Color Palette, and save the GIF palette to paste into your images.

Comprende, monkey boy?

-dave

people have found this page usefull since August 27, 1996. (Well, they read it at least.)

P.S. Wadda ya think? (i.e. your 2¢)
I'm interested in generating a little feedback. (You know, that annoying, screeching whine that at least lets you know everything's working.)

Pick one!

Don't cost nuthin...

Check out my homepage and sign my guestbook. (You've read this far, you might as well.)
Be sure to include the URL's of any page you use this formula for. (So my friends and I can go there and mock you.)

P.P.S. Feel free to link to this page!

This page made easier to understand on September 2, 1996.

David Cardillo
718-777-5609
26-08 Ditmars Blvd., Astoria, NY 11105
E-mail: gristle@bigfoot.com
Homepage: https://members.tripod.com/~gristle/