JS Color Picker

Author: George Hayes
Published:

The following tutorial assumes you have a good understanding of javasript. A demonstration of the color picker and the code required to implement it is provided below.

To use the color picker first select the color from the thin line at the top closest to what you want. Then move the mouse over the left square and click when you have found the color you like.

Code:
colorpicker.js

window.onload = init
function init()
{
	vect();
	
}
function twodiv(C16)
{
	var OUTPUT="";
	//OUTPUT = "Code:<input type='text' id='code'><br>";
	OUTPUT = "<div id='oned'></div><div id='twod'></div>";
	document.getElementById("selectfield").innerHTML = OUTPUT;
	lock(C16);
	show(C16);
}
function lock(code)
{
	var C16="", OUTPUT="";
	C16=code; OUTPUT="Code:<input type='text' id='code'><br>";
	OUTPUT = OUTPUT+"<table border='0' width='100%' 
	cellpadding='0' cellspacing='0'><tr>";
	OUTPUT = OUTPUT+"<td style=\"background:"+C16+"; 
	width:96px; height:115px;\" title='"+C16+"'></td>";
	OUTPUT = OUTPUT + "</tr></table>";
	document.getElementById("oned").innerHTML = OUTPUT;
	document.getElementById("code").value = C16;
}
function show(code)
{
	var C16=""; OUTPUT="";
	C16=code; //OUTPUT="Code:<input type='text' id='code'><br>";
	OUTPUT = OUTPUT+"<table border='0' width='100%' 
	cellpadding='0' cellspacing='0'><tr>";
	OUTPUT = OUTPUT+"<td style=\"background:"+C16+"; width:96px; height:115px;\" 
	title='"+C16+"'></td>";
	OUTPUT = OUTPUT + "</tr></table>";
	document.getElementById("twod").innerHTML = OUTPUT;
}
function fill2(R,G,B)
{
	var r=0,b=0,g=0,count=0;
	var OUTPUT ="",R16="",G16="",B16="",C16="";
	//OUTPUT = "Code:<input type='text' name='code' id='code'><br>";
	OUTPUT = OUTPUT+"<table border='0' width='100%' cellpadding='0' cellspacing='0'>";
	for(count=0;count<255;count=count+5)
	{
		OUTPUT = OUTPUT + "<tr>";
		for (count2=0;count2<255;count2=count2+5)
		{
			r=parseInt((R+(((255-R)/255)*count))*count2/255);
			b=parseInt((B+(((255-B)/255)*count))*count2/255);
			g=parseInt((G+(((255-G)/255)*count))*count2/255);
			R16 = r.toString(16);
			if(R16.length<2){R16 = "0"+R16;}
			G16 = g.toString(16);
			if(G16.length<2){G16 = "0"+G16;}
			B16 = b.toString(16);
			if(B16.length<2){B16 = "0"+B16;}
			C16 = "#"+R16+G16+B16;
			OUTPUT = OUTPUT+"<td style=\"background:"+C16+"; width:2px; height:5px;\" 
			title='"+C16+"' onmouseover=\"show('"+C16+"')\" 
			onclick=\"lock('"+C16+"')\"></td>";
			
		}
		OUTPUT = OUTPUT + "</tr>";
	}
	OUTPUT = OUTPUT + "</table>";
	OUTPUT = OUTPUT +"<br>";
	document.getElementById("colorfield").innerHTML = OUTPUT;
	//document.getElementById("code").innerHTML = C16;
	twodiv(C16);
}

function vect()
{
	var R = 0, G=0, B=0,count=0,deg=0,p=0;
	var OUTPUT ="",R16="",G16="",B16="",C16;
	p=3.141592654/2;
	OUTPUT = "<table border='0' width='100%' cellpadding='0' cellspacing='0'><tr>";
	for (count=0;count<256;count=count+5)
	{
		//R=255-count;
		//B=count;
		R=Math.round(Math.cos((count/255)*p)*255);
		B=Math.round(Math.cos(((255-count)/255)*p)*255);

		R16 = R.toString(16);
		if(R16.length<2){R16 = "0"+R16;}
		G16 = G.toString(16);
		if(G16.length<2){G16 = "0"+G16;}
		B16 = B.toString(16);
		if(B16.length<2){B16 = "0"+B16;}
		C16 = "#"+R16+G16+B16;
		OUTPUT = OUTPUT+"<td style=\"background:"+C16+"; width:2px; height:20px;\" 
		title='"+C16+"' onclick=\"fill2("+R+","+G+","+B+")\"></td>";
		//OUTPUT = OUTPUT + C16+"<br>";
	}
	R=0;B=0;
	for (count=0;count<256;count=count+5)
	{
		//B=255-count;
		//G=count;
		B=Math.round(Math.cos((count/255)*p)*255);
		G=Math.round(Math.cos(((255-count)/255)*p)*255);
		R16 = R.toString(16);
		if(R16.length<2){R16 = "0"+R16;}
		G16 = G.toString(16);
		if(G16.length<2){G16 = "0"+G16;}
		B16 = B.toString(16);
		if(B16.length<2){B16 = "0"+B16;}
		C16 = "#"+R16+G16+B16;
		OUTPUT = OUTPUT+"<td style=\"background:"+C16+"; width:2px; height:20px;\" 
		title='"+C16+"' onclick=\"fill2("+R+","+G+","+B+")\"></td>";
		//OUTPUT = OUTPUT + C16+"<br>";
	}
	B=0;G=0;
	for (count=0;count<256;count=count+5)
	{
		//G=255-count;
		//R=count;
		G=Math.round(Math.cos((count/255)*p)*255);
		R=Math.round(Math.cos(((255-count)/255)*p)*255);
		R16 = R.toString(16);
		if(R16.length<2){R16 = "0"+R16;}
		G16 = G.toString(16);
		if(G16.length<2){G16 = "0"+G16;}
		B16 = B.toString(16);
		if(B16.length<2){B16 = "0"+B16;}
		C16 = "#"+R16+G16+B16;
		OUTPUT = OUTPUT+"<td style=\"background:"+C16+"; width:2px; height:20px;\" 
		title='"+C16+"' onclick=\"fill2("+R+","+G+","+B+")\"></td>";
		//OUTPUT = OUTPUT + C16+"<br>";
	}
	OUTPUT = OUTPUT + "</tr></table>";
	OUTPUT = OUTPUT +"<br>";
	//OUTPUT = OUTPUT +"<div id='colorfield'></div>";
	
	document.getElementById("colormap").innerHTML = OUTPUT;
	fill2(R,G,B);
}
HTML required
<div id='colormap'></div>
<div style="margin-left: auto; margin-right: auto;max-width: 512px;">
<div id='colorfield' style="float:left; width: 256px;"></div>
<div id='selectfield' style="float:left; width: 256px;">Code:<input 
type='text' id='code'><br></div>
</div>
<script src="js/colorpicker.js"></script>