« »

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

Free iPage Web Hosting for First Year NOW

If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?

Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage. Try iPage for FREE First Year NOW

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
	-->

Comment (0)
Write

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
~~Your site~~

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (0)
New

BBCode
HTML
URL
JID

https://tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools

chatGPTaz
Voice chat comning soon. You could talk to ChatGPT and hear the most intelligent AI speaks very soon

Cool Domains for Sale!

choose.works ApexBTC.com system.money CoinHolo.com Card.rip this.bid index.services CreditCard.rip eChainBank.com choose.exchange CryptoKD.com YeuNu.com pornID.net ChainTutor.com war.money ChatTotal.com ABP3.com CTRCoin.com ZWVQ.com XMQV.com

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

30/10/2007
Joe Barta [more]
3,308
0
0
0
39.35 KBytes

JavaScript ColorPicker 3.1

0/5 0 votes / 3,308 previews / 0 comment 30/10/2007 This color picker will help you fine tune the hex color codes for your web page. First choose whether you wish to play w...JavaScript ColorPicker 3.1 - ColorPicker 3.1

chuotxxx minhchanhs hait1 MrHot hungvt

Let's be first member to do this

chenzenvl hungvt