HTML Colors

HTML Colors are used to set color for text. background color for HTML elements, color for linked text, color for visited links, a color for active links, color for borde.

HTML Color Coding Methods

There are below many different color coding methodes to display color in web pages.

1. By predefined color names : You can set color by color name in web page. Color names are Black, Gray, Yellow, Red, Maroon, Olive, Lime, Green, Silver, White, Aqua, Fuchsia, Blue, Purple, Navy, Teal.
    
2. By HEX color code : You can set color by hexadecimal 6 digit code like #FFFFFF, #000000, #FF0000, #C0C0C0, #00FF00, #FF00FF, #0000FF, #00FFFF, #FFFF00. Hexadecimal code will be preceded by hash sign #. Also we can use short hand 3 digit hexadecimal  code.
3. By RGB Values : We can set color by rgb() value.The rgb() means red, green, and blue color mix up.  A rgb() takes three values such as red, green, and blue.The value can be an integer between 0 and 255 or a percentage.Example : rgb(0,0,255) , rgb(255,0,255), rgb(192,192,192), rgb(0,255,0) etc.

Example :

<table width="100%" border="1" cellpadding="4" cellspacing="4">
<tr>
<td colspan="8" align="left" valign="middle"><h2>HTML Color - Set background color by Color Name : </h2></td>
</tr>
<tr>
<td width="7%" height="20" align="left" valign="middle" bgcolor="White">&nbsp;</td>
<td width="20%" height="20" align="left" valign="middle">White</td>
<td width="7%" height="20" align="left" valign="middle" bgcolor="Fuchsia">&nbsp;</td>
<td width="17%" height="20" align="left" valign="middle">Fuchsia</td>
<td width="7%" height="20" align="left" valign="middle" bgcolor="Purple">&nbsp;</td>
<td width="12%" height="20" align="left" valign="middle">Purple</td>
<td width="7%" height="20" align="left" valign="middle" bgcolor="Teal">&nbsp;</td>
<td width="13%" height="20" align="left" valign="middle">Teal</td>
</tr>
<tr>
<td height="20" align="left" valign="middle" bgcolor="Navy">&nbsp;</td>
<td height="20" align="left" valign="middle">Navy</td>
<td height="20" align="left" valign="middle" bgcolor="Blue">&nbsp;</td>
<td height="20" align="left" valign="middle">Blue</td>
<td height="20" align="left" valign="middle" bgcolor="Aqua">&nbsp;</td>
<td height="20" align="left" valign="middle">Aqua</td>
<td height="20" align="left" valign="middle" bgcolor="Silver">&nbsp;</td>
<td height="20" align="left" valign="middle">Silver</td>
</tr>
<tr>
<td height="20" align="left" valign="middle" bgcolor="Gray">&nbsp;</td>
<td height="20" align="left" valign="middle">Gray</td>
<td height="20" align="left" valign="middle" bgcolor="Lime">&nbsp;</td>
<td height="20" align="left" valign="middle">Lime</td>
<td height="20" align="left" valign="middle" bgcolor="Green">&nbsp;</td>
<td height="20" align="left" valign="middle">Green</td>
<td height="20" align="left" valign="middle" bgcolor="Olive">&nbsp;</td>
<td height="20" align="left" valign="middle">Olive</td>
</tr>
<tr>
<td height="20" align="left" valign="middle" bgcolor="Black">&nbsp;</td>
<td height="20" align="left" valign="middle">Black</td>
<td height="20" align="left" valign="middle" bgcolor="Yellow">&nbsp;</td>
<td height="20" align="left" valign="middle">Yellow</td>
<td height="20" align="left" valign="middle" bgcolor="Red">&nbsp;</td>
<td height="20" align="left" valign="middle">Red</td>
<td height="20" align="left" valign="middle" bgcolor="Maroon">&nbsp;</td>
<td height="20" align="left" valign="middle">Maroon</td>
</tr>
</table>
<p>--------------------------------------------------------------------------------------------- </p>
<table width="100%" border="1" cellpadding="4" cellspacing="4">
<tr>
<td colspan="8" align="left" valign="middle"><h2>HTML Color - Set background color by HEX color code : </h2></td>
</tr>
<tr>
<td width="7%" height="20" align="left" valign="middle" bgcolor="#FFFFFF">&nbsp;</td>
<td width="20%" height="20" align="left" valign="middle">#FFFFFF</td>
<td width="7%" height="20" align="left" valign="middle" bgcolor="#990099">&nbsp;</td>
<td width="17%" height="20" align="left" valign="middle">#990099</td>
<td width="7%" height="20" align="left" valign="middle" bgcolor="#FF0099">&nbsp;</td>
<td width="12%" height="20" align="left" valign="middle">#FF0099</td>
<td width="7%" height="20" align="left" valign="middle" bgcolor="#006464">&nbsp;</td>
<td width="13%" height="20" align="left" valign="middle">#006464</td>
</tr>
<tr>
<td height="20" align="left" valign="middle" bgcolor="#0000FF">&nbsp;</td>
<td height="20" align="left" valign="middle">#0000FF</td>
<td height="20" align="left" valign="middle" bgcolor="#000099">&nbsp;</td>
<td height="20" align="left" valign="middle">#000099</td>
<td height="20" align="left" valign="middle" bgcolor="#00FFCC">&nbsp;</td>
<td height="20" align="left" valign="middle">#00FFCC</td>
<td height="20" align="left" valign="middle" bgcolor="#999999">&nbsp;</td>
<td height="20" align="left" valign="middle">#999999</td>
</tr>
<tr>
<td height="20" align="left" valign="middle" bgcolor="#666666">&nbsp;</td>
<td height="20" align="left" valign="middle">#666666</td>
<td height="20" align="left" valign="middle" bgcolor="#00FF00">&nbsp;</td>
<td height="20" align="left" valign="middle">#00FF00</td>
<td height="20" align="left" valign="middle" bgcolor="#003300">&nbsp;</td>
<td height="20" align="left" valign="middle">#003300</td>
<td height="20" align="left" valign="middle" bgcolor="#666600">&nbsp;</td>
<td height="20" align="left" valign="middle">#666600</td>
</tr>
<tr>
<td height="20" align="left" valign="middle" bgcolor="#000000">&nbsp;</td>
<td height="20" align="left" valign="middle">#000000</td>
<td height="20" align="left" valign="middle" bgcolor="#CCCC00">&nbsp;</td>
<td height="20" align="left" valign="middle">#CCCC00</td>
<td height="20" align="left" valign="middle" bgcolor="#FF0000">&nbsp;</td>
<td height="20" align="left" valign="middle">#FF0000</td>
<td height="20" align="left" valign="middle" bgcolor="#660000">&nbsp;</td>
<td height="20" align="left" valign="middle">#660000</td>
</tr>
</table>
<p> -------------------------------------------------------------------------------------------- </p>
<table width="100%" border="1" cellpadding="4" cellspacing="4">
<tr>
<td colspan="8" align="left" valign="middle"><h2>HTML Color - Set background color by RGB Values : </h2></td>
</tr>
<tr>
<td width="7%" height="20" align="left" valign="middle" bgcolor="rgb(255,255,255)">&nbsp;</td>
<td width="20%" height="20" align="left" valign="middle">rgb(255,255,255)</td>
<td width="7%" height="20" align="left" valign="middle" bgcolor="rgb(255,255,0)">&nbsp;</td>
<td width="17%" height="20" align="left" valign="middle">rgb(255,255,0)</td>
<td width="7%" height="20" align="left" valign="middle" bgcolor="rgb(255,0,153)">&nbsp;</td>
<td width="12%" height="20" align="left" valign="middle">rgb(255,0,153)</td>
<td width="7%" height="20" align="left" valign="middle" bgcolor="rgb(0,100,100)">&nbsp;</td>
<td width="13%" height="20" align="left" valign="middle">rgb(0,100,100)</td>
</tr>
<tr>
<td height="20" align="left" valign="middle" bgcolor="rgb(0,0,255)">&nbsp;</td>
<td height="20" align="left" valign="middle">rgb(0,0,255)</td>
<td height="20" align="left" valign="middle" bgcolor="rgb(0,0,153)">&nbsp;</td>
<td height="20" align="left" valign="middle">rgb(0,0,153)</td>
<td height="20" align="left" valign="middle" bgcolor="rgb(0,255,204)">&nbsp;</td>
<td height="20" align="left" valign="middle">rgb(0,255,204)</td>
<td height="20" align="left" valign="middle" bgcolor="rgb(153,153,153)">&nbsp;</td>
<td height="20" align="left" valign="middle">rgb(153,153,153)</td>
</tr>
<tr>
<td height="20" align="left" valign="middle" bgcolor="rgb(102,102,102)">&nbsp;</td>
<td height="20" align="left" valign="middle">rgb(102,102,102)</td>
<td height="20" align="left" valign="middle" bgcolor="rgb(0,255,0)">&nbsp;</td>
<td height="20" align="left" valign="middle">rgb(0,255,0)</td>
<td height="20" align="left" valign="middle" bgcolor="rgb(0,51,0)">&nbsp;</td>
<td height="20" align="left" valign="middle">rgb(0,51,0)</td>
<td height="20" align="left" valign="middle" bgcolor="rgb(102,102,0)">&nbsp;</td>
<td height="20" align="left" valign="middle">rgb(102,102,0)</td>
</tr>
<tr>
<td height="20" align="left" valign="middle" bgcolor="rgb(0,0,0)">&nbsp;</td>
<td height="20" align="left" valign="middle">rgb(0,0,0)</td>
<td height="20" align="left" valign="middle" bgcolor="rgb(204,204,0)">&nbsp;</td>
<td height="20" align="left" valign="middle">rgb(204,204,0)</td>
<td height="20" align="left" valign="middle" bgcolor="rgb(255,0,0)">&nbsp;</td>
<td height="20" align="left" valign="middle">rgb(255,0,0)</td>
<td height="20" align="left" valign="middle" bgcolor="rgb(102,0,0)">&nbsp;</td>
<td height="20" align="left" valign="middle">rgb(102,0,0)</td>
</tr>
</table>

Output :