363 Active Lovers [Record: 1991 on 12 November, 2007]
Lost PasswordRegister
  Everything  Articles  News  Trends  Interviews  Popular

Free Advanced DHTML Color Picker


Print this page Print this page


  

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)

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!

16 January, 2008
Comments 49
del.icio.usnetscapenewsvinetechnoratifurl
    Did you enjoy our post? Get our blog feed by Email or RSS for daily updates.
 
Comments

Showing 1 - 20 of 20 Comments

_stefan
_stefan wrote:
16 Jan, 2008 @ 10:10 AM
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]

manekinek…
manekineko wrote:
16 Jan, 2008 @ 10:49 AM
weird I thought the picker came from scriptalicious or something, thanks for sharing

Uraniogre…
16 Jan, 2008 @ 11:50 AM
really cool

teevio
teevio wrote:
16 Jan, 2008 @ 12:19 PM
Yeah, totally slick!

_stefan
_stefan wrote:
16 Jan, 2008 @ 12:32 PM
[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!

designshr…
16 Jan, 2008 @ 12:46 PM
OMG - This is soooo cool!

elixabeth
elixabeth wrote:
16 Jan, 2008 @ 2:30 PM
This is really awesome!

ZicoCario…
16 Jan, 2008 @ 4:20 PM
I have to say something too!
:-)

kst
kst wrote:
17 Jan, 2008 @ 12:11 AM
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

OogeyBoog…
17 Jan, 2008 @ 3:43 AM
"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?

lancefish…
17 Jan, 2008 @ 7:41 AM
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
PixlNinja wrote:
17 Jan, 2008 @ 7:10 PM
Wow, It works without any problems for me in all the browsers that I use

Thanks for that
-Ben Jacob

valcanno
valcanno wrote:
17 Jan, 2008 @ 9:02 PM
Xcellent...! very coll and useful. Thank you for ur work............!

wares
wares wrote:
23 Jan, 2008 @ 2:35 AM
Simple idia but very useful. For work we are using Pixie also.

mtber
mtber wrote:
24 Jan, 2008 @ 11:54 AM
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.

Personali…
31 Jan, 2008 @ 4:53 PM
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
mtnola wrote:
19 Feb, 2008 @ 1:08 PM
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
mtnola wrote:
19 Feb, 2008 @ 1:12 PM
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
mtnola wrote:
19 Feb, 2008 @ 1:22 PM
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 Tsal…
3 May, 2008 @ 12:05 PM
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
 Add a Comment

       You must be logged in to post a comment.


Trackbacks
29 Trackbacks So Far...Hooray!

Free Advanced DHTML Color Picker | David Bisset: Web Designer, Coder, Wordpress Guru
16 Jan, 2008 @ 4:38 PM
[...] is offering the html code to get their Color Picker working on your site for free. Tags: CSS, DHTML, [...]
purrl.net |** urls that purr **|
16 Jan, 2008 @ 8:06 PM
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 .....
slapjack » links for 2008-01-17
16 Jan, 2008 @ 8:22 PM
[...] 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 [...]
Web Services and Tools » New DHTML Color Picker Tool
17 Jan, 2008 @ 6:40 AM
[...] We’ve just run across this wonderful new tool from COLOURlovers. [...]
Web Services and Tools » New DHTML Color Picker Tool
17 Jan, 2008 @ 6:46 AM
[...] know they have the option to get a hold of this tool as well to benefit their web design efforts.read more | digg [...]
CommentURL.com | A world of interesting web pages
17 Jan, 2008 @ 7:08 AM
Free Advanced DHTML Color Picker | CommentURL.com...

colourlovers.com

Advanced DHTML colour picker.

When we were developing COPASO, we found that w...
Free Advanced DHTML Color Picker « Shocklogic Knowledge Share
17 Jan, 2008 @ 8:58 AM
[...] Free Advanced DHTML Color Picker Published 9/9/2008 Uncategorized http://www.colourlovers.com/blog/2008/01/16/free-advanced-dhtml-color-picker/ [...]
Blog » Blog Archive » Color Design Blog / Free Advanced DHTML Color Picker by COLOURlovers
17 Jan, 2008 @ 1:23 PM
[...] 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 [...]
Atrixware ELearning Solutions » Blog Archive » Very Impressive DHTML Color Picker
17 Jan, 2008 @ 3:06 PM
[...] 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/ [...]
Make It Up As You Go » Blog Archive » COLOURlovers.com Releases A Free Advanced Color Picker
17 Jan, 2008 @ 5:36 PM
[...] 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. [...]
Webgrrls Wisdom » DHTML Color Picker tool for your website
17 Jan, 2008 @ 8:08 PM
[...] came across a really cool DHTML color picker tool that you can implement on your website for [...]
Free Advanced DHTML Color Picker
18 Jan, 2008 @ 1:22 AM
[...] DHTML it was easy enough to pull out the picker to use on the other creation pages of our site. read more | digg [...]
55disk » Free Advanced DHTML Color Picker
18 Jan, 2008 @ 7:41 AM
[...] www.colourlovers.com [...]
Colours, Colours, and even more Colours | Newbie Game Programmers
18 Jan, 2008 @ 9:00 AM
[...] 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 [...]
A free colour picker built in DHTML
18 Jan, 2008 @ 1:39 PM
[...] 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 [...]
WOEMF Tegnologie Potgooi » Blog Archive » WOEMF #17
20 Jan, 2008 @ 12:53 AM
[...] DHTML Colour picker [...]
Marc Ashwell » Blog Archive » links for 2008-01-21
21 Jan, 2008 @ 1:21 PM
[...] Color + Design Blog / Free Advanced DHTML Color Picker by COLOURlovers (tags: color webdesign Javascript dhtml tools ajax design) [...]
Free DHTML Color Picker : Jesse Schmidt
22 Jan, 2008 @ 8:57 AM
[...] DHTML Color Picker via ColourLovers [...]
Williams Blog » Free Advanced DHTML Color Picker
26 Jan, 2008 @ 11:52 AM
[...] 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 @ 12:43 PM
[...] цветовых схем для интерфейсов бизнес-приложений.read more | digg [...]
ОКИТВЕБ. Автоматизация бизнес процессов. » Архив блога » Free Advanced DHTML Color PickerAJAX. JSON. SOA. Open Source. Документооборот. Управление складом. Управ
26 Jan, 2008 @ 12:44 PM
[...] цветовых схем для интерфейсов бизнес-приложений.read more | digg [...]
26 Jan, 2008 @ 12:51 PM
[...] COPASO [...]
Weekend Link Roundup : Week 2
26 Jan, 2008 @ 2:16 PM
[...] Free Advanced DHTML Color Picker - For the webdesigners, this looks like a nice DHTML color chooser. [...]
QTRax Debuts Free Music File Sharing (It’s Legal) - Widgetize Your Site - Facebook Apps Go Global - Colour Lovers Releases New DHTML Color Picker - YouTube Embraces Mobile Access - Free Line Report 1.31.08
31 Jan, 2008 @ 6:32 PM
[...] 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 [...]
Free Advanced DHTML Color Picker « Dacoto Web Productions Web Design Blog
6 Feb, 2008 @ 9:36 AM
[...] read more | digg story [...]
Kloppy Programming » Blog Archive » Free Advanced DHTML Color Picker
10 Feb, 2008 @ 8:31 AM
[...] 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 [...]
COLOURlovers Free Advanced DHTML Color Picker | GreatSo.com
3 Mar, 2008 @ 9:10 AM
[...] 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 [...]
COLOURlovers[为色彩而存在] - cOloR bOx
28 Mar, 2008 @ 5:54 AM
[...] 它叫做Free Advanced DHTML Color Picker你可以在你任何需要的地方加入这个调色盘 让你每时每刻都记录美丽的配色 [...]
links for 2008-04-19 « Gatunogatuno’s Weblog
20 Apr, 2008 @ 7:40 PM
[...] Color + Design Blog / Free Advanced DHTML Color Picker by COLOURlovers (tags: color javascript script picker snippet code) [...]
Most Loved Blog Posts
Feeds & Favorites


Contribute
Share the Love 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.

Send Us Your Ideas or Tips
Blog Search & Archives
Browse Archives
Search Blog
Latest Palettes & Patterns
Recently Active Lovers
ForumsPalettesColorsPatternsLoversBlogTrendsGroupsStoreAboutContactAPIFAQ
© 2008 Lord IV. All Rights Reserved | Privacy & Terms of Use