Color Picker Using Javascript for your website

Please copy paste and create the javascrip, css files and call those in your page header. Download images and place it in the right folder.

picker.css

.picker_layer {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
background-color: #d4d0c8;
border-width: 1px;
border-style: solid;
border-color: #666666;
overflow: visible;
height: auto;
width: auto;
}
.picker_buttons {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color:#d4d0c8;
border-style:solid;
border-color:#666666;
border-width:1px;
padding:1px;
cursor:pointer;
color:#000000;
}
.cell_color {
cursor:pointer;
width:9px;
height:9px;
}
.color_table {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
}
.choosed_color_cell{
border-style:solid; border-color:#000000; border-width:1px;
}
.default_color_btn{
width:17px; height:17px; background-image:url(defaultcolor.jpg);
background-repeat:no-repeat; background-position:center;
}

picker.js

// JavaScript Document
var layerWidth = 218;
var layerHeight = 144;
var currentId = "";
var orgColor ="";
var onPick = undefined;
var onCancel = undefined;
function openPicker(id, _onPick, _onCancel) {
   if (_onPick) {
       onPick = _onPick;
   }
   if (_onCancel) {
       onCancel = _onCancel;
    }
   currentId = id;
   removeLayer("picker");
   Obj = document.getElementById(id);

   orgColor = Obj.value;
   createLayer("picker",findPosX(Obj)+Obj.offsetWidth+20,findPosY(Obj));
}

function createLayer(id,left,top){
   var width = layerWidth;
   var height = layerHeight;
   var zindex = 1000;
   var bgcolor = "#d4d0c8";
   var txtcolor = "#000000";
   var msg = getPickerContent();
   if (document.layers) {
       if (document.layers[id]) {
           return;
       }
       var layer=document.layers[id]=new Layer(width);
       layer.className = "picker_layer";
       layer.name = id;
       layer.left=left;
       layer.top=top;
       layer.clip.height=height;
       layer.visibility = 'show';
       layer.zIndex=zindex;
       layer.bgColor=bgcolor;
       layer.innerHTML = msg;
   }else if (document.all) {
       if (document.all[id]) {
           return
       }
       var layer= '\n<DIV class="picker_layer" id='+id+' style="position:absolute'
       +'; left:'+left+"px"
       +'; top:'+top+"px"
       +'; width:'+width
       +'; height:'+height
       +'; visibility:visible'
       +'; z-index:'+zindex
       +';text-align:left">'
       + msg
       +'</DIV>';
       document.body.insertAdjacentHTML("BeforeEnd",layer);
   }else if(document.getElementById){
       var layer = document.createElement ('div');
       layer.setAttribute ('id', id);
       document.body.appendChild (layer);
       var ly = document.getElementById(id);
       ly.className = "picker_layer";
       ly.style.position= "absolute";
       ly.style.left= left+"px";
       ly.style.top= top+ "px";
       ly.style.width= width+ "px";
       ly.style.height= height+ "px";
       ly.style.textAlign= "left";
       ly.innerHTML = msg;
   }
}
function showClr(color){
   Obj = document.getElementById(currentId);
   Obj.value = color;
   Obj.style.backgroundColor=color;
   Obj = document.getElementById("gcpicker_colorSample");
   Obj.style.backgroundColor=color;
   Obj = document.getElementById("gcpicker_colorCode");
   Obj.innerHTML = color;

}
function setClr(color){
   Obj = document.getElementById(currentId);
   Obj.value = color;
   Obj.style.backgroundColor=color;
   currentId = "";
   removeLayer("picker");
   if (onPick) {
       onPick();
    }
}
function cancel(){
   Obj = document.getElementById(currentId);
   Obj.value = orgColor;
   Obj.style.backgroundColor=orgColor;
   removeLayer("picker");
    if (onCancel) {
       onCancel();
    }
}
function removeLayer(id){
   if(document.getElementById(id) ==null){
       return;
   }
   if (document.layers && document.layers[id]) {
       document.layers[id].visibility='hide'
       delete document.layers[id]
   }
   if (document.all && document.all[id]) {
       document.all[id].innerHTML=''
       document.all[id].outerHTML=''
   }else if(document.getElementById){
       var b = document.body;
        var layer = document.getElementById(id);
      b.removeChild(layer);
   }
}
function getPickerContent(){
   var content =    '<table width="222" border="0" cellpadding="0" cellspacing="1"><tr><td>';
   content += '<table width="100%" border="0" cellpadding="0" cellspacing="1" class="color_table"><tr><td bgcolor="#CCCCCC" id="gcpicker_colorSample" width="40px" class="choosed_color_cell"> </td><td align="center"><div id="gcpicker_colorCode">#CCCCCC</div></td><td width="60px" align="center"><input type="submit" value="" onclick="cancel()" class="default_color_btn" /></td></tr></table>';
   content += '</td></tr><tr><td>';
   content += colorTable()+'</td></tr></table>';
   return content;
}
function colorTable(){
   var clrfix = Array("#000000","#333333","#666666","#999999","#cccccc","#ffffff","#ff0000","#00ff00","#0000ff","#ffff00","#00ffff","#ff00ff");
   var table ='<table border="0" cellpadding="0" cellspacing="0" bgcolor="#000000"><tr>';
   table += '';
   for(var j=0;j<3;j++){
       table += '<td width="11"><table bgcolor="#000000" border="0" cellpadding="0" cellspacing="1" class="color_table">';
       for(var i=0;i<12;i++){
           var clr ='#000000';
           if(j==1){
               clr = clrfix[i];
           }
           table += '<tr><td bgcolor="'+clr+'" class="cell_color" onmouseover="showClr('+"'"+clr+"'"+')" onclick="setClr('+"'"+clr+"'"+')"></td></tr>';
       }
       table += '</table></td>';
   }
   table +='<td><table border="0" cellpadding="0" cellspacing="0">';
   for (var c = 0; c<6; c++) {
       if(c==0 || c==3){
           table +="<tr>";
       }
       table += "<td>"

       table = table+'<table border="0" cellpadding="0" cellspacing="1" class="color_table"> ';
       for (var j = 0; j<6; j++) {
           table +="<tr>";
           for (var i = 0; i<6; i++) {
               var clrhex = rgb2hex(j*255/5,i*255/5,c*255/5);
               table += '<td bgcolor="'+clrhex+'" class="cell_color" onmouseover="showClr('+"'"+clrhex+"'"+')" onclick="setClr('+"'"+clrhex+"'"+')"></td>';
           }
           table +="</tr>";
       }
       table +="</table>";
       table += "</td>"
       if(c==2 || c==5){
           table +="</tr>";
       }
   }
   table +='</table></td></tr></table>';
   return table;
}

function findPosX(obj){
   var curleft = 0;
   if(obj.offsetParent)
        while(1){
           curleft += obj.offsetLeft;
           if(!obj.offsetParent)
           break;
           obj = obj.offsetParent;
       }
   else if(obj.x)
   curleft += obj.x;
   return curleft;
}
function findPosY(obj){
   var curtop = 0;
   if(obj.offsetParent){
       while(1){
           curtop += obj.offsetTop;
           if(!obj.offsetParent){
               break;
           }
           obj = obj.offsetParent;
       }
    }else if(obj.y){
       curtop += obj.y;
   }
   return curtop;
}

function rgb2hex(red, green, blue)
{
    var decColor = red + 256 * green + 65536 * blue;
    var clr = decColor.toString(16);
   for(var i =clr.length;i<6;i++){
       clr = "0"+clr;
   }
   return "#"+clr;
}

Download the Image:

To call the color picker follow this way

<br />
<input name="color1" type="text" id="color1" size="7" maxlength="7" />
<span onclick="openPicker('color1')" class="picker_buttons">Pick color...</span>
<br />
<br />
<input name="color2" type="text" id="color2" size="7" maxlength="7" />
<span onclick="openPicker('color2')" class="picker_buttons">Pick color...</span>
<br />

You call any number of times within page, call the function and pass the textbox name.

Thowfeek M. Khan

Color Picker Using Javascript for your website