Color Select Palette

Quick, easy and lightweight color select palette snippet. Below is the description of general approach.

Here is the function that builds table of colors. Instead of table one can take divs, or canvas, or svg , or whatever.

.

function buildPalette(f){
var b=f;
var str="";
var str1="";
str1+="< table border=0 cellspacing=0";
for (var i=0; i< 255; i+=10){
str1+='';
for (var j=0; j< 255; j+=10){
var c=i<<16|j<<8|b;
var color=c.toString(16);
if(color.length==6){
str+='<td bgcolor="#'+color+'" width=12px height=12px onclick=setColor('+i+','+j+','+b+')> </td>';
}
}
str1+=str;
str='';
str1+='</td>';
}
str1+='</table>';
document.getElementById('tabl').innerHTML=str1;
}

Add eventlistenes

document.getElementById("sl").addEventListener("mousedown", startMove);
document.getElementById("fr").addEventListener("mousemove", getMove);
document.addEventListener("mouseup", stopMove);

And finally the function that repaints color table on user interaction

function getMove(event){
var x=parseInt(event.clientX);
if(_moves==true && x<300 && x>0) {
document.getElementById("sl").style.left =x+"px";
buildPalette(x-add_x);
}
}