Free JavaScript Tool: Visual Color-Picker

» home
» contact
» terms of use

FREE SCRIPTS

» new
» text
» image
» utility
» background
» animation
» date/time

FREE ONLINE TOOLS

» code generators
» text animator
» drawing animator
» color animator
» slideshow factory
» javascript speed test

FREE BASIC SNIPLETS

» alert box
» image: multi-rollover
» pop-up: centering
» more

FREE'N'CRAZY

» realtime death counter
» eyeQ
» fun ticker

RECOMMENDED LINKS

» www.dynamicdrive.com
» www.hotscripts.com

Free JavaScript Tool: Visual Color-Picker
This free JavaScript colorpicker simplifies the color-selection of font-colors and background-colors for your webpages. Use drag-technology, hexadecimal and RGB to determine the best color-combinations for your webpages. Internet Explorer 5x/6x/7x/8x.

Instructions
Push the 3 rectangular handles on the left to select your color. Or type the color-values into the RGB-fields on bottom. Or type them into the hexadecimal-field on the right. Select background-color or font-color by clicking on a rectangle on the right-top corner.

Configuration
Step 1: Open your webpage. Paste the following code where you wish to display the Color-Picker (anywhere between <body>-tag and </body>-tag):

<script>
// CREDITS:
// VISUAL COLOR-PICKER 1.3
// By Peter Gehrig
// Copyright (c) 2010 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com

// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a highly visible link to
// http://www.fabulant.com on the webpage
// where this script will be featured

var selectedObj 
var scalaleft=10
var scalaright=265
var scalawidth=scalaright-scalaleft
var imgObj
var hexared="00"
var hexagreen="00"
var hexablue="00"
var hexa="#000000"
var selectedcolor="#000000"
var colorid
var coloridshort="displaycolorFG"

var browserinfos=navigator.userAgent 
var ie=document.all&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all&&!browserinfos.match(/Opera/)
var opera=browserinfos.match(/Opera/)

function setZIndex(obj, zOrder) {
	obj.zIndex = zOrder
}

function makeHexa(thiscol) {
    var colhex_left = Math.floor(thiscol/16)
    var colhex_right= thiscol-(colhex_left*16)
    if (colhex_left == 10) {colhex_left="A"}
    if (colhex_left == 11) {colhex_left="B"}
    if (colhex_left == 12) {colhex_left="C"}
    if (colhex_left == 13) {colhex_left="D"}
    if (colhex_left == 14) {colhex_left="E"}
    if (colhex_left == 15) {colhex_left="F"}  
    if (colhex_right == 10) {colhex_right="A"}
    if (colhex_right == 11) {colhex_right="B"}
    if (colhex_right == 12) {colhex_right="C"}
    if (colhex_right == 13) {colhex_right="D"}
    if (colhex_right == 14) {colhex_right="E"}
    if (colhex_right == 15) {colhex_right="F"}
    
    var colhex =""+colhex_left+colhex_right
    return colhex
}

function shiftTo(obj, x, y) {
	if (x<=scalaleft) {x=scalaleft}
	if (x>=scalaright) {x=scalaright}
	var colo=Math.floor((255/scalawidth*(x-scalaleft)))
	var hexacolo=makeHexa(colo)
	obj.pixelLeft=x-7
	obj.pixelTop=selectedObj.posTop
	if (imgObj.parentElement.id=="spanschienebuttonred") {
		hexared=hexacolo
		document.colorwizard.rgbred.value=colo
		hexagreen=makeHexa(parseInt(document.colorwizard.rgbgreen.value))
		hexablue=makeHexa(parseInt(document.colorwizard.rgbblue.value))
	}
	if (imgObj.parentElement.id=="spanschienebuttongreen") {
		hexagreen=hexacolo
		document.colorwizard.rgbgreen.value=colo
		hexared=makeHexa(parseInt(document.colorwizard.rgbred.value))
		hexablue=makeHexa(parseInt(document.colorwizard.rgbblue.value))
	}
	if (imgObj.parentElement.id=="spanschienebuttonblue") {
		hexablue=hexacolo
		document.colorwizard.rgbblue.value=colo
		hexared=makeHexa(parseInt(document.colorwizard.rgbred.value))
		hexagreen=makeHexa(parseInt(document.colorwizard.rgbgreen.value))
	}
	hexa="#"+hexared+hexagreen+hexablue
	if (coloridshort=="displaycolorFG") {
		document.all.displaycolorFG.style.backgroundColor=hexa
		document.all.testdiv.style.color=hexa
		strkcolor=hexa
	}
	else if (coloridshort=="displaycolorBG") {
		document.all.displaycolorBG.style.backgroundColor=hexa
		document.all.testdiv.style.backgroundColor=hexa
		strkweight=hexa
	}
	document.colorwizard.hexafield.value=hexa
}

function setSelectedElem(evt) {
	imgObj = window.event.srcElement
	if (imgObj.parentElement.id.indexOf("schienebutton") != -1) {
		selectedObj = imgObj.parentElement.style
		setZIndex(selectedObj,100)
		return
 	}
  	selectedObj=null
	return
}

function dragIt(evt) {
	if (selectedObj) {
		shiftTo(selectedObj, (window.event.clientX-offsetX-document.all.colorwizarddiv.style.posLeft), (window.event.clientY - offsetY))
	return false
 	}
}

function engage(evt) {
	setSelectedElem(evt)
	if (selectedObj) {
		offsetX = window.event.offsetX
		offsetY = window.event.offsetY
 	}
    return false
}

function release(evt) {
	if (selectedObj) {
		setZIndex(selectedObj, 0)
		selectedObj = null
	}
}

function translateintorgb() {
	var hexanew=document.colorwizard.hexafield.value
	if (hexanew.indexOf("#") == -1) {
		hexanew="#"+hexanew
		document.colorwizard.hexafield.value=hexanew
	}
	var hexanewred=hexanew.substring(1,3)
	var hexanewgreen=hexanew.substring(3,5)
	var hexanewblue=hexanew.substring(5,7)
	document.colorwizard.rgbred.value=parseInt("0x"+hexanewred)
	document.colorwizard.rgbgreen.value=parseInt("0x"+hexanewgreen)
	document.colorwizard.rgbblue.value=parseInt("0x"+hexanewblue)
	document.all.spanschienebuttonred.style.posLeft=parseInt(document.colorwizard.rgbred.value)+3
	document.all.spanschienebuttongreen.style.posLeft=parseInt(document.colorwizard.rgbgreen.value)+3
	document.all.spanschienebuttonblue.style.posLeft=parseInt(document.colorwizard.rgbblue.value)+3
	if (coloridshort=="displaycolorFG") {
		document.all.displaycolorFG.style.backgroundColor=hexanew
		document.all.testdiv.style.color=hexanew
		strkcolor=hexanew
	}
	else if (coloridshort=="displaycolorBG") {
		document.all.displaycolorBG.style.backgroundColor=hexanew
		document.all.testdiv.style.backgroundColor=hexanew
		strkweight=hexanew
	}
}

function translateintohexa() {
	if (document.colorwizard.rgbred.value>255) {document.colorwizard.rgbred.value=255}
	if (document.colorwizard.rgbgreen.value>255) {document.colorwizard.rgbgreen.value=255}
	if (document.colorwizard.rgbblue.value>255) {document.colorwizard.rgbblue.value=255}
	var hexanewred=makeHexa(parseInt(document.colorwizard.rgbred.value))
	var hexanewgreen=makeHexa(parseInt(document.colorwizard.rgbgreen.value))
	var hexanewblue=makeHexa(parseInt(document.colorwizard.rgbblue.value))
	var hexanew="#"+hexanewred+hexanewgreen+hexanewblue
	document.colorwizard.hexafield.value="#"+hexanewred+hexanewgreen+hexanewblue
	document.all.spanschienebuttonred.style.posLeft=parseInt(document.colorwizard.rgbred.value)+3
	document.all.spanschienebuttongreen.style.posLeft=parseInt(document.colorwizard.rgbgreen.value)+3
	document.all.spanschienebuttonblue.style.posLeft=parseInt(document.colorwizard.rgbblue.value)+3
	if (coloridshort=="displaycolorFG") {
		document.all.displaycolorFG.style.backgroundColor=hexanew
		document.all.testdiv.style.color=hexanew
		strkcolor=hexanew
	}
	else if (coloridshort=="displaycolorBG") {
		document.all.testdiv.style.backgroundColor=hexanew
		strkweight=hexanew
	}
}

function launchcolorwizard(whatid) {
	coloridshort=whatid
	colorid=eval("document.all."+whatid+".style")
	document.colorwizard.hexafield.value=colorid.backgroundColor
	translateintorgb()
}

function initcolorpicker() {
	document.all.colorwizarddiv.style.posLeft=DL_GetElementLeft(document.all.marker);
	document.all.colorwizarddiv.style.posTop=DL_GetElementTop(document.all.marker);
	document.all.colorwizarddiv.style.visibility="visible"
	document.onmousedown=engage
	document.onmousemove=dragIt
	document.onmouseup=release
}

function DL_GetElementLeft(eElement) {
    var nLeftPos = eElement.offsetLeft;          
    var eParElement = eElement.offsetParent;     
    while (eParElement != null) {                                            
        nLeftPos += eParElement.offsetLeft;      
        eParElement = eParElement.offsetParent;  
    }
    return nLeftPos;                            
}

function DL_GetElementTop(eElement) {
    var nTopPos = eElement.offsetTop;            
    var eParElement = eElement.offsetParent;     
    while (eParElement != null) {                                            
        nTopPos += eParElement.offsetTop;        
        eParElement = eParElement.offsetParent;  
    }
    return nTopPos;                              
}

if (ie) {
document.write('<form name="colorwizard">')
document.write('<div id="marker" style="position:relative;overflow:hidden;width:310px;height:92px"></div>')
document.write('<div id="colorwizarddiv" style="position:absolute;visibility:hidden;width:310px;height:92px;border-style:solid;border-color:#666666;border-width:1px;background-color:#dddddd">')
}
else {
document.write('<div id="colorwizarddiv" style="position:absolute;visibility:hidden;width:0px;height:0px;">')
}

if (ie) {
	window.onload=initcolorpicker
}
else {
	alert("Color-Picker requires Internet Explorer 5x or higher")
}
</script>

</td>
<td>
<input type="text" name="hexafield" size=7  value="#000000" style="font-size:7pt;color:black;font-family:Arial;">
</td>
<td>
</td>
<td align=center>
<input type="button" size=1  value="go" onClick="translateintorgb()" style="font-size:8pt;color:black;font-family:Arial;">
</td></tr>
</table>
</td></tr>
</table>
</div>
<span id="displaycolorBG" style="position:absolute;top:15px;left:284px;width:16px;height:16px;border:1px solid black;background-color:#FF0000;"><a href="javascript:launchcolorwizard('displaycolorBG')"><img src="onepixel.gif" width=16 height=16 border=0></a></span>
<span id="displaycolorFG" style="position:absolute;top:7px;left:276px;width:16px;height:16px;border:1px solid black;background-color:#000000;"><a href="javascript:launchcolorwizard('displaycolorFG')"><img src="onepixel.gif" width=16 height=16 border=0></a></span>
</div>
<br>
<script>
if (ie) {
	document.write('<div id="testdiv" style="position:relative;visibility:visible;width:310px;border-style:solid;border-color:#666666;border-width:1px;background-color:#FF0000;font-family:Verdana;font-size:16pt;color:#000000;padding:5px">')
	document.write('Do you like this color?')
	document.write('</div>')
	document.write('</form>')
}
</script>

Step 2:

Save the white rectangular image on the left as onepixel.gif and put it into the same folder as the webpage that contains the Color-Picker.