Color picker

Demo

Submitted script - Author: sebo zoltan

Bookmark and Share

Download script

You can download the entire script from this Zip file

Setup

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)">

Comments

arnau
In Chrome (and probably all webkit browsers) there is a problem with document.documentElement.scrollTop returning always 0:

http://code.google.com/p/chromium/issues/detail?id=2891

A simple workaround:


x = (x - nodePageCoords.x) + (document.documentElement.scrollLeft || document.body.scrollLeft);
y = (y - nodePageCoords.y) + (document.documentElement.scrollTop || document.body.scrollTop);


arnau at 04:00AM, 2011/05/12.
Admin comment
DHTMLGoodies
Thank you Arnau,

I have updated the script with your fix.
DHTMLGoodies at 05:27AM, 2011/05/12.
madk
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 now

thank you for this very useful bit of code!
madk at 02:08PM, 2012/05/22.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2017 dhtmlgoodies.com