Find hexadecimal values using the Color Palette/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 -->
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
- 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.
