HIOX 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 pallete/chart by clicking any colour in the pallet, hexadecimal value can also be known for each selected colours. It is easy to select colors from the pallet 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 pallete
d)Now you can have the Hexadecimal value for the selected colour in the textarea

Preview

Selecting the colours using colour pallete:

Code

Javascript Code

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

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 have textarea and button in your screen. On mouseover the button, the pallet will be displayed. Make your selection of color on the pallet to have the appropriate web color code or hexadecimal value.

d)The web color picker tool is much used in designing the web pages.

License

- This javascript (misspelled as java script)/HTML code is given under GPL License
- i.e. Free use for those who use it as it is.
- Free, if your modification does not remove our copyright information and links.
- Detailed License information can be found here
- You can purchase the script if your requirements does not meet GPL License terms.

Find hexadecimal values using the Color Pallete/chart