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)
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>
<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>
<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!
16 January, 2008
23
Did you enjoy our post? Get our blog feed by Email or RSS for daily updates.
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
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.
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.
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();
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
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".
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?
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
This is one of the web's most interesting stories on Thu 17th Jan 2008...
These are the web's most talked about URLs on Thu 17th Jan 2008. The current winner is .....
[...] Color + Design Blog / Free Advanced DHTML Color Picker by COLOURlovers (tags: colorpicker color) by The SJ-2000 Post-O-Matic Blogolator | posted in Random Trackback URL | Comment RSS Feed Tag at del.icio.us | Incoming links [...]
[...] Let’s Try Democracy | Writings by David Swanson. wrote an interesting post today on Color Design Blog / Free Advanced DHTML Color Picker by COLOURloversHere’s a quick excerptWhen 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 [...]
[...] I realize that not all of you share my personal (nerdy) love for coding and technology, but I just had to post a link to this really nice DHTML (JavaScript/HTML) color picker: http://www.colourlovers.com/blog/2008/01/16/free-advanced-dhtml-color-picker/ [...]
[...] COLOURlovers has released a very impressive DHTML color picker. They will host the files, so to use it simply include a block of Javascript on your page. [...]
[...] found an excellent FREE Advanced HTML Color Picker which is pretty amazing. It lets you add a small icon or text link to the website so that you can [...]
[...] people at colourlovers.com have built a colour picker tool in DHTML which works as well as any other I’ve seen on the Web. The difference is that they’ve [...]
[...] you want to see the post on their site (where you can also find the way to add it to your site) go here. I haven’t put it on my site yet, but I’m thinking about [...]
26 Jan, 2008
[...] цветовых схем для интерфейсов бизнес-приложений.read more | digg [...]
[...] Colour Lovers website recently released a free, advanced DHTML color picker that can be placed on any website. They’ll even host the files that are created for whatever [...]
[...] 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. …View Full Story [...]
[...] code and offer it to others to use on their own sites and projects. So here is the code to get the Free Advanced DHTML Color Picker working on your site for [...]
[...] on a project recently that required a color picker. It didn’t take long for me to find Colour Lovers’ free DHTML Color Picker. It’s easily the best color picker script out there (that I’m aware [...]
Do you have something interesting and colorful you want to share with over 600,000 lovers per month? We'd love to have you as a guest author, so send us an email with your tips or what you'd like to write about.