HTML colors
You can display over 16 million colors in HTML. Knowing the methodology by which colors are displayed and used is essential to anyone studying HTML, and for that matter, CSS as well.
This tutorial focuses on:
- Setting colors
- How many colors are possible?
Setting colors
There are three ways to set a color for an element on a webpage. Whether you're setting a background color or text color, it works the same way.
You can set a color using a color name, RGB value, or hexadecimal value.
Setting a color by name
The easiest way to set a color is by a color name such as aqua, lime, white, or yellow.
Cell with yellow background color | Cell with aqua background color |
Cell with lime background color | Cell with white background color |
Using this method to set a color is considered bad convention and should generally not be used.
Setting a color by 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, and 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.
NOTE: It is not recommended to use RGB for setting colors. Some browsers do not support this method for setting color.
Setting a color by hexadecimal 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.
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.
When we say a 'hexadecimal' value it should be noted that this is specified using the hexadecimal numbering system which is different from what most people are accustomed to. What most people are accustomed to is the decimal numbering system which uses the digits 0 - 9. However, the hexadecimal numbering system uses the digits 0 - F. That is, 0 - 9 just like the decimal system with an additional 6 digits which are the letters A - F.
DECIMAL SYSTEM: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
HEXADECIMAL SYSTEM: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
#f0f8ff | #ffffff | #f4f4f4 | #000000 | #7eddfc | #c9c9c9 | #3ff260 | #9496d6 |
#9fb7cc | #aaaa77 | #fad6b9 | #a7bf4e | #d09cd6 | #d6923e | #facf78 | #faf878 |
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.
How many colors are possible?
Obviously there exists a huge set of colors to choose from, but exactly how many possible choices are there?
The answer is 16,777,216.
How do you know this?!
At the beginning of this tutorial we discussed how to set color values using RGB and we mentioned that setting a color by using an RGB value involves using three values from 0 - 255 to specify the amount of red, green, and 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. So by knowing that each of the three values has 256 possibilities, we do 256 * 256 * 256 which gives us the value 16,777,216. We can also get this value from the method used to set a color using a hexadecimal value by doing 16 * 16 * 16 * 16 * 16 * 16 (166). Since there are 6 places for a hexadecimal value and each one can have a value from 0 - F (sixteen possible values).
That's right, 16,777,216 different colors. That's a lot of color!