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.

<table border="1"> <tr> <td bgcolor="yellow">Cell with yellow background color</td> <td bgcolor="aqua">Cell with silver background color</td> </tr> <tr> <td bgcolor="lime">Cell with lime background color</td> <td bgcolor="white">Cell with white background color</td> </tr> </table>

Output:

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.

<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.

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.

Example:

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

Hexadecimal representations of color:

<table border="1"> <tr> <td bgcolor="#f0f8ff">#f0f8ff</td> <td bgcolor="#ffffff">#ffffff</td> <td bgcolor="#f4f4f4">#f4f4f4</td> <td bgcolor="#000000">#000000</td> <td bgcolor="#7eddfc">#7eddfc</td> <td bgcolor="#c9c9c9">#c9c9c9</td> <td bgcolor="#3ff260">#3ff260</td> <td bgcolor="#9496d6">#9496d6</td> </tr> <tr> <td bgcolor="#9fb7cc">#9fb7cc</td> <td bgcolor="#aaaa77">#aaaa77</td> <td bgcolor="#fad6b9">#fad6b9</td> <td bgcolor="#a7bf4e">#a7bf4e</td> <td bgcolor="#d09cd6">#d09cd6</td> <td bgcolor="#d6923e">#d6923e</td> <td bgcolor="#facf78">#facf78</td> <td bgcolor="#faf878">#c9c9c9</td> </tr> </table>

Output:

#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 (16⁶). 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!