In HTML, colors are displayed by the browser by using a combination of Red, Green, and Blue light. These colors are defined using a
hexadecimal notation (HEX) for the combination of Red, Green, and Blue color values (RGB). An RGB color space can be understood by considering it
as all possible colors that can be made from variants of red, green and blue.
Consider the example of shining red, green, and blue lights together onto
a white wall, each with dimmer switches. If only the blue light is on, the wall will look
blue. If the red and green lights are on together, the wall will look yellow. Applying more intensity of one or more colors and less of another
will produce different results. In the case of RGB, each color has a value of 0 to 255. Therefore, having 256 values for 3 colors, we can
make a total of 16,777,216 different colors. When we express these colors using HEX notation, we use 2 digits for each color (#RRGGBB). In HEX notation,
each digit holds up to 16 values, 0-F. Two digits (16 to the power of 2) provides us with the 256 values we need to represent each color. For example,
to display a black color, the HEX value is #000000. To display a white color, the HEX value is #FFFFFF.
HTML Colors
Here is an example of the 16 basic colors defined in the HTML 4.01 specification (Section 6.5)
Color | Name | HEX | RGB |
| White | #FFFFFF | 255,255,255 |
| Silver | #C0C0C0 | 192,192,192 |
| Gray | #808080 | 128,128,128 |
| Black | #000000 | 0,0,0 |
| Red | #FF0000 | 255,0,0 |
| Maroon | #800000 | 128,0,0 |
| Yellow | #FFFF00 | 255,255,0 |
| Olive | #808000 | 128,128,0 |
| Lime | #00FF00 | 0,255,0 |
| Green | #008000 | 0,128,0 |
| Aqua | #00FFFF | 0,255,255 |
| Teal | #008080 | 0,128,128 |
| Blue | #0000FF | 0,0,255 |
| Navy | #000080 | 0,0,128 |
| Fuchsia | #FF00FF | 255,0,255 |
| Purple | #800080 | 128,0,128 |
Shades of Gray
Color | HEX | RGB |
| #000000 | 0,0,0 |
| #080808 | 8,8,8 |
| #101010 | 16,16,16 |
| #181818 | 24,24,24 |
| #202020 | 32,32,32 |
| #282828 | 40,40,40 |
| #303030 | 48,48,48 |
| #383838 | 56,56,56 |
| #404040 | 64,64,64 |
| #484848 | 72,72,72 |
| #505050 | 80,80,80 |
| #585858 | 88,88,88 |
| #606060 | 96,96,96 |
| #686868 | 104,104,104 |
| #707070 | 112,112,112 |
| #787878 | 120,120,120 |
| #808080 | 128,128,128 |
| #888888 | 136,136,136 |
| #909090 | 144,144,144 |
| #989898 | 152,152,152 |
| #A0A0A0 | 160,160,160 |
| #A8A8A8 | 168,168,168 |
| #B0B0B0 | 176,176,176 |
| #B8B8B8 | 184,184,184 |
| #C0C0C0 | 192,192,192 |
| #C8C8C8 | 200,200,200 |
| #D0D0D0 | 208,208,208 |
| #D8D8D8 | 216,216,216 |
| #E0E0E0 | 224,224,224 |
| #E8E8E8 | 232,232,232 |
| #F0F0F0 | 240,240,240 |
| #F8F8F8 | 248,248,248 |
| #FFFFFF | 255,255,255 |
Notes on Using Colors
Although colors can add significant value to your web pages, consider the following when including color in your documents:
- The use of HTML elements and attributes for specifying color is deprecated. You should use style sheets (CSS) to assign colors to your elements.
- If you use a background image or set the background color, then be sure to set the text color as well.
Did you find the page informational and useful? Share it using one of your favorite social sites.
Recommended Books & Training Resources