FREE JavaSCRIPT - Web color picker tool,Hex colour table,pallete/pallet chart

About

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

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

Preview

Selecting the colours using colour palette:

Code

Javascript Code

<!--        Script by hscripts.com          -->
<!--        copyright of HIOX INDIA         -->
<!-- Free javascripts @ http://www.hscripts.com -->
<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>
<!-- Script by hscripts.com -->

HTML Code

<!--        Script by hscripts.com          -->
<!--        copyright of HIOX INDIA         -->
<!-- Free javascripts @ http://www.hscripts.com -->
<!-- Script by hscripts.com -->

<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=http://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 5

For customization of this script or any script development, contact us at support@hscripts.com

Usage

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

a)In your html file, just copy and paste the javascript code given above in your header section.
b)For the display part, just copy the html code and paste it.
c)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.
d)The web color picker tool is much used while designing the web pages.

License

- The javascript (misspelled as java script) is given under GPL License
- i.e. Free use for those who use the codes as it is.
- Free, if your modification does not remove our copyright information and links.
- Click Here for detailed license information.
- You can purchase the script if your requirements does not meet our GPL License terms.

Find hexadecimal values using the Color Palette/chart