Color picker


Submitted script - Author: sebo zoltan

Bookmark and Share

Download script

You can download the entire script from this Zip file


Include the colorPicker.js and colorPicker.css file in your <h;head> section:

<script type="text/javascript" language="javascript" src="js/colorPicker.js"></script>
<link rel="stylesheet" href="css/colorPicker.css" type="text/css"></link>

Then use codes like this to assign it to your text inputs:

<input type="text" id="bau" onclick="startColorPicker(this)" onkeyup="maskedHex(this)">


In Chrome (and probably all webkit browsers) there is a problem with document.documentElement.scrollTop returning always 0: simple workaround:x = (x - nodePageCoords.x) + (document.documentElement.scrollLeft || document.body.scrollLeft);y = (y - nodePageCoords.y) + (document.documentElement.scrollTop || document.body.scrollTop);
arnau at 10:00AM, 2011/05/12.
Admin comment
Thank you Arnau,I have updated the script with your fix.
DHTMLGoodies at 11:27AM, 2011/05/12.
I recommend changing this line:if(((rgb.r*100+rgb.g*100+rgb.b*100)/3)<65)to this:if(((rgb.r*30+rgb.g*59+rgb.b*11))<50)this, aside from being a general aesthetic improvement, fixes the unseemly white-on-bright-green that you can get with how it is nowthank you for this very useful bit of code!
madk at 08:08PM, 2012/05/22.

Post your comment

Don't have an avatar? Create one at

Confirmation code:

Go to

About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2022