Select color from pallete

You can use this free javascript as the color picker from color palette/chart by clicking any colour in the palette, hexadecimal value can also be known for each selected colours. It is easy to select colors from the palette chart/table.

Features

Move the mouse over the button near the Color picker
You will get a color table / chart.
Just select any colour you want in the palette.
Now you can have the Hexadecimal value for the selected colour in the textarea.

Preview

Selecting the colours using colour palette:

Downloads

Javascript Code

<script type="text/javascript">
var mouse="out";
var bName = navigator.appName;
var bVer = parseInt(navigator.appVersion);
var IE4 = (bName == "Microsoft Internet Explorer" && bVer >= 4);
var click="no";
var ghex="empty";
var timer;
function findPosX(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}
function findPosY(obj)
{
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}
function showtab(e,n)
{
sc=n;
var buta = document.getElementById('cv');
var posx = findPosX(buta);
var posy = findPosY(buta);
var tabid = document.getElementById('tb');

tabid.style.display = "block";
tabid.style.position = "absolute";
tabid.style.left = posx+5;
tabid.style.top = posy+25;
if(timer)clearTimeout(timer);
}
function showval(gg,rr,bb)
{
mouse="in";
click="no";
var hexid = document.getElementById('hx');
var hval=""+deciToHex(gg)+deciToHex(rr)+deciToHex(bb);
hexid.value=hval;
var dispid = document.getElementById('cv');
dispid.style.backgroundColor="#"+hval;
}
function clicked(gg,rr,bb)
{
mouse="in";
click="yes";
var hexid = document.getElementById('hx');
var hval=""+deciToHex(gg)+deciToHex(rr)+deciToHex(bb);
hexid.value=hval;
var dispid = document.getElementById('cv');
dispid.style.backgroundColor="#"+hval;
var tabid = document.getElementById('tb');
tabid.style.display = "none";
ghex=hexid.value;
}
function deltab()
{
timer = setTimeout('blotab()',500);
}
function deltaba()
{
mouse = "out";
timer = setTimeout('blotab()',500);
}
function blotab()
{
if(mouse=="out" && click=="no")
{
var tabid = document.getElementById('tb');
tabid.style.display = "none";
var hexid = document.getElementById('hx');
hexid.value="FF33CC";
var dispid = document.getElementById('cv');
dispid.style.backgroundColor="#FF33CC";
}
if(mouse=="out" && click=="yes")
{
var tabid = document.getElementById('tb');
tabid.style.display = "none";
var hexid = document.getElementById('hx').value;
var gg = hexid.substr(0,2);
var rr = hexid.substr(2,2);
var bb = hexid.substr(4,2);
var hval=""+deciToHex(gg)+deciToHex(rr)+deciToHex(bb);
var dispid = document.getElementById('cv');
dispid.style.backgroundColor="#"+hval;
}
if(mouse=="out" && click=="no" && ghex != "empty")
{
var tabid = document.getElementById('tb');
tabid.style.display = "none";
var hexid = document.getElementById('hx');
hexid.value=ghex;
var dispid = document.getElementById('cv');
dispid.style.backgroundColor="#"+ghex;
}
}
function getHexNum(num)
{
ar1 = new Array('0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15');
ar2 = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F');
if(num > 15)
return num;
else
{
red = ar2[num];
return red;
}
}
function deciToHex(arg)
{
var res2 = 999;
args = arg;
while(args>15)
{
arg1=parseInt(args/16);
arg2=args%16;
arg2=getHexNum(arg2);
args=arg1;
if(res2 == 999)
res2=arg2.toString();
else
res2=arg2.toString()+res2.toString();
}
if(args < 16 && res2 != 999)
{
def = getHexNum(args);
res2=def+res2.toString();
}
else if(res2 == 999)
{
if(args < 16)
res2= getHexNum(args);
else
res2= 1;
}
if(res2.length == 1)
res2 = "0"+res2;
return res2;
}
</script>

HTML Code

<form name=colorform>
Hex Value: #<input name=hexval id=hx value=FF33CC size=7></input><br><br>
Color Viewer: <input type=button size=20 value="
" name=disp id=cv readonly onmouseover="showtab(event)"
onmouseout="deltab()" style="background-color:#FF33CC;"></input><br><br>
<div id=tb style="position: absolute;top: 560px; left: 220px; ; display: none;" onmouseout="deltaba()">
<table cellpadding=2 cellspacing=0 style="border: 1px black;">
<script type="text/javascript">
for(i=0;i<256;i+=85){
document.write("<tr style=\"border: 1px black;\">");
for(j=0;j<256;j=j+51)
{
for(k=0;k<256;k=k+25.5)
{
var ii = Math.round(i);
var jj = Math.round(j);
var kk = Math.round(k);
if(ii == 255 && jj == 255 && kk == 255)
{
document.write("<td onmouseover='showval("+ii+","+jj+","+kk+")' \
onclick='clicked("+ii+","+jj+","+kk+")' style='border: 0px solid black; width:8px; height: 8px; background-color: rgb("+ii+","+jj+","+kk+");'> \
<a href=https://www.hscripts.com style='text-decoration: none; \
font-family: arial, verdana, san-serif; color: blue; font-size: 10px;'>H</a></td>");
}else{

document.write("<td onmouseover='showval("+ii+","+jj+","+kk+")' \
onclick='clicked("+ii+","+jj+","+kk+")' style=\"border: 0px solid black; width:8px; height: 8px; \
font-size: 5px; background-color: rgb("+ii+","+jj+","+kk+");\""+"> </td>");
}
}
document.write("</tr><tr>");
}
document.write("</tr>");
}
</script>
</table>
</div>
</form>

Release Date - 27-8-2007
Get free version without ©copyright link for just $10/-
For customization of this script or any script development, mail to support@hscripts.com

Usage

Just follow the below instructions and make use of it to have DHTML web Color Picker.

In your html file, just copy and paste the javascript code given above in your header section.
For the display part, just copy the html code and paste it.
You can also have textarea and a button in your screen. On mouseover the button, the palette will be displayed. Select the color on the palette to have the appropriate web color code or hexadecimal value.
The web color picker tool is much used while designing the web pages.