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 :

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

88041