Free Advanced DHTML Color Picker

Free Advanced DHTML Color Picker


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:

Show picker and load the color to the left

Single Text Field Example Code

<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!


Related Articles

29 Comments
Showing 1 - 29 of 29 Comments

_stefan

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

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

teevio

Yeah, totally slick!

_stefan

[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

OMG - This is soooo cool!

elixabeth

This is really awesome!

ZicoCarioca

I have to say something too!
:-)

kst

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

"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

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

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

Thanks for that
-Ben Jacob

valcanno

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

wares

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

mtber

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

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

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

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

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

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

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

Glazz



what is wrong?
with this {_hex: document.getElementById('cor_1').value} it doesn't work, but whitout it works very well

SELLER FORUM

Excelent Work ! Have some litle Troubble but now, it Works.
Regards from Germany

johnnymorgan

That works great! I think if people are having problems still, they should try updating their browser. Jquery and such work better on newer browsers.

highest

This is working perfectly for me! Thanks!

jakaz

hi
designshrine wrote:
OMG - This is soooo cool!

phobophile

Excellent job. If this could export an image, say a 1px X 1px .png, this would be perfect. Well, perfectER.

Post a Comment

You must be logged in to post a comment.

Search The Blog

Subscribe & Share

Our Latest Tweets

10 Professional Resume Templates to Help You Land That New Job http://t.co/4HR6pccBc1 http://t.co/T1R4hf276w
about 5 hours ago
Tweet this ArticleFollow @COLOURlovers

Latest Blog Posts

//View More ›

Tags

Latest Colors

//View More ›

Latest Palettes

//View More ›

Latest Patterns

//View More ›