HTML Coloring System - RGB Values

RGB which stands for Red, Green, Blue. Each can have a value from 0 (none of that color) to 255 (fully that color). The format for RGB is - rgb(RED, GREEN, BLUE), just like the name implies. Below is an example of RGB in use.
Red, Green, and Blue Values:
bgcolor="rgb(255,255,255)" White
bgcolor="rgb(255,0,0)" Red
bgcolor="rgb(0,255,0)" Green
bgcolor="rgb(0,0,255)" Blue

HTML Color Code - Breaking the Code
The following table shows how letters are incorporated into the hexadecimal essentially extending the numbers system to 16 values. Hang in there it all makes sense shortly.

A Real Hexadecimal:
bgcolor="#FFFFFF"

The letter "F" is the maximum amount we can send each color and as you may deduce, this color (#FFFFFF) represents the color white. A formula exists to calculate the numeric equivalent of a hexadecimal.

Hexadecimal Formula:
(15 * 16) + (15) = 255

The formula is real simple. Take the first value (F) or 15 multiply it by 16 and add it to the second value, 15. The value 255 is the maximum allowed for any primary color.

Let's try another one.

Example 2:
bgcolor="#CC7005"

CC(RR - Red)
(12 * 16) + (12) = 204
70(GG - Green)
(7 * 16) + (0) = 112
05(BB - Blue)
(0 * 16) + (5) = 5

If you want to be absolutely sure your colors will not change, use paired hex values for color. Examples: "#0011EE", "#44HHFF", or "#117788". These are called True Colors, since they will stay true in hue from browser to browser.

[note=vizskywalker]Fixed small typo in the title[/note]

This post has been edited by vizskywalker: Jan 16 2007, 03:27 AM

A small colour table (3k),

and a considerably larger colour grid (86k).

*Edit* -- links should be good now

This post has been edited by jlhaslip: Apr 23 2007, 12:18 AM

I prefer using hex code e.g. #fff which is equal to #ffffff.
it also have an additional points; that you are sure that your color is in the range of 256 web palette. supported by most monitor even in 8 bit color depth/resolution.

This is a nice tutorial, thanks for taking the time to write it.

Also jlhaslip, thanks for those links. I really like some of those tables. Athough, usually when i am searching for a color, rather than try and try for it, or look at a table, I go into Paint Shop Pro (just one of the 100s of applications you could use), and i select a custom color, and go from the color selection thing there (just a glorified version of the standard windows custom color selector that shows the hex code in with the other ones, but the standard color selector works as well, and you can use the techniques that Jaskaran provided.

Nice tutorial, I always used hexcode because I could look at a chart and tell which code to put in (although there are charts for those as well). This RGB code is much easier though because you can play with the numbers to get the right shade easier than with the hexadecimal code. I never used it because I didn't know how, lol. I think I'll start trying to use this code instead of the hexadecimal code now because I can play with it to figure out my shade. Plus I use grays and blacks alot so it really makes it easier for those. With gray you just make sure all three are the same number and bingo! there's a shade of gray. Then I can just move the numbers up or down to get whiter or more black. Thanks again for the nice tut!

The links dont seem to work!

Nice tutorial. Explains things very well!

A good tutorial it explains the colour codes well, but the links you gave the colour table's do not work

Fixed the links. I restructured the file system at my Hosting account. These links are good now:

A small colour table (3k),

and a considerably larger colour grid (86k).