--- intro --- values chart --- formula --- choosing a color --- html code ---

Custom Hexadecimal for HTML colors

where do the hexadecimal (6-digit) values for HTML colors come from? who? what where when? yeah, i spent too much time snacking and doodling in math class too.

it's not a bunch of crazy, senseless jargon that some n3rd types made up in efforts to confuse the common folk because most of their childhood was marked by harassment and undermining for their g3Ekness. na, they couldn't phathom senselessness!

you're here to discover that this hexa-whatever doesn't have to be "privileged" geek speak.

it's not random or senceless at all, and i have an actual formula i developed... the bottom line is that there are roughtly about 16,777,216 web color possibilities... so if you wanna mix your own custom colors, get ready!

--- intro --- values chart --- formula --- choosing a color --- html code ---

--- intro --- values chart --- formula --- choosing a color --- html code ---

creating your custom colors

1. PC users: click on the "start" button, select "programs", select "accessories", select Paint ®.

2. from the menu bar, click on "options", then click "edit colors...", and click on "define custom colors»".

3. hold down your left mouse button while sliding on the verticle bar on the right to select a brightness (or lumination.)

4. hold down your left mouse button while sliding in the colorful box to select a color (or hue and satuartion.) view the current color in the smaller box below that, "color|solid".

5. repeat 3 and 4 until you find your color, and make note of the numbers next to "red", "green", and "blue."

*various drawing / layout programs have an RGB palette: Adobe Illustrator ®, Adobe PhotoShop ®, Corel Draw ®, Corel PageMaker ®, Corel Photo-Paint ®, Macromedia FreeHand ®, Quark Xpress ®, and others. consult your users manual or contact technical support to access the RGB palette if you don't like clicking strange places at random. (it's harmless, really!)

--- intro --- values chart --- formula --- choosing a color --- html code ---

converting RGB to HTML

1. get a calculator (a little math won't hurt you) - PC users: click on the "start" button, select "programs", select "accessories", select calculator. (MAC users: look in your apple menu.)

2. one number at a time, first the RED value - if it is more than 16 divide it by 16. if it is 16 or less, go to step 3.

3. if you have a decimal, consider only the whole number and count DOWN that many lines on the chart above.

4. if you have a decimal, consider only the decimal now. multiply it by 16 and count across from LEFT TO RIGHT that many columns. (no decimal? go to step 5.)

5. write down that value and repeat 2 thru 4 for the other two numbers - GREEN and BLUE.*

6. write the three values together for a 6-digit (hex) HTML color value.*

*important! keep the RGB values in the correct order at all times - Red Green Blue

** there is a slight margin of error: the RGB palette has a range upto 255 for each color value. the HTML color palette has a range upto 256 for each color, which adds a few thousand more possible shades to the HTML palette - hardly noticable. remember: 0="00" and 255="ff"

*** not everyone's monitor will display the colors exactly like you see it on yours.

tip: to lighten a color, add a couple steps further right (or down) to all three values. to darken, take back a couple steps left or up to all three values.

example: the background of this page is one of my choice shades of blue.

the RGB value is r0 g51 b127.

» the first value, 0 becomes 00.
» the second value, 51 divided by 16 is 3.1875 ... i count down to the third line.
.1875 multiplied by 16 is 3 ... i count right 3 columns = 22.
» the third value, 168 divided by 16 is 7.9375 ... i count down to the seventh line.
.9375 multiplied by 16 is 15 ... i count right 15 columns = 6e.

so the html color is "#00226e".

--- intro --- values chart --- formula --- choosing a color --- html code ---

try it yourself

1.PC users: click on the "start" button, select "programs", select "accessories", select notepad.

2. type out some html with a body background color, or highlight and copy this:

<html>
<head><title>my background color</title></head>
<body bgcolor="#000000">
this is where the text stuffs goes.
</body>
</html>

in notepad, paste it (press ctrl+v). in place of 000000, type your 6-digit (or hex) value

3. from the menu bar at the top, click on "file", and click on "save as..."

4. type in a file name, change the "save as type" to "*.htm" - and be sure it is where you can find it easily.

5. from the menu bar at the top of your browser, click on "file", and click on "open page..." or "open..." then click on "choose file..." or "browse".

6. locate your file and click "open".

7. go back to your notepad file to add and change things. save every time you make a change. to see your changes on your browser, click "reload" or "refresh" after each time you save in notepad.

OR you can download a little program that'll do the math for you.
(see other useful tools at webmonkey.com.)