Color

Representing Colors in HTML

In the Styles section, you saw the CSS color and background-color properties. Both of those properties required a color value. The previous examples used color names, but HTML does not limit the list of available colors to the ones you can name. Modern web browsers are capable of displaying over 16 million different colors. To represent colors, HTML divides each color into three numbers: a red value, a green value, and a blue value. These are often referred to as RGB colors.

Each number for a color can be any integer from 0 to 255, representing how much of that color component is in the final color. For example, the following code is for the first row in the proceeding color table:

Click to view Live Example

<table border="0" cellspacing="5">
	<tr>
		<td style="background-color: rgb(0, 0, 0); color: white;">0, 0, 0</td>
		<td style="background-color: rgb(64, 0, 0); color: white;">64, 0, 0</td>
		<td style="background-color: rgb(128, 0, 0);">128, 0, 0</td>
		<td style="background-color: rgb(255, 0, 0);">255, 0, 0</td>
	</tr>
</table>
One row from the following table showing shades of colors

That is just a small sample of colors available, and color components don't have to be added evenly.

Writing Colors in Hexadecimal

Commonly, colors are represented using hexadecimal rather than rgb numbers. In hexadecimal, each digit of a number ranges from 0 to 15, but the digits 10 through 15 are represented as the letters A to F. For example, the number 27 is 1*16 + 11, so in hexadecimal is 1B. Knowing how to convert numbers to hexadecimal, however, is not needed to write HTML. Instead, all you need to know is that colors can be represented in hex as three two-digit numbers from 00 to FF. Instead of using rgb, hex numbers start with #:

Click to view Live Example

<table border="0" cellspacing="5">
	<tr>
		<td style="background-color: #000000; color: white;">#000000</td>
		<td style="background-color: #400000; color: white;">#400000</td>
		<td style="background-color: #800000;">#800000</td>
		<td style="background-color: #FF0000;">#FF0000</td>
	</tr>
</table>
The same table as above, but using hexadecimal colors

By using different combinations of red, green, and blue, you have millions of colors to choose from when styling your HTML document.