HTML colors

Colors are important tool for visual presentation on web.

They may be specified as RGB (red-green-blue) combination or equivalent represented in a hexadecimal format with a hash sign (#) as prefix. The last possibility is to specify a full English name of a color but there are only 16 colors to choose from.

Red, green and blue are so called primary colors and other ones are derived from them, depending on the intensity of each one of those. Each primary color is represented with one 8-bit byte which altogether means that each derived color is specified by 24-bit long information. That equals to exactly 16 777 216 colors that might be specified by a Red-Green-Blue system.

Hexadecimal representation of colors is often used in software applications. It is combined of three bytes, one for each color, and converted into hexadecimal system. Each color is, as mentioned above, made of one byte. One byte can have value from 00 to FF in hexadecimal, or 0 to 255 in decimal notation. When we put all three colors together we get six digits long information, like #00FFFF. In a case like this, when numbers are equivalent per member of RGB (# 00 FF FF), it can be abbreviated to a three digits form like #0FF (~ #00FFFF).

Some colors may also specified with a regular English word and browsers should recognize it as valid. These are black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua.

Most elements and attributes in HTML used for colors handling have been deprecated and moved to style sheets.

Example

HTML colors:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML tutorial</title>
<style type="text/css">
table {
	font-size:0.8em;
}
table td {
	 width:50px;
	 border:1px solid gray;
}
</style>
</head>

<body> 

<table>
	<tr>
		<th colspan="2">Basic colors</th>
	</tr>
	<tr><td>black</td><td style="background-color:black">&nbsp;</td></tr>
	<tr><td>silver</td><td style="background-color:silver">&nbsp;</td></tr>
	<tr><td>gray</td><td style="background-color:gray">&nbsp;</td></tr>
	<tr><td>white</td><td style="background-color:white">&nbsp;</td></tr>
	<tr><td>maroon</td><td style="background-color:maroon">&nbsp;</td></tr>
	<tr><td>red</td><td style="background-color:red">&nbsp;</td></tr>
	<tr><td>purple</td><td style="background-color:purple">&nbsp;</td></tr>
	<tr><td>fuchsia</td><td style="background-color:fuchsia">&nbsp;</td></tr>
	<tr><td>green</td><td style="background-color:green">&nbsp;</td></tr>
	<tr><td>lime</td><td style="background-color:lime">&nbsp;</td></tr>
	<tr><td>olive</td><td style="background-color:olive">&nbsp;</td></tr>
	<tr><td>yellow</td><td style="background-color:yellow">&nbsp;</td></tr>
	<tr><td>navy</td><td style="background-color:navy">&nbsp;</td></tr>
	<tr><td>blue</td><td style="background-color:blue">&nbsp;</td></tr>
	<tr><td>teal</td><td style="background-color:teal">&nbsp;</td></tr>
	<tr><td>aqua</td><td style="background-color:aqua">&nbsp;</td></tr>
</table>
					
</body>

</html>

›› go to examples ››

Example

HTML colors:

Comments

About

Contact

Get Connected