Color picker

Demo

Submitted script - Author: sebo zoltan

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

1 2 3 4 5

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=2891A 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

1 2 3 4 5

Thank you Arnau,I have updated the script with your fix.

DHTMLGoodies at 11:27AM, 2011/05/12.

1 2 3 4 5

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

Your name:
Your email:
Your website:
Don't have an avatar? Create one at Gravatar.com.

 

Confirmation code:

Please wait...

Comment preview:

Type some text to see comment preview...

Anonymous at 18:47, 11-26-2020.