« »

This color picker will help you fine tune the hex color codes for your web page. First choose whether you wish to play with the Background Color, Text Color, Link Color, Visited Link Color, Active Link Color or Hover Color and check the appropriate round radio button.

Label: ColorPicker 3.1

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
Files
CSS
JavaScript
HTML
Print

Copy All x2

<link rel="stylesheet" type="text/css" href="picker.css">
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<script type="text/javascript" src="picker.js"></script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<body onLoad="startMeUp();">
<table cellpadding="0" cellspacing="0" style="margin-top:8px;margin-bottom:15px;clear:both;"><tr>
<!-- left -->
<td valign="top" style="width:324px;">



<div style="text-align:center">

<table cellpadding="0" cellspacing="0" width="302">
<tr>
<td align="left"><span style="font:bold 22px tahoma;"><span style="color:#2100B4;">
C</span><span style="color:#2B00A9;">o</span><span style="color:#36009F;">l</span><span style="color:#400094;">o</span><span style="color:#4B008A;">r</span><span style="color:#55007F;">P</span><span style="color:#600075;">i</span><span style="color:#6A006A;">c</span><span style="color:#750060;">k</span><span style="color:#7F0055;">e</span><span style="color:#8A004B;">r</span><span style="color:#940040;"> </span><span style="color:#9F0036;">

3</span><span style="color:#A9002B;">.</span><span style="color:#B40021;">1</span></span></td>
</tr>
</table>


<span class="getcolorlinks_red"><span class="getcolorlinks_red_label">&nbsp;Red:&nbsp;&nbsp;</span>
<a href="javascript:colorsOne('R','00');" class="getcolorlinks_r" id="R00">00</a>
<a href="javascript:colorsOne('R','11');" class="getcolorlinks_r" id="R11">11</a>
<a href="javascript:colorsOne('R','22');" class="getcolorlinks_r" id="R22">22</a>
<a href="javascript:colorsOne('R','33');" class="getcolorlinks_r" id="R33">33</a>

<a href="javascript:colorsOne('R','44');" class="getcolorlinks_r" id="R44">44</a>
<a href="javascript:colorsOne('R','55');" class="getcolorlinks_r" id="R55">55</a>
<a href="javascript:colorsOne('R','66');" class="getcolorlinks_r" id="R66">66</a>
<a href="javascript:colorsOne('R','77');" class="getcolorlinks_r" id="R77">77</a>
<a href="javascript:colorsOne('R','88');" class="getcolorlinks_r" id="R88">88</a>
<a href="javascript:colorsOne('R','99');" class="getcolorlinks_r" id="R99">99</a>
<a href="javascript:colorsOne('R','AA');" class="getcolorlinks_r" id="RAA">AA</a>
<a href="javascript:colorsOne('R','BB');" class="getcolorlinks_r" id="RBB">BB</a>
<a href="javascript:colorsOne('R','CC');" class="getcolorlinks_r" id="RCC">CC</a>

<a href="javascript:colorsOne('R','DD');" class="getcolorlinks_r" id="RDD">DD</a>
<a href="javascript:colorsOne('R','EE');" class="getcolorlinks_r" id="REE">EE</a>
<a href="javascript:colorsOne('R','FF');" class="getcolorlinks_r" id="RFF">FF</a>&nbsp;<br>
</span>
<span class="getcolorlinks_green"><span class="getcolorlinks_green_label">
&nbsp;Green:</span>
<a href="javascript:colorsOne('G','00');" class="getcolorlinks_g" id="G00">00</a>
<a href="javascript:colorsOne('G','11');" class="getcolorlinks_g" id="G11">11</a>
<a href="javascript:colorsOne('G','22');" class="getcolorlinks_g" id="G22">22</a>
<a href="javascript:colorsOne('G','33');" class="getcolorlinks_g" id="G33">33</a>

<a href="javascript:colorsOne('G','44');" class="getcolorlinks_g" id="G44">44</a>
<a href="javascript:colorsOne('G','55');" class="getcolorlinks_g" id="G55">55</a>
<a href="javascript:colorsOne('G','66');" class="getcolorlinks_g" id="G66">66</a>
<a href="javascript:colorsOne('G','77');" class="getcolorlinks_g" id="G77">77</a>
<a href="javascript:colorsOne('G','88');" class="getcolorlinks_g" id="G88">88</a>
<a href="javascript:colorsOne('G','99');" class="getcolorlinks_g" id="G99">99</a>
<a href="javascript:colorsOne('G','AA');" class="getcolorlinks_g" id="GAA">AA</a>
<a href="javascript:colorsOne('G','BB');" class="getcolorlinks_g" id="GBB">BB</a>
<a href="javascript:colorsOne('G','CC');" class="getcolorlinks_g" id="GCC">CC</a>

<a href="javascript:colorsOne('G','DD');" class="getcolorlinks_g" id="GDD">DD</a>
<a href="javascript:colorsOne('G','EE');" class="getcolorlinks_g" id="GEE">EE</a>
<a href="javascript:colorsOne('G','FF');" class="getcolorlinks_g" id="GFF">FF</a>&nbsp;<br>
</span>
<span class="getcolorlinks_blue"><span class="getcolorlinks_blue_label">&nbsp;Blue:&nbsp;</span>
<a href="javascript:colorsOne('B','00');" class="getcolorlinks_b" id="B00">00</a>
<a href="javascript:colorsOne('B','11');" class="getcolorlinks_b" id="B11">11</a>
<a href="javascript:colorsOne('B','22');" class="getcolorlinks_b" id="B22">22</a>
<a href="javascript:colorsOne('B','33');" class="getcolorlinks_b" id="B33">33</a>

<a href="javascript:colorsOne('B','44');" class="getcolorlinks_b" id="B44">44</a>
<a href="javascript:colorsOne('B','55');" class="getcolorlinks_b" id="B55">55</a>
<a href="javascript:colorsOne('B','66');" class="getcolorlinks_b" id="B66">66</a>
<a href="javascript:colorsOne('B','77');" class="getcolorlinks_b" id="B77">77</a>
<a href="javascript:colorsOne('B','88');" class="getcolorlinks_b" id="B88">88</a>
<a href="javascript:colorsOne('B','99');" class="getcolorlinks_b" id="B99">99</a>
<a href="javascript:colorsOne('B','AA');" class="getcolorlinks_b" id="BAA">AA</a>
<a href="javascript:colorsOne('B','BB');" class="getcolorlinks_b" id="BBB">BB</a>
<a href="javascript:colorsOne('B','CC');" class="getcolorlinks_b" id="BCC">CC</a>

<a href="javascript:colorsOne('B','DD');" class="getcolorlinks_b" id="BDD">DD</a>
<a href="javascript:colorsOne('B','EE');" class="getcolorlinks_b" id="BEE">EE</a>
<a href="javascript:colorsOne('B','FF');" class="getcolorlinks_b" id="BFF">FF</a>&nbsp;<br>
</span>



<table cellspacing="1" cellpadding="0" style="margin-top:6px;margin-bottom:0px;background-color:#444444;">
<tr>
<td class="colorchart" style="background-color:#330000" onClick="colorsAll('330000')" title="330000"></td>
<td class="colorchart" style="background-color:#333300" onClick="colorsAll('333300')" title="333300"></td>
<td class="colorchart" style="background-color:#336600" onClick="colorsAll('336600')" title="336600"></td>
<td class="colorchart" style="background-color:#339900" onClick="colorsAll('339900')" title="339900"></td>
<td class="colorchart" style="background-color:#33CC00" onClick="colorsAll('33CC00')" title="33CC00"></td>

<td class="colorchart" style="background-color:#33FF00" onClick="colorsAll('33FF00')" title="33FF00"></td>
<td class="colorchart" style="background-color:#66FF00" onClick="colorsAll('66FF00')" title="66FF00"></td>
<td class="colorchart" style="background-color:#66CC00" onClick="colorsAll('66CC00')" title="66CC00"></td>
<td class="colorchart" style="background-color:#669900" onClick="colorsAll('669900')" title="669900"></td>
<td class="colorchart" style="background-color:#666600" onClick="colorsAll('666600')" title="666600"></td>
<td class="colorchart" style="background-color:#663300" onClick="colorsAll('663300')" title="663300"></td>
<td class="colorchart" style="background-color:#660000" onClick="colorsAll('660000')" title="660000"></td>
<td class="colorchart" style="background-color:#FF0000" onClick="colorsAll('FF0000')" title="FF0000"></td>
<td class="colorchart" style="background-color:#FF3300" onClick="colorsAll('FF3300')" title="FF3300"></td>
<td class="colorchart" style="background-color:#FF6600" onClick="colorsAll('FF6600')" title="FF6600"></td>
<td class="colorchart" style="background-color:#FF9900" onClick="colorsAll('FF9900')" title="FF9900"></td>
<td class="colorchart" style="background-color:#FFCC00" onClick="colorsAll('FFCC00')" title="FFCC00"></td>
<td class="colorchart" style="background-color:#FFFF00" onClick="colorsAll('FFFF00')" title="FFFF00"></td>
</tr><tr>
<td class="colorchart" style="background-color:#330033" onClick="colorsAll('330033')" title="330033"></td>
<td class="colorchart" style="background-color:#333333" onClick="colorsAll('333333')" title="333333"></td>
<td class="colorchart" style="background-color:#336633" onClick="colorsAll('336633')" title="336633"></td>

<td class="colorchart" style="background-color:#339933" onClick="colorsAll('339933')" title="339933"></td>
<td class="colorchart" style="background-color:#33CC33" onClick="colorsAll('33CC33')" title="33CC33"></td>
<td class="colorchart" style="background-color:#33FF33" onClick="colorsAll('33FF33')" title="33FF33"></td>
<td class="colorchart" style="background-color:#66FF33" onClick="colorsAll('66FF33')" title="66FF33"></td>
<td class="colorchart" style="background-color:#66CC33" onClick="colorsAll('66CC33')" title="66CC33"></td>
<td class="colorchart" style="background-color:#669933" onClick="colorsAll('669933')" title="669933"></td>
<td class="colorchart" style="background-color:#666633" onClick="colorsAll('666633')" title="666633"></td>
<td class="colorchart" style="background-color:#663333" onClick="colorsAll('663333')" title="663333"></td>
<td class="colorchart" style="background-color:#660033" onClick="colorsAll('660033')" title="660033"></td>
<td class="colorchart" style="background-color:#FF0033" onClick="colorsAll('FF0033')" title="FF0033"></td>
<td class="colorchart" style="background-color:#FF3333" onClick="colorsAll('FF3333')" title="FF3333"></td>
<td class="colorchart" style="background-color:#FF6633" onClick="colorsAll('FF6633')" title="FF6633"></td>
<td class="colorchart" style="background-color:#FF9933" onClick="colorsAll('FF9933')" title="FF9933"></td>
<td class="colorchart" style="background-color:#FFCC33" onClick="colorsAll('FFCC33')" title="FFCC33"></td>
<td class="colorchart" style="background-color:#FFFF33" onClick="colorsAll('FFFF33')" title="FFFF33"></td>
</tr><tr>
<td class="colorchart" style="background-color:#330066" onClick="colorsAll('330066')" title="330066"></td>

<td class="colorchart" style="background-color:#333366" onClick="colorsAll('333366')" title="333366"></td>
<td class="colorchart" style="background-color:#336666" onClick="colorsAll('336666')" title="336666"></td>
<td class="colorchart" style="background-color:#339966" onClick="colorsAll('339966')" title="339966"></td>
<td class="colorchart" style="background-color:#33CC66" onClick="colorsAll('33CC66')" title="33CC66"></td>
<td class="colorchart" style="background-color:#33FF66" onClick="colorsAll('33FF66')" title="33FF66"></td>
<td class="colorchart" style="background-color:#66FF66" onClick="colorsAll('66FF66')" title="66FF66"></td>
<td class="colorchart" style="background-color:#66CC66" onClick="colorsAll('66CC66')" title="66CC66"></td>
<td class="colorchart" style="background-color:#669966" onClick="colorsAll('669966')" title="669966"></td>
<td class="colorchart" style="background-color:#666666" onClick="colorsAll('666666')" title="666666"></td>
<td class="colorchart" style="background-color:#663366" onClick="colorsAll('663366')" title="663366"></td>
<td class="colorchart" style="background-color:#660066" onClick="colorsAll('660066')" title="660066"></td>
<td class="colorchart" style="background-color:#FF0066" onClick="colorsAll('FF0066')" title="FF0066"></td>
<td class="colorchart" style="background-color:#FF3366" onClick="colorsAll('FF3366')" title="FF3366"></td>
<td class="colorchart" style="background-color:#FF6666" onClick="colorsAll('FF6666')" title="FF6666"></td>
<td class="colorchart" style="background-color:#FF9966" onClick="colorsAll('FF9966')" title="FF9966"></td>
<td class="colorchart" style="background-color:#FFCC66" onClick="colorsAll('FFCC66')" title="FFCC66"></td>
<td class="colorchart" style="background-color:#FFFF66" onClick="colorsAll('FFFF66')" title="FFFF66"></td>

</tr><tr>
<td class="colorchart" style="background-color:#330099" onClick="colorsAll('330099')" title="330099"></td>
<td class="colorchart" style="background-color:#333399" onClick="colorsAll('333399')" title="333399"></td>
<td class="colorchart" style="background-color:#336699" onClick="colorsAll('336699')" title="336699"></td>
<td class="colorchart" style="background-color:#339999" onClick="colorsAll('339999')" title="339999"></td>
<td class="colorchart" style="background-color:#33CC99" onClick="colorsAll('33CC99')" title="33CC99"></td>
<td class="colorchart" style="background-color:#33FF99" onClick="colorsAll('33FF99')" title="33FF99"></td>
<td class="colorchart" style="background-color:#66FF99" onClick="colorsAll('66FF99')" title="66FF99"></td>
<td class="colorchart" style="background-color:#66CC99" onClick="colorsAll('66CC99')" title="66CC99"></td>
<td class="colorchart" style="background-color:#669999" onClick="colorsAll('669999')" title="669999"></td>
<td class="colorchart" style="background-color:#666699" onClick="colorsAll('666699')" title="666699"></td>
<td class="colorchart" style="background-color:#663399" onClick="colorsAll('663399')" title="663399"></td>
<td class="colorchart" style="background-color:#660099" onClick="colorsAll('660099')" title="660099"></td>
<td class="colorchart" style="background-color:#FF0099" onClick="colorsAll('FF0099')" title="FF0099"></td>
<td class="colorchart" style="background-color:#FF3399" onClick="colorsAll('FF3399')" title="FF3399"></td>
<td class="colorchart" style="background-color:#FF6699" onClick="colorsAll('FF6699')" title="FF6699"></td>
<td class="colorchart" style="background-color:#FF9999" onClick="colorsAll('FF9999')" title="FF9999"></td>

<td class="colorchart" style="background-color:#FFCC99" onClick="colorsAll('FFCC99')" title="FFCC99"></td>
<td class="colorchart" style="background-color:#FFFF99" onClick="colorsAll('FFFF99')" title="FFFF99"></td>
</tr><tr>
<td class="colorchart" style="background-color:#3300CC" onClick="colorsAll('3300CC')" title="3300CC"></td>
<td class="colorchart" style="background-color:#3333CC" onClick="colorsAll('3333CC')" title="3333CC"></td>
<td class="colorchart" style="background-color:#3366CC" onClick="colorsAll('3366CC')" title="3366CC"></td>
<td class="colorchart" style="background-color:#3399CC" onClick="colorsAll('3399CC')" title="3399CC"></td>
<td class="colorchart" style="background-color:#33CCCC" onClick="colorsAll('33CCCC')" title="33CCCC"></td>
<td class="colorchart" style="background-color:#33FFCC" onClick="colorsAll('33FFCC')" title="33FFCC"></td>
<td class="colorchart" style="background-color:#66FFCC" onClick="colorsAll('66FFCC')" title="66FFCC"></td>
<td class="colorchart" style="background-color:#66CCCC" onClick="colorsAll('66CCCC')" title="66CCCC"></td>
<td class="colorchart" style="background-color:#6699CC" onClick="colorsAll('6699CC')" title="6699CC"></td>
<td class="colorchart" style="background-color:#6666CC" onClick="colorsAll('6666CC')" title="6666CC"></td>
<td class="colorchart" style="background-color:#6633CC" onClick="colorsAll('6633CC')" title="6633CC"></td>
<td class="colorchart" style="background-color:#6600CC" onClick="colorsAll('6600CC')" title="6600CC"></td>
<td class="colorchart" style="background-color:#FF00CC" onClick="colorsAll('FF00CC')" title="FF00CC"></td>
<td class="colorchart" style="background-color:#FF33CC" onClick="colorsAll('FF33CC')" title="FF33CC"></td>

<td class="colorchart" style="background-color:#FF66CC" onClick="colorsAll('FF66CC')" title="FF66CC"></td>
<td class="colorchart" style="background-color:#FF99CC" onClick="colorsAll('FF99CC')" title="FF99CC"></td>
<td class="colorchart" style="background-color:#FFCCCC" onClick="colorsAll('FFCCCC')" title="FFCCCC"></td>
<td class="colorchart" style="background-color:#FFFFCC" onClick="colorsAll('FFFFCC')" title="FFFFCC"></td>
</tr><tr>
<td class="colorchart" style="background-color:#3300FF" onClick="colorsAll('3300FF')" title="3300FF"></td>
<td class="colorchart" style="background-color:#3333FF" onClick="colorsAll('3333FF')" title="3333FF"></td>
<td class="colorchart" style="background-color:#3366FF" onClick="colorsAll('3366FF')" title="3366FF"></td>
<td class="colorchart" style="background-color:#3399FF" onClick="colorsAll('3399FF')" title="3399FF"></td>
<td class="colorchart" style="background-color:#33CCFF" onClick="colorsAll('33CCFF')" title="33CCFF"></td>
<td class="colorchart" style="background-color:#33FFFF" onClick="colorsAll('33FFFF')" title="33FFFF"></td>
<td class="colorchart" style="background-color:#66FFFF" onClick="colorsAll('66FFFF')" title="66FFFF"></td>
<td class="colorchart" style="background-color:#66CCFF" onClick="colorsAll('66CCFF')" title="66CCFF"></td>
<td class="colorchart" style="background-color:#6699FF" onClick="colorsAll('6699FF')" title="6699FF"></td>
<td class="colorchart" style="background-color:#6666FF" onClick="colorsAll('6666FF')" title="6666FF"></td>
<td class="colorchart" style="background-color:#6633FF" onClick="colorsAll('6633FF')" title="6633FF"></td>
<td class="colorchart" style="background-color:#6600FF" onClick="colorsAll('6600FF')" title="6600FF"></td>

<td class="colorchart" style="background-color:#FF00FF" onClick="colorsAll('FF00FF')" title="FF00FF"></td>
<td class="colorchart" style="background-color:#FF33FF" onClick="colorsAll('FF33FF')" title="FF33FF"></td>
<td class="colorchart" style="background-color:#FF66FF" onClick="colorsAll('FF66FF')" title="FF66FF"></td>
<td class="colorchart" style="background-color:#FF99FF" onClick="colorsAll('FF99FF')" title="FF99FF"></td>
<td class="colorchart" style="background-color:#FFCCFF" onClick="colorsAll('FFCCFF')" title="FFCCFF"></td>
<td class="colorchart" style="background-color:#FFFFFF" onClick="colorsAll('FFFFFF')" title="FFFFFF"></td>
</tr><tr>
<td class="colorchart" style="background-color:#0000FF" onClick="colorsAll('0000FF')" title="0000FF"></td>
<td class="colorchart" style="background-color:#0033FF" onClick="colorsAll('0033FF')" title="0033FF"></td>
<td class="colorchart" style="background-color:#0066FF" onClick="colorsAll('0066FF')" title="0066FF"></td>
<td class="colorchart" style="background-color:#0099FF" onClick="colorsAll('0099FF')" title="0099FF"></td>
<td class="colorchart" style="background-color:#00CCFF" onClick="colorsAll('00CCFF')" title="00CCFF"></td>
<td class="colorchart" style="background-color:#00FFFF" onClick="colorsAll('00FFFF')" title="00FFFF"></td>
<td class="colorchart" style="background-color:#99FFFF" onClick="colorsAll('99FFFF')" title="99FFFF"></td>
<td class="colorchart" style="background-color:#99CCFF" onClick="colorsAll('99CCFF')" title="99CCFF"></td>
<td class="colorchart" style="background-color:#9999FF" onClick="colorsAll('9999FF')" title="9999FF"></td>
<td class="colorchart" style="background-color:#9966FF" onClick="colorsAll('9966FF')" title="9966FF"></td>

<td class="colorchart" style="background-color:#9933FF" onClick="colorsAll('9933FF')" title="9933FF"></td>
<td class="colorchart" style="background-color:#9900FF" onClick="colorsAll('9900FF')" title="9900FF"></td>
<td class="colorchart" style="background-color:#CC00FF" onClick="colorsAll('CC00FF')" title="CC00FF"></td>
<td class="colorchart" style="background-color:#CC33FF" onClick="colorsAll('CC33FF')" title="CC33FF"></td>
<td class="colorchart" style="background-color:#CC66FF" onClick="colorsAll('CC66FF')" title="CC66FF"></td>
<td class="colorchart" style="background-color:#CC99FF" onClick="colorsAll('CC99FF')" title="CC99FF"></td>
<td class="colorchart" style="background-color:#CCCCFF" onClick="colorsAll('CCCCFF')" title="CCCCFF"></td>
<td class="colorchart" style="background-color:#CCFFFF" onClick="colorsAll('CCFFFF')" title="CCFFFF"></td>
</tr><tr>
<td class="colorchart" style="background-color:#0000CC" onClick="colorsAll('0000CC')" title="0000CC"></td>
<td class="colorchart" style="background-color:#0033CC" onClick="colorsAll('0033CC')" title="0033CC"></td>
<td class="colorchart" style="background-color:#0066CC" onClick="colorsAll('0066CC')" title="0066CC"></td>
<td class="colorchart" style="background-color:#0099CC" onClick="colorsAll('0099CC')" title="0099CC"></td>
<td class="colorchart" style="background-color:#00CCCC" onClick="colorsAll('00CCCC')" title="00CCCC"></td>
<td class="colorchart" style="background-color:#00FFCC" onClick="colorsAll('00FFCC')" title="00FFCC"></td>
<td class="colorchart" style="background-color:#99FFCC" onClick="colorsAll('99FFCC')" title="99FFCC"></td>
<td class="colorchart" style="background-color:#99CCCC" onClick="colorsAll('99CCCC')" title="99CCCC"></td>

<td class="colorchart" style="background-color:#9999CC" onClick="colorsAll('9999CC')" title="9999CC"></td>
<td class="colorchart" style="background-color:#9966CC" onClick="colorsAll('9966CC')" title="9966CC"></td>
<td class="colorchart" style="background-color:#9933CC" onClick="colorsAll('9933CC')" title="9933CC"></td>
<td class="colorchart" style="background-color:#9900CC" onClick="colorsAll('9900CC')" title="9900CC"></td>
<td class="colorchart" style="background-color:#CC00CC" onClick="colorsAll('CC00CC')" title="CC00CC"></td>
<td class="colorchart" style="background-color:#CC33CC" onClick="colorsAll('CC33CC')" title="CC33CC"></td>
<td class="colorchart" style="background-color:#CC66CC" onClick="colorsAll('CC66CC')" title="CC66CC"></td>
<td class="colorchart" style="background-color:#CC99CC" onClick="colorsAll('CC99CC')" title="CC99CC"></td>
<td class="colorchart" style="background-color:#CCCCCC" onClick="colorsAll('CCCCCC')" title="CCCCCC"></td>
<td class="colorchart" style="background-color:#CCFFCC" onClick="colorsAll('CCFFCC')" title="CCFFCC"></td>
</tr><tr>
<td class="colorchart" style="background-color:#000099" onClick="colorsAll('000099')" title="000099"></td>
<td class="colorchart" style="background-color:#003399" onClick="colorsAll('003399')" title="003399"></td>
<td class="colorchart" style="background-color:#006699" onClick="colorsAll('006699')" title="006699"></td>
<td class="colorchart" style="background-color:#009999" onClick="colorsAll('009999')" title="009999"></td>
<td class="colorchart" style="background-color:#00CC99" onClick="colorsAll('00CC99')" title="00CC99"></td>
<td class="colorchart" style="background-color:#00FF99" onClick="colorsAll('00FF99')" title="00FF99"></td>

<td class="colorchart" style="background-color:#99FF99" onClick="colorsAll('99FF99')" title="99FF99"></td>
<td class="colorchart" style="background-color:#99CC99" onClick="colorsAll('99CC99')" title="99CC99"></td>
<td class="colorchart" style="background-color:#999999" onClick="colorsAll('999999')" title="999999"></td>
<td class="colorchart" style="background-color:#996699" onClick="colorsAll('996699')" title="996699"></td>
<td class="colorchart" style="background-color:#993399" onClick="colorsAll('993399')" title="993399"></td>
<td class="colorchart" style="background-color:#990099" onClick="colorsAll('990099')" title="990099"></td>
<td class="colorchart" style="background-color:#CC0099" onClick="colorsAll('CC0099')" title="CC0099"></td>
<td class="colorchart" style="background-color:#CC3399" onClick="colorsAll('CC3399')" title="CC3399"></td>
<td class="colorchart" style="background-color:#CC6699" onClick="colorsAll('CC6699')" title="CC6699"></td>
<td class="colorchart" style="background-color:#CC9999" onClick="colorsAll('CC9999')" title="CC9999"></td>
<td class="colorchart" style="background-color:#CCCC99" onClick="colorsAll('CCCC99')" title="CCCC99"></td>
<td class="colorchart" style="background-color:#CCFF99" onClick="colorsAll('CCFF99')" title="CCFF99"></td>
</tr><tr>
<td class="colorchart" style="background-color:#000066" onClick="colorsAll('000066')" title="000066"></td>
<td class="colorchart" style="background-color:#003366" onClick="colorsAll('003366')" title="003366"></td>
<td class="colorchart" style="background-color:#006666" onClick="colorsAll('006666')" title="006666"></td>
<td class="colorchart" style="background-color:#009966" onClick="colorsAll('009966')" title="009966"></td>

<td class="colorchart" style="background-color:#00CC66" onClick="colorsAll('00CC66')" title="00CC66"></td>
<td class="colorchart" style="background-color:#00FF66" onClick="colorsAll('00FF66')" title="00FF66"></td>
<td class="colorchart" style="background-color:#99FF66" onClick="colorsAll('99FF66')" title="99FF66"></td>
<td class="colorchart" style="background-color:#99CC66" onClick="colorsAll('99CC66')" title="99CC66"></td>
<td class="colorchart" style="background-color:#999966" onClick="colorsAll('999966')" title="999966"></td>
<td class="colorchart" style="background-color:#996666" onClick="colorsAll('996666')" title="996666"></td>
<td class="colorchart" style="background-color:#993366" onClick="colorsAll('993366')" title="993366"></td>
<td class="colorchart" style="background-color:#990066" onClick="colorsAll('990066')" title="990066"></td>
<td class="colorchart" style="background-color:#CC0066" onClick="colorsAll('CC0066')" title="CC0066"></td>
<td class="colorchart" style="background-color:#CC3366" onClick="colorsAll('CC3366')" title="CC3366"></td>
<td class="colorchart" style="background-color:#CC6666" onClick="colorsAll('CC6666')" title="CC6666"></td>
<td class="colorchart" style="background-color:#CC9966" onClick="colorsAll('CC9966')" title="CC9966"></td>
<td class="colorchart" style="background-color:#CCCC66" onClick="colorsAll('CCCC66')" title="CCCC66"></td>
<td class="colorchart" style="background-color:#CCFF66" onClick="colorsAll('CCFF66')" title="CCFF66"></td>
</tr><tr>
<td class="colorchart" style="background-color:#000033" onClick="colorsAll('000033')" title="000033"></td>
<td class="colorchart" style="background-color:#003333" onClick="colorsAll('003333')" title="003333"></td>

<td class="colorchart" style="background-color:#006633" onClick="colorsAll('006633')" title="006633"></td>
<td class="colorchart" style="background-color:#009933" onClick="colorsAll('009933')" title="009933"></td>
<td class="colorchart" style="background-color:#00CC33" onClick="colorsAll('00CC33')" title="00CC33"></td>
<td class="colorchart" style="background-color:#00FF33" onClick="colorsAll('00FF33')" title="00FF33"></td>
<td class="colorchart" style="background-color:#99FF33" onClick="colorsAll('99FF33')" title="99FF33"></td>
<td class="colorchart" style="background-color:#99CC33" onClick="colorsAll('99CC33')" title="99CC33"></td>
<td class="colorchart" style="background-color:#999933" onClick="colorsAll('999933')" title="999933"></td>
<td class="colorchart" style="background-color:#996633" onClick="colorsAll('996633')" title="996633"></td>
<td class="colorchart" style="background-color:#993333" onClick="colorsAll('993333')" title="993333"></td>
<td class="colorchart" style="background-color:#990033" onClick="colorsAll('990033')" title="990033"></td>
<td class="colorchart" style="background-color:#CC0033" onClick="colorsAll('CC0033')" title="CC0033"></td>
<td class="colorchart" style="background-color:#CC3333" onClick="colorsAll('CC3333')" title="CC3333"></td>
<td class="colorchart" style="background-color:#CC6633" onClick="colorsAll('CC6633')" title="CC6633"></td>
<td class="colorchart" style="background-color:#CC9933" onClick="colorsAll('CC9933')" title="CC9933"></td>
<td class="colorchart" style="background-color:#CCCC33" onClick="colorsAll('CCCC33')" title="CCCC33"></td>
<td class="colorchart" style="background-color:#CCFF33" onClick="colorsAll('CCFF33')" title="CCFF33"></td>
</tr><tr>

<td class="colorchart" style="background-color:#000000" onClick="colorsAll('000000')" title="000000"></td>
<td class="colorchart" style="background-color:#003300" onClick="colorsAll('003300')" title="003300"></td>
<td class="colorchart" style="background-color:#006600" onClick="colorsAll('006600')" title="006600"></td>
<td class="colorchart" style="background-color:#009900" onClick="colorsAll('009900')" title="009900"></td>
<td class="colorchart" style="background-color:#00CC00" onClick="colorsAll('00CC00')" title="00CC00"></td>
<td class="colorchart" style="background-color:#00FF00" onClick="colorsAll('00FF00')" title="00FF00"></td>
<td class="colorchart" style="background-color:#99FF00" onClick="colorsAll('99FF00')" title="99FF00"></td>
<td class="colorchart" style="background-color:#99CC00" onClick="colorsAll('99CC00')" title="99CC00"></td>
<td class="colorchart" style="background-color:#999900" onClick="colorsAll('999900')" title="999900"></td>
<td class="colorchart" style="background-color:#996600" onClick="colorsAll('996600')" title="996600"></td>
<td class="colorchart" style="background-color:#993300" onClick="colorsAll('993300')" title="993300"></td>
<td class="colorchart" style="background-color:#990000" onClick="colorsAll('990000')" title="990000"></td>
<td class="colorchart" style="background-color:#CC0000" onClick="colorsAll('CC0000')" title="CC0000"></td>
<td class="colorchart" style="background-color:#CC3300" onClick="colorsAll('CC3300')" title="CC3300"></td>
<td class="colorchart" style="background-color:#CC6600" onClick="colorsAll('CC6600')" title="CC6600"></td>
<td class="colorchart" style="background-color:#CC9900" onClick="colorsAll('CC9900')" title="CC9900"></td>
<td class="colorchart" style="background-color:#CCCC00" onClick="colorsAll('CCCC00')" title="CCCC00"></td>

<td class="colorchart" style="background-color:#CCFF00" onClick="colorsAll('CCFF00')" title="CCFF00"></td>
</tr><tr>
<td class="colorchart" style="background-color:#000000" onClick="colorsAll('000000')" title="000000"></td>
<td class="colorchart" style="background-color:#111111" onClick="colorsAll('111111')" title="111111"></td>
<td class="colorchart" style="background-color:#222222" onClick="colorsAll('222222')" title="222222"></td>
<td class="colorchart" style="background-color:#333333" onClick="colorsAll('333333')" title="333333"></td>
<td class="colorchart" style="background-color:#444444" onClick="colorsAll('444444')" title="444444"></td>
<td class="colorchart" style="background-color:#555555" onClick="colorsAll('555555')" title="555555"></td>
<td class="colorchart" style="background-color:#666666" onClick="colorsAll('666666')" title="666666"></td>
<td class="colorchart" style="background-color:#777777" onClick="colorsAll('777777')" title="777777"></td>
<td class="colorchart" style="background-color:#888888" onClick="colorsAll('888888')" title="888888"></td>
<td class="colorchart" style="background-color:#999999" onClick="colorsAll('999999')" title="999999"></td>
<td class="colorchart" style="background-color:#AAAAAA" onClick="colorsAll('AAAAAA')" title="AAAAAA"></td>
<td class="colorchart" style="background-color:#BBBBBB" onClick="colorsAll('BBBBBB')" title="BBBBBB"></td>
<td class="colorchart" style="background-color:#CCCCCC" onClick="colorsAll('CCCCCC')" title="CCCCCC"></td>
<td class="colorchart" style="background-color:#DDDDDD" onClick="colorsAll('DDDDDD')" title="DDDDDD"></td>
<td class="colorchart" style="background-color:#EEEEEE" onClick="colorsAll('EEEEEE')" title="EEEEEE"></td>

<td class="colorchart" style="background-color:#FFFFFF" onClick="colorsAll('FFFFFF')" title="FFFFFF"></td>
<td class="colorchart" style="background-color:#444444"></td>
<td class="colorchart" style="background-color:#444444"></td>
</tr>
</table>

</div>


<div style="text-align:center">

<form name="pickerform" style="margin:0" action="">

<table style="font:normal 12px verdana" cellpadding="0" cellspacing="0">

<tr>
<td align="left"><input type="radio" name="chooser" onClick="chooserMode('text')">Text:<input type="text" class="colorbox" readonly name="colorbox_text">&nbsp;&nbsp;</td>

<td align="left"><input type="radio" name="chooser" onClick="chooserMode('back')" checked>Background:<input type="text" class="colorbox" readonly name="colorbox_back"></td>
</tr>

<tr>
<td align="left"><input type="radio" name="chooser" onClick="chooserMode('link')">Link:<input type="text" class="colorbox" readonly name="colorbox_link"></td>
<td align="left"><input type="radio" name=chooser onClick="chooserMode('vlink')">Visited 
Link:<input type="text" class="colorbox" readonly name="colorbox_vlink"></td>
</tr>

<tr>
<td align="left"><input type="radio" name="chooser" onClick="chooserMode('hover')">Hover:<input type="text" class="colorbox" readonly name="colorbox_hover"></td>
<td align="left"><input type="radio" name="chooser" onClick="chooserMode('alink')">Active 
Link:<input type="text" class="colorbox" readonly name="colorbox_alink"></td>
</tr>

<!--line--><tr><td colspan="2" style="height:1px;background-color:#bbbbbb;"></td></tr>

<tr>
<td colspan="2" align="center" style="padding-top:5px;padding-bottom:5px;">
Background image (optional) <span class="backhelp" onClick="backHelp();">?</span><br><input type="text" class="bgimagebox" name="bgimage"><input type="button" class="bgimagebtn" value="Set" onClick="doBGImage()"></td>
</tr>

<!--line--><tr><td colspan="2" style="height:1px;background-color:#bbbbbb;"></td></tr>

<tr>
<td colspan="2" align="center" style="padding-top:5px;padding-bottom:5px;">
Font/Size:
<select style="font:normal 12px verdana;" onChange="doFontFamily(this.options[this.selectedIndex].value)">
<option value="default">[default]

<option value="Arial,sans-serif">Arial
<option value="Arial Black,sans-serif">Arial Black
<option value="Arial Narrow,sans-serif">Arial Narrow
<option value="Bookman Old Style,serif">Bookman Old Style
<option value="Century Gothic,sans-serif">Century Gothic
<option value="Comic Sans MS,sans-serif">Comic Sans MS
<option value="Courier New,monospace">Courier New
<option value="Georgia,serif">Georgia
<option value="Impact,sans-serif">Impact
<option value="Lucida Console,monospace">Lucida Console
<option value="Tahoma,sans-serif">Tahoma
<option value="Times New Roman,serif">Times New Roman
<option value="Trebuchet MS,sans-serif">Trebuchet MS
<option value="Verdana,sans-serif">Verdana
</select>
<select style="font:normal 12px verdana;" onChange="doFontSize(this.options[this.selectedIndex].value)">
<option value="default" selected>--

<option value="8">8
<option value="9">9
<option value="10">10
<option value="11">11
<option value="12">12
<option value="13">13
<option value="14">14
<option value="15">15
<option value="16">16
<option value="17">17
<option value="18">18
<option value="19">19
<option value="20">20
<option value="22">22
<option value="24">24
<option value="26">26
<option value="28">28

<option value="30">30

</select>
</td>
</tr>

<!--line--><tr><td colspan="2" style="height:1px;background-color:#bbbbbb;"></td></tr>

<tr>
<td colspan="2" align="center">
<input type="checkbox" name="boldbox" onClick="doBold()"><b>Bold</b>&nbsp;&nbsp;&nbsp;
<input type="checkbox" name="italicbox" onClick="doItalic()"><i>Italic</i>&nbsp;&nbsp;&nbsp;
<input type="checkbox" name="underlinelinksbox" onClick="doUnderlineLinks()" checked><span style="text-decoration:underline;">Underline</span> 
links
</td>

</tr>

<!--line--><tr><td colspan="2" style="height:1px;background-color:#bbbbbb;"></td></tr>

</table>


</form>

</div>






<div style="font:normal 10px verdana;margin:16px;">

&nbsp;<br>
To choose a color, you can click on the color chart, or the Red, Green or Blue 
bars at the top. The chart contains 216 separate colors along with a gray scale. 
With the bars you have 4096 different color combinations possible. When using 
the bars, keep in mind that towards the right is brighter/more color and towards 
the left is darker/less color.<br>
&nbsp;<br>
Change the font and font size if you wish, along with rendering <b>bold</b> and <i>
italic</i>. You can also enter the URL of a background image or choose not to 
underline links.<br>
&nbsp;<br>
When you&#39;re done you can copy the style sheet info and paste it into the head 
tag of your page... or just use the simple body tag that&#39;s generated. (Note the 
hover color cannot be done with body tag attributes.)<br>

&nbsp;<br>
All in all it&#39;s fairly easy to use. If you&#39;re a little lost, just play with it 
for a while and all will be clear. And, if you&#39;d like a little background on 
&quot;hex codes&quot;, what they are and where they come from, <a href="http://www.pagetutor.com/colorpicker/about_hex.html">
click here</a>.<br>
&nbsp;<br>
And, if you&#39;d like your own personal ColorPicker that you can use offline, 
you&#39;ll find one <a href="http://www.pagetutor.com/downloads/colorpicker.html">
right here</a>.<br>

</div>

</td>















<!-- right -->
<td id="rightcell" valign="top" style="border:solid 1px #bbbbbb;padding:10px 20px 0px 20px;">

<span style="font-size:22pt" id="heading">Testing Site:</span>


<noscript>
<div style="background-color:#ee0000;color:#ffffff;padding:16px"><b>Houston, we have a problem... it would seem that your browser has Javascript disabled. Without Javascript, this ColorPicker won't do much of anything.</b></div>
</noscript>

<hr>
<!-- pt_inline_ad_end -->

<div id="allspans" style="font-size:12pt;">

<span id="text">This is text<br>Now is the time for all good men to come to the 
aid of their country. And here is a <span id="link2" style="text-decoration:underline;cursor:pointer;" onMouseOver="liteLinkOn('link2')" onMouseOut="liteLinkOff('link2')">
link</span> embedded in some text so you can better see how it will look.</span><br>
&nbsp;<br>
<span id="link" style="text-decoration:underline;cursor:pointer;" onMouseOver="liteLinkOn('link')" onMouseOut="liteLinkOff('link')">
This is a link</span><br>
&nbsp;<br>
<span id="vlink" style="text-decoration:underline;cursor:pointer;" onMouseOver="liteLinkOn('vlink')" onMouseOut="liteLinkOff('vlink')">
This is a visited link</span><br>
&nbsp;<br>
<span id="alink" style="text-decoration:underline;cursor:pointer;" onMouseOver="liteLinkOn('alink')" onMouseOut="liteLinkOff('alink')">

This is an active link</span><br>
&nbsp;<br>
<span id="hover" style="text-decoration:underline;">This is the hover color</span><br>
&nbsp;<br>

</div>

<hr>

<div id="stylecode">

</div>

</td>
</tr>


</table>
</body>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->