Free Advanced DHTML Color Picker

By COLOURlover // January 16, 2008

When we were developing COPASO, we found that we needed to have a more advanced color picker to work inside the application... and since COPASO is built with DHTML it was easy enough to pull out the picker to use on the other creation pages of our site. Once we'd modularized the color picker code it made sense to offer it to others to use on their own sites and projects. So here is the code to get our Color Picker working on your site for free. (We'll even host the files)

License: Attribution-Noncommercial-Share Alike 3.0 Unported
If you have a need that doesn't fit the license above, contact us.

COLOURlovers Color Picker Demo

Here is the Code You Need & Examples...

Put this Code into Your HTML <head> Section:
<link rel="stylesheet" href="http://colourlovers.com.s3.amazonaws.com/COLOURloversColorPicker/COLOURloversColorPicker.css" type="text/css" media="all" />
<script type="text/JavaScript" src="http://colourlovers.com.s3.amazonaws.com/COLOURloversColorPicker/js/COLOURloversColorPicker.js"></script>

Put this Code into Your HTML <body> Section:
<div id="CLCP" class="CLCP"></div>
<script type="text/JavaScript">
_whichField = "hexValue_0";
CLCPHandler = function(_hex) {
// This function gets called by the picker when the sliders are being dragged. The variable _hex contains the current hex value from the picker
// This code serves as an example only, here we use it to do three things:
// Here we simply drop the variable _hex into the input field, so we can see what the hex value coming from the picker is:
document.getElementById(_whichField).value = _hex;
// Here is where we color the BG of a div to preview the color:
document.getElementById("CLCPUpdateDiv").style.background = ("#" + _hex);
// Giving you control over this function really puts the reigns in your hands. Rewrite this function as you see fit to really take control of this color picker.
}
// Settings:
_CLCPdisplay = "none"; // Values: "none", "block". Default "none"
_CLCPisDraggable = true; // Values: true, false. Default true
_CLCPposition = "absolute"; // Values: "absolute", "relative". Default "absolute"
_CLCPinitHex = "0039B3"; // Values: Any valid hex value. Default "ffffff"
CLCPinitPicker();
</script>

Picker Attached to a Single Text Field:

<input name="YourInputName" id="hexValue_0" style="width: 100px;" maxlength="6" value="0000FF" />
<a href="JavaScript:_whichField='hexValue_0';CLCPshowPicker({_hex: document.getElementById('hexValue_0').value});">Show picker and load the color to the left</a>

Picker Attached to Multiple Text Fields:

Show picker at x=300, y=1400 and don't update it's color

Show picker at x=12, y=1400 and load the color to the left

Show picker and load the color to the left

Show picker at mouse click and don't update it's color

Show picker at mouse click and don't update it's color [Example with an image]

Multiple Text Field Example Code:

<input name="YourInputName" id="multipleHexValue_0" style="width: 100px;" maxlength="6" value="FFFFFF" />
<a href="JavaScript:_whichField='multipleHexValue_0';CLCPshowPicker({_x: 300,_y: 200});">Show picker at x=300, y=200 and don't update it's color</a>
<input name="YourInputName" id="multipleHexValue_1" style="width: 100px;" maxlength="6" value="18AB49" />
<a href="JavaScript:_whichField='multipleHexValue_1';CLCPshowPicker({_hex: document.getElementById('multipleHexValue_1').value,_x: 12,_y: 400});">Show picker at x=12, y=400 and load the color to the left</a>
<input name="YourInputName" id="multipleHexValue_2" style="width: 100px;" maxlength="6" value="FF0000" />
<a href="JavaScript:_whichField='multipleHexValue_2';CLCPshowPicker({_hex: document.getElementById('multipleHexValue_2').value});">Show picker and load the color to the left</a>
<input name="YourInputName" id="multipleHexValue_3" style="width: 100px;" maxlength="6" value="FFFFFF" />
<a href="JavaScript:_whichField='multipleHexValue_3';CLCPshowPicker();">Show picker at mouse click and don't update it's color</a>
<input name="YourInputName" id="multipleHexValue_4" style="width: 100px;" maxlength="6" value="000000" />
<img src="http://colourlovers.com.s3.amazonaws.com/images/v3/color_wheel.png" style="vertical-align: -20%; cursor: pointer;" onclick="_whichField = 'multipleHexValue_4'; CLCPshowPicker();" alt="Show picker at mouse click and don't update it's color" title="Show picker at mouse click and don't update it's color" /> [Example with an image]

Here is a break down of the object passed to CLCPshowPicker()

{
_hex: "FF4400", // When a valid hex value is passed, it will set the picker to this hex. Otherwise the picker will not change it's current color [if any].
_x: 12, // If a x coordinate is passed, the picker will move to the x value. Otherwise, the x coordinate from the mouse click will be used.
_y: 400 // If a y coordinate is passed, the picker will move to the y value. Otherwise, the y coordinate from the mouse click will be used.
// All of these variables are optional
}

Feb. 24, 2008 - Update
Fixed a bug in IE where users couldn't click-drag-highlight other objects within the page.

May 1, 2008 - Update
Fixed a conflict this script had with jQuery. Thanks to Ozh at planetOzh.com for the report!

Team

Written by COLOURlover

www.COLOURlovers.comMy name is Darius A Monsef IV & my friends call me Bub(s)(ba).
Chief Lover at COLOURlovers.com / Cofounder of Hands.org
Founder, Philanthropist, Designer, Builder & Writer.
P.S. I love you.

28 Comments

Showing 1 - 28 of 28 Comments

_stefan

Posted Jan 16, 2008

Wow! Thanks a lot, this is really cool! I'll try it soon :)

[div id="CLCP" clas"Cs=LCP"][/div]

There might be a little typo in the code (textfield #1 line #6), I guess it should be something like:
[div id="CLCP" class="CLCP"][/div]

manekineko

Posted Jan 16, 2008

weird I thought the picker came from scriptalicious or something, thanks for sharing

Uraniogrezzo

Posted Jan 16, 2008

really cool

teevio

Posted Jan 16, 2008

Yeah, totally slick!

_stefan

Posted Jan 16, 2008

[div id="CLCP" clas"Cs=LCP"][/div]

There might be a little typo in the code (textfield #1 line #6), I guess it should be something like:
[div id="CLCP" class="CLCP"][/div]

It's changed now. Thank you!

designshrine

Posted Jan 16, 2008

OMG - This is soooo cool!

elixabeth

Posted Jan 16, 2008

This is really awesome!

ZicoCarioca

Posted Jan 16, 2008

I have to say something too!
:-)

kst

Posted Jan 17, 2008

It works in Opera 9.50 alpha, but when you move the circle or sliders, it leaves "artifacts" behind. It looks like the area that you redraw is not big enough to cover it all

OogeyBoogey

Posted Jan 17, 2008

"So here is the code to get our Color Picker working on your site for free"
Under which license do you offer the Color Picker?
May I enhance it?

lancefisher

Posted Jan 17, 2008

Very nice color picker. It's probably the best DHTML one I've seen. The only problem I have with it is the location of the close button. I had trouble finding it at first. Putting it at the top might be better. But still, this is a very nice color picker.

PixlNinja

Posted Jan 17, 2008

Wow, It works without any problems for me in all the browsers that I use

Thanks for that
-Ben Jacob

valcanno

Posted Jan 17, 2008

Xcellent...! very coll and useful. Thank you for ur work............!

wares

Posted Jan 23, 2008

Simple idia but very useful. For work we are using Pixie also.

mtber

Posted Jan 24, 2008

Copied the code as provided and it pops up all nice and such except the textboxes with white values are cut in half in IE and there are no values visible in Firefox. Did anyone else experience this problem and find a solution? The odd thing is that on this template it appears correctly, but not with the code I copied into my site.

Personalife

Posted Jan 31, 2008

There's a major problem with it in IE7. Any page where the color chooser is implemented, you cannot highlight text in any text box.

mtnola

Posted Feb 19, 2008

Hi-Great stuff but I can't get it to work and assume I am making some newbie mistake. Are there literally NO changes to code above needed? When I paste the following into :

And following into body:

_whichField = "hexValue_0";
CLCPHandler = function(_hex) {
// This function gets called by the picker when the sliders are being dragged. The variable _hex contains the current hex value from the picker
// This code serves as an example only, here we use it to do three things:
// Here we simply drop the variable _hex into the input field, so we can see what the hex value coming from the picker is:
document.getElementById(_whichField).value = _hex;
// Here is where we color the BG of a div to preview the color:
document.getElementById("CLCPUpdateDiv").style.background = ("#" + _hex);
// Giving you control over this function really puts the reigns in your hands. Rewrite this function as you see fit to really take control of this color picker.
}
// Settings:
_CLCPdisplay = "none"; // Values: "none", "block". Default "none"
_CLCPisDraggable = true; // Values: true, false. Default true
_CLCPposition = "absolute"; // Values: "absolute", "relative". Default "absolute"
_CLCPinitHex = "0039B3"; // Values: Any valid hex value. Default "ffffff"
CLCPinitPicker();

And then:

Show picker and load the color to the left

It doesn't work. When I use Firefox WebDeveloper plug-in it reports following error:
document.getElementById(_whichField) has no properties

it also reports multiple CSS warnings:
Unknown property 'filter'. Declaration dropped
http://colourlovers.com.s3......ColorPicker.css Line: 42
Unknown property '-khtml-user-select'. Declaration dropped.
... Line 44 and 68
Unknown property '-user-select'. Declaration dropped.
... Line 45 and 69

Any help would be appreciated and I apologize ahead of time if I'm making a really simple mistake.

Thanks,
Michael

mtnola

Posted Feb 19, 2008

Hi- mtnola again - in my previous post I meant to paste code but, duh, it's html. Basically, I followed the instructions exactly as stated above for HEAD, BODY, and then "Single Text Field Example Code" and got following errors/warnings from Web Developer plugin:

error:
document.getElementById(_whichField) has no properties

warnings:
Unknown property 'filter'. Declaration dropped
http://colourlovers.com.s3......ColorPicker.css Line: 42
Unknown property '-khtml-user-select'. Declaration dropped.
... Line 44 and 68
Unknown property '-user-select'. Declaration dropped.
... Line 45 and 69

Thanks,
Michael

mtnola

Posted Feb 19, 2008

Ok - last time, I promise. I figured it out. If there are any other newbies out there like me, you also need to have the CLCUpdateDiv in your html. I'll try and post it below but if it doesn't work simply View Source of this page and you will find it by searching for "CLCUpdateDiv".

-Michael

Lost Tsalagi

Posted May 3, 2008

I love this program! Just what I've been looking for. I'm not a programmer and was hoping someone could tell me how to place the picker inside a web page with it open all the time. Also can we copy the java script and place it on our own site?

Thanks
Phil

Lost Tsalagi

Posted Jun 10, 2008

Hello once again. I was wondering if anyone know how to alter this code to make it color the background of several divs different colors? I can make it color them all the same color but I've made different buttons to get different hex codes but they won't color single divs. Any help would be appreciated.
Thanks