HTML colors
You can display over 16 million colors in HTML. Knowing the methodology by which colors are displayed is essential to anyone studying HTML, and for that matter, CSS as well.
This lesson focuses on:
- Setting colors by name
- Setting colors by using an RGB value
- Setting colors by using a HEX value
Setting colors by name
The easiest way to set a color is to use the colors name.
Example:
<body bgcolor="green"> <table bgcolor="orange">
Using this method to set a color is considered bad convention and should generally not be used.
Furthermore, only 16 color names can be used if you want your pages to validate with an HTML or CSS validator. As recommended by the W3C.
For a list of these 16 colors as well as more information about safe colors, refer to our safe colors page.
Settings colors by using an RGB value
RGB stands for Red, Green, Blue. Setting a color by using an RGB value involves using three values from 0 - 255 to specify the amount of red, green, blue element present in the color. A value of 0 signifies the color is not present at all, a value of 255 signifies the color is fully present.
Example:
<body bgcolor="rgb(0, 0, 0)"> - no red, green, or blue at all..... meaning no color at all resulting in pure black <body bgcolor="rgb(255, 0, 0)"> - red fully present, no green, no blue at all .....meaning a pure red color <body bgcolor="rgb(0, 255, 0)"> - no red, green fully present, no blue at all .....meaning a pure green color <body bgcolor="rgb(0, 0, 255)"> - no red, no green, blue fully present .....meaning a pure blue color <body bgcolor="rgb(141, 161, 181)"> - some red, a little more green than red, a little more blue than green and red .....resulting in this color -<body bgcolor="rgb(255, 255, 255)"> - red fully present, green fully present, and blue fuly present ....meaning a full representation of color resulting in pure white
NOTE: It is not recommended to use RGB for setting colors. Some browsers do not support this method for setting color.
Displaying colors by HEX value
Displaying colors by HEX value is very similar to the RGB method, except with HEX you display the red, green, and blue values using a hexadecimal number together with the # sign.
Example:
<body bgcolor="#aabbc8">
A hexadecimal value is a 6 digit representation of a color. The first two digits represents the red element present in a color. The next two digits represent the green element present in a color, and the last two digits represent the blue element present in a color.
The hexadecimal formula
The hexadecimal number system (0 - F) is a little different than the decimal system (0 - 9) most people are accustomed to.
Decimal to Hexadecimal value conversion:
| Decimal | Hexadecimal |
|---|---|
| 0 | 0 |
| 1 | 1 |
| 2 | 2 |
| 3 | 3 |
| 4 | 4 |
| 5 | 5 |
| 6 | 6 |
| 7 | 7 |
| 8 | 8 |
| 9 | 9 |
| 10 | A |
| 11 | B |
| 12 | C |
| 13 | D |
| 14 | E |
| 15 | F |
The following tool can be used to convert decimal numbers to hexadecimal numbers and hexadecimal numbers to decimal numbers.
Check out the website www.colorblender.com for an excellent tool that displays a set of colors that mesh well together based on one color that you choose.
