feedback
Sep 26 2007

PhotoShop-like JavaScript Color Picker

by John Dyer

Update: Many people have noted "it looks like [picker X]" and they are right: there are tons of pickers out there (I listed a few in the original post). The main difference in mine is that it has all 6 picking options (H,S,V,R,G,B) not just Hue. I haven't seen one that does that and this is a fun way of showing what JavaScript can do.
-----

There are a lot of nice JavaScript color pickers out there (colorjack, colourmod, yahoo, dojo, nogray, mootools), but none of them has a full HSB and RGB options of Photoshop's picker. Some pickers try to generate the entire color map in JavaScript by drawing a 256x256 grid made of divs. This is very slow, which is why color pickers that go the JavaScript route often don't draw the entire map, but instead only 4x4 or 8x8 blocks (ColorZilla).

The other options is to use transparent PNGs and opacity to fake the maps. A few years back, I did this, but it didn't have RGB and was Firefox and IE only (excellent tutorial here). To create the color mixing, the larger map is made of two layers and the vertical slider has four layers (two are used for H, S, or B; four layers for R, G, or B). Some others pickers use this method for a hue map, but don't include the other maps (S,V,R,G,B). The JavaScript is made up of some color methods, a slider control, a handler for input, and the ColorPicker object to put it all together. Click the image below to try it out:

CropperCapture[11]

 

Tested on IE5.5, IE6, IE7, FF2, Opera 9, Safari 2. It would probably need some modification depending on use, but you can download it here: Color Picker

Comments

mud September 28. 2007 08:44

Cool color picker! Reminds me of how the Colors of the Rainbow plugin for Opera was programmed (http://widgets.opera.com/widget/4134). I ran into a little bug however on Firefox on OSX, when you pull the circle (in the square on the left) about 75% down it jumps to the right... Otherwise, really nice plugin!

mud
John Dyer September 29. 2007 15:16

mud, that Opera plugin looks great! Thanks for the tip on the OSX bug. I'll check it out.
John Dyer's last post: Optimizing CSS with Base64 Embedded Images (with Bonus Utility!)

John Dyer
Benjiiim September 30. 2007 11:07

Hello,

Very good job !
But I have the same bug than mud on Vista + IE7

Thanks !

Benjiiim
John Dyer September 30. 2007 15:23

Fixed.
John Dyer's last post: Optimizing CSS with Base64 Embedded Images (with Bonus Utility!)

John Dyer
Mathieu 'p01' Henri October 3. 2007 21:33

" Some pickers try to generate the entire color map in JavaScript by drawing a 256x256 grid made of div. "

o_Õ ... Seriously ? What kind of silly person would do that ? PNG and opacity are pretty obvious for a color picker.

Nice job on doing all the conversions.

Would be a lot nicer if it used webForms 2 so that the user can use the arrows keys to change the value of the fields, and if you got rid of the massive Prototype library.

Mathieu 'p01' Henri
justin October 3. 2007 21:53

Seems an awful lot like this one:

http://www.nogray.com/color_picker.php

justin
John Dyer October 3. 2007 22:00

@Mathieu: webForms 2 would be cool, but also would include another library. I would be relatively easy to remove prototype from this if that was a big consideration.

@justin: that's a nice picker too, but it only has a hue map. None of the other options (S,V,R,G,B) are in that one.
John Dyer's last post: Optimizing CSS with Base64 Embedded Images (with Bonus Utility!)

John Dyer
Mathieu 'p01' Henri October 3. 2007 22:16

webForms 2 don't require an extra library. All you have to do is add an event listener for the 'input' event to update the position of the 2 cursors.

Mathieu 'p01' Henri
pingback October 3. 2007 22:34

Pingback from nicholasroussos.com

Javasript Photoshop Color Picker / Nicholas Roussos

nicholasroussos.com
pingback October 3. 2007 22:40

Pingback from ajaxgirl.com

Ajax Girl  » Blog Archive   » Photoshop Color Picker

ajaxgirl.com
John Dyer October 4. 2007 00:12

@Mathieu: I was referring to the implementation of WHATWG webforms 2 on google code (http://code.google.com/p/webforms2/). Are you just suggesting adding up and down arrow support directly? That sounds like a cool idea. I'll look into it.
John Dyer's last post: Optimizing CSS with Base64 Embedded Images (with Bonus Utility!)

John Dyer
joe larson October 4. 2007 00:19

brilliant

joe larson
pingback October 4. 2007 01:10

Pingback from javascriptnews.com

Javascript News  » Blog Archive   » Photoshop Color Picker

javascriptnews.com
sudopeople October 4. 2007 02:27

I love this thing! Well done. I previously used colorjack, which is great but full of quirks. For one thing, it used common variable names which step all over other libraries and my own code and is insanely CSS oriented, so trying to change its layout is a huge pain that's basically hours of trial an error.  I really like how you used tables unlike all the standardistas out there that think tables are "wrong." This colorpicker is the best I've seen so far.  The one thing that bothers me is the difficulty in writing a colorpicker that can "start" on any color.  I foresee this as quite a task, maybe a fun challenge.  For instance, you set you colorpicker to start on #FF0000 and you set the background to red as well. If I wanted it to start on a custom color, like one that was in a database for instance, maybe #0000FF, the color box would be correct but the background of the picker would be red, or maybe white. Basically, you'd need an algorithym to detect what each color's background would be (the reverse of how it normally works).

sudopeople
Justin Etheredge October 4. 2007 03:43

Ingenious! Bravo!

Justin Etheredge
John Dyer October 4. 2007 03:56

@sudopeople, you can instantiate the ColorPicker using:

  var cp = new ColorPicker('cp1', {startMode:'h', startHex:'ff0000'});

to set the starting color and mode.
John Dyer's last post: Optimizing CSS with Base64 Embedded Images (with Bonus Utility!)

John Dyer
JonWallsten October 4. 2007 05:51

Great job!!!
Precisly what a wanted!
Thanks alot!

JonWallsten
Jon Wallsten October 4. 2007 06:16

Btw, where do I put the:
var cp = new ColorPicker('cp1', {startMode:'h', startHex:'ff0000'});
to get it to work?
Thanks fot youtime, JOn

Jon Wallsten
pingback October 4. 2007 13:28

Pingback from blog.napyfab.com

napyfab:blog» Blog Archive
» links for 2007-10-05

blog.napyfab.com
John Dyer October 4. 2007 14:20

@Jon, in the default.html page in the download, look in the JavaScript near the end of the page:
Event.observe(window,'load',function() {
  cp1 = new Refresh.Web.ColorPicker('cp1', {startMode:'g', startHex:'ffcc00'});
});

John Dyer's last post: Optimizing CSS with Base64 Embedded Images (with Bonus Utility!)

John Dyer
Jon Wallsten October 4. 2007 23:48

Thanks, i managaed to figure it out yesterday! Smile
Just a few thingsSmile
Why is it:
"hex = hex.replace(/[^A-F0-0]/g, '0');"
istead of:
"hex = hex.replace(/[^A-F0-9]/g, '0');" ?

And one more thing. I have done an extra box with the starting color, so you can go back to the start color easy.
How do i in the simpliest make the deafult color as the choosen one?
Atm i just reload the page. But there must be a simplier way! Smile
, Jon

Jon Wallsten
Jon Wallsten October 5. 2007 00:48

Here it is, if any reader want to have a clickable startcolor.

<div id="cp1_Preview" style="background-color: #startcolorofyouchoice; width: 60px; height: 29px; padding: 0; margin: 0; border: solid 1px #000;border-bottom:0px;">
                <br />
              </div>
                            <div id="cp1_Start" style="background-color: #startcolorofyouchoice; width: 60px; height: 30px; padding: 0; margin: 0; border: solid 1px #000;cursor:pointer;" onClick="setStartColor();">
                <br />
              </div>


function setStartColor()
{  
  document.getElementById("cp1_Hex").value ="YouStarthexValue";

  cp1._cvp = new Refresh.Web.ColorValuePicker("cp1");

  // get an initial value
  cp1._cvp.color.setHex("YouStarthexValue");

  cp1.positionMapAndSliderArrows();
  cp1.updateVisuals();
}

Jon Wallsten
pingback October 6. 2007 14:02

Pingback from webmasterlibre.com

Webmaster Libre | Un colorpicker como el del Photoshop

webmasterlibre.com
Michael Sync October 6. 2007 21:46

Thanks.. nice one.. I'm gonna save your link...

Michael Sync
pingback October 7. 2007 00:15

Pingback from thethirdpart.com

  javascript 拾色器 by The Third Part

thethirdpart.com
pingback October 7. 2007 08:49

Pingback from tatuin.biz

Script - Cuentagotas como en el Photoshop | Tatuin - Mi mundo para Lelos

tatuin.biz
Leon Bogaert October 7. 2007 09:34

I get this error message  when I click go to http://johndyer.name/lab/colorpicker/ directly:

Line 6:    if (Request.UrlReferrer.ToString().IndexOf("johndyer.name") == -1)
Line 7: Response.Redirect("johndyer.name/.../...ipt-Color-Picker.aspx");

Leon Bogaert
Sergio October 7. 2007 23:15

Amazing!! is fantanstic and the photoshop look-a-like gives a advantage tip to this tool.

Thanks and cheers!!!!!

Sergio
pingback October 8. 2007 05:50

Pingback from daniblog.com

El Color Picker más Completo de la Red

daniblog.com
idearat October 8. 2007 08:53

John, nice work. No license. What license do you intend this to be available under?


idearat
Nancy October 8. 2007 10:07

this is great.  After downloading it, I made it into an AIR app (just for my own use of course) so now it's on my desktop.

Great job!
Nancy

Nancy
John Dyer October 8. 2007 10:17

I added an MIT license to the code and download. Have fun!
John Dyer's last post: Optimizing CSS with Base64 Embedded Images (with Bonus Utility!)

John Dyer
mrrau October 8. 2007 14:22

: ))
Your face is everywhere, hehe.

mrrau
pingback October 9. 2007 03:52

Pingback from phpblogger.net

phpblogger.net:   Javascript Farbauswahl wie bei Photoshop - Der frische PHP Blog

phpblogger.net
oct October 9. 2007 10:47

Awesome work!!!

I have a question though: what would need to be done in order to get rid of prototype.js?

Can I do this myself?

TIA

oct
John Dyer October 9. 2007 13:12

@oct: Of prototype, I'm using the 1) Class.create syntax, 2) the $() function, 3) the Event.observe/stopObserving functionality, and 4) a few positioning methods for the sliders.
John Dyer's last post: Optimizing CSS with Base64 Embedded Images (with Bonus Utility!)

John Dyer
oct October 10. 2007 04:23

John,

thanks a lot for your swift answer.

Reading the above now, let me put it another way: could you provide a version that's independent of prototype? Laughing

I actually hate this phrase but really mean it: keep up your (awesome) good work Smile

Thanks again!

oct
John Dyer October 10. 2007 09:08

@oct: I probably won't have time to do that. I may make some updates to it soon and I'll look at the prototype code at that time. One person has already ported it to ExtJS...
John Dyer's last post: Optimizing CSS with Base64 Embedded Images (with Bonus Utility!)

John Dyer
Will Gillen October 10. 2007 16:48

John,

Who ported it to ExtJS?  I would like to see that if possible.  I use ExtJS, and am very interested in this color picker you have creatd.

Thanks!

Will Gillen
John Dyer October 10. 2007 17:31

@Will: someone named "Collin T Miller". Unfortunately I don't have contact information for him. Someone from Ajaxian also put it in an AIR app for desktop use.
John Dyer's last post: Optimizing CSS with Base64 Embedded Images (with Bonus Utility!)

John Dyer
pingback October 10. 2007 19:22

Pingback from toonz.wordpress.com

links for 2007-10-10 « toonz

toonz.wordpress.com
pingback October 10. 2007 21:23

Pingback from kobak.org

kobak pont org    » links for 2007-10-11

kobak.org
pingback October 11. 2007 06:38

Pingback from informatica-practica.net

» Color Picker, selector de colores en tu página web | Solo Código |

informatica-practica.net
Allan October 11. 2007 10:52

Great job, wonderfull research and aplication, tank´s to do the internet more friendly!

Allan
pingback October 11. 2007 15:52

Pingback from webt.wordpress.com

PhotoShop-like JavaScript Color Picker « Web Technology @ CCBC

webt.wordpress.com
Stefan October 11. 2007 16:03

Great job, integration couldn't be easier, works like a charm, thanks!

Stefan
jmirkin October 16. 2007 12:25

John, this is exactly what i was looking for. Great work. I haven't had a chance to go through the code yet. I wanted to know if there's a way to resize the colorpicker.

jmirkin
drewp October 18. 2007 02:27

@jmirkin, something like this will make it half-size:

<style type="text/css">
              #%(tag)s_ColorMap, #%(tag)s_ColorMap img {
                width: 128px !important;
                height: 128px !important;
              }
              #%(tag)s_ColorMap img {
                margin-top: -256px !important;
              }
              #%(tag)s_ColorBar, #%(tag)s_ColorBar img {
                height: 128px !important;
              }
              #%(tag)s_ColorBar img {
                margin-top: -256px !important;
              }
            </style>

where %(tag)s is the name of the picker instance to resize.

drewp
pingback October 18. 2007 17:18

Pingback from ashwell.co.za

Marc Ashwell  » Blog Archive   » links for 2007-10-18

ashwell.co.za
pingback October 18. 2007 21:34

Pingback from mtnconcept.com

    Free Tools» Blog Archive
    

mtnconcept.com
Dimitri Tishchenko October 22. 2007 15:03

Hands down the best colorpicker I have ever seen.  Very clean prototype code.  Thanks you!

Dimitri Tishchenko
pingback October 27. 2007 18:52

Pingback from webtodoweb.com

webtodoweb.com  » Blog Archive   » Javascript Color Picker: selección de color estilo PhotoShop

webtodoweb.com
jonese October 29. 2007 17:16

For some reason in IE7 when the script runs it shows a syntax error on line 2 col 1. Any idea what might be causing it? i can send the generated HTML if it'll help.

jonese
pingback October 30. 2007 17:03

Pingback from discount-perfume-hq.com

Womens Discount Perfume » Not perfume emporium but still interesting…

discount-perfume-hq.com
pingback November 1. 2007 12:55

Pingback from eatajax.com

Photoshop like color picker | ajax examples and demos source

eatajax.com
trackback November 5. 2007 16:51

Trackback from Sascha Hameisters Javascript Input Output

Ich wünsche mir einen Regenbogen…

Sascha Hameisters Javascript Input Output
pingback November 10. 2007 20:50

Pingback from weblatam.com

Colección de utilidades AJAX 1 | WebLatam

weblatam.com
Matt Stow November 14. 2007 16:39

I get the same Invalid Character (Line 2, Char 1) error in both IE 6 and 7 out of the box. And for some reason, it won't let me debug it in Visual Studio.

Any help would be greatly appreciated.

Matt Stow
Matt Stow November 14. 2007 16:42

Also, why can't you paste hex codes directly in? It automatically changes them to something completely different Frown

Matt Stow
John Dyer November 14. 2007 17:09

@Matt,
I just updated it to the full release of prototype 1.6 (which seems to have fixed the IE issue when accessing through the filesystem) and changed the behavior of the hex box to allow copy and paste. Let me know if that helps.
John Dyer's last post: Optimizing CSS with Base64 Embedded Images (with Bonus Utility!)

John Dyer
Matt Stow November 14. 2007 18:27

w00t! Awesome work John.

Thanks for the speedy response.

Matt Stow
pingback November 15. 2007 22:14

Pingback from centuryidea.cn

Cloud of May  » Blog Archive   » 强大的web颜色选择组件-PhotoShop-like JavaScript Color Picker

centuryidea.cn
Arjun December 17. 2007 04:02

Hi,

I've many instances of color picker in a page. When there is a single picker it works fine. However in case of multiple instances in a same page, the picker is behaving abnormal. It does not show up the slider image for some picker and the color values in H S B text boxes shows NAN.

Any help on this?

Arjun
Justin George December 18. 2007 18:33

You just saved me about twenty hours of work on this, for something that wouldn't have been half as nice. Thanks!

Justin George
Guus December 19. 2007 13:22

First of all great work. But I run into a little problem. When I run it local on my laptop everthing works fine, but my server isn't really happy with it...

I get the error "Refresh not defined". See it at http://qr2v39nc5ga2zcgj.com/colorpickertest.html (sorry for the url, its a test server...)

Can you help me out?

Regards.

Guus
Sean Gallagher December 19. 2007 15:14

Hi, looks great and works great on your site.

Although I can't get it working myself. The version you have for download appears to be different than the contents of the demo version you have on your site.

The problem I am running into is that when I view the color picker all I get is the text boxes for the hue, saturation, ect... a white box above that and thats it.

Any help would be greatly appreciated, as this look like a great script.

P.S. I think I have the same issue as Guus (it looks the same  as it does on is server and I get that same error).

Sean Gallagher
John Dyer December 19. 2007 16:23

@Guss and @Sean, I just updated the download and tested it and it seems to be working for me.
John Dyer's last post: Optimizing CSS with Base64 Embedded Images (with Bonus Utility!)

John Dyer
Michael December 20. 2007 07:14

I have the same problem as Guss and Sean. When I try to open the file on my hard drive with firefox or IE it works fine. However, when I open the html on my apache tomcat server, then the webserver only shows a white box when i run the html.

Michael
John Dyer December 20. 2007 09:53

You might try making sure there is no Google analytics code at the bottom of the page. It's not in the download, but if you save the page at /lab/colorpicker/ it will still have the script tags for analytics at the bottom.
John Dyer's last post: Optimizing CSS with Base64 Embedded Images (with Bonus Utility!)

John Dyer
Guus December 21. 2007 04:23

So why would that make a difference? I tried to integrate it in our website, which indeed uses google analytics. Is there a conflict of variables or something?

Regards

Guus
Guus December 22. 2007 06:43

Hmm Tried the updated download. It doesn't seem to work either on the apache server. It does work on my local filesystem. I just uploaded the files to www.qr2v39nc5ga2zcgj.com/test/default.html

Still get the same error... I can't figure out what the problem is. By the way, there is no google analytics code at the bottom...

I really like your color picker and want to use it on our site... Hope you can solve the problem.

By the way I'm not really familiair with javascript, I'm a php develloper...

Regards,

Guus
John Dyer December 22. 2007 20:34

@Guss,
When I look at that page, the script tags point to www.qr2v39nc5ga2zcgj.com/.../colorpicker.js which doesn't exist. I think you just need to check where you're putting the files and make sure they are linked properly.
John Dyer's last post: Optimizing CSS with Base64 Embedded Images (with Bonus Utility!)

John Dyer
Harriet December 24. 2007 02:09

Hi John - Yours may look like some others, but trust me I have installed and tried over a dozen and yours is the only one that works consistently. I *really* appreciate that you've made this available. I would like to add a small feature and can't get it quite right. I would like to be able to have a different event on the page stuff a hex value in and change everything accordingly. I saw the post above and have tried something like this:

function SetColor(strHex)
{
    document.getElementById("cp1_Hex").Value = strHex;
    cp1._cvp = new Refresh.Web.ColorValuePicker("cp1");
    cp1._cvp.color.setHex(strHex);
    cp1.positionMapAndSliderArrows();
    cp1.updateVisuals;
  
}

but this doesn't quite work right. Can you set me straight about what I should call to reset everything based on a new hex value, once the page is already loaded. Thanks very much again for this great piece of code. - Harriet

Harriet
Nate December 24. 2007 14:09

The reason others are having issues is due to filesystem case-sensitivity. You named the file with mixed case (ColorPicker.js), but try to load them as all-lowercase (colorpicker.js). This will break things on most operating systems, because colorpicker.js does not exist - only ColorPicker.js does!

Also, your positioning entirely breaks if the page is given a standards-complying doctype, such as HTML 4.01 Strict or XHTML 1.0 Strict. The transitional doctypes work, but those of us using strict doctypes are left hanging in the dark.

Nate
Nate December 24. 2007 14:26

As a side note to that, if anybody manages to make this work in standards mode rather than broken quirks mode, please email me at pqscvkrfet at the domain known as gmail dot. com. Forget IE5.5.

Nate
Nate December 24. 2007 14:38

Let's make a third comment. ;)

The strict doctype issue is actually just the image display type. All you need to add to your css is "img { display: block; }", and this picker will also work in strict doctypes.

This picker really is great. Even if the insides are a little scary (any javascript that greps the useragent string is frightening). Thanks John, especially for the MIT license!

Nate
John Dyer December 24. 2007 14:46

@Nate, thanks for your comments. I actually wrote this code about 2 years ago, and I have been wanting to clean it up for some time (including adding strict doctype support). Thanks for catching the case issue as well. I'll try to get some of those updates in soon. Merry Christmas!
John Dyer's last post: Optimizing CSS with Base64 Embedded Images (with Bonus Utility!)

John Dyer
trackback December 25. 2007 01:41

Trackback from PukiWiki Plus! (PukiWiki/TrackBack 0.4)

PhotoShop-like JavaScript Color Picker

PukiWiki Plus! (PukiWiki/TrackBack 0.4)
Asit December 26. 2007 04:37

HI John
I have figure out the web server problem (that blank white box),
The problem is that in your default.html you have written everything in lowercase (colorpicker.js, etc...) but the file name on disk is ColorPicker.js (C and P is in uppercase ). just match the case of all files and check it out
its working

Asit
John Dyer December 26. 2007 12:07

@Asit, @Nate, @Guus,
I've updated the download to include all lowercase filenames and an XHTML doctype (by changing images to display='block' in the script). Have fun.
John Dyer's last post: Optimizing CSS with Base64 Embedded Images (with Bonus Utility!)

John Dyer
Ramon December 27. 2007 02:34

Hi,

I found your excellent color picker tool. I want to show/hide the tool on a click. To do this I've put the code for the colorpicker in a div which is positioned absolute. But when i load the page the slider and the circle are both in the top-left corner of the page. Im not sure what to do next. Can you help me?

Ramon

Ramon
Sean Gallagher December 30. 2007 21:28

@John,
Thanks for updating the download. It now works great!
You did a great job, and I want to thank you for creating such an amazing color picker and giving it the MIT license.

Your friend,
Sean

Sean Gallagher
jc21 January 3. 2008 01:26

It seems that if the colorpicker is surrounded in a div with a css property of display:none, that when the div is displayed, the color picker doesn't work. However, on the same page, without the css style, it works fine.

Of course an easy workaround would be to hide the div in the onload event after the cp initialisation. However I personally hate the downloading 'mess' that suddenly dissapears when loading a page.

I did manage to work out a much better solution. When displaying the div using the js, after the css change is made I then instantiated the colorpicker. Although, when you hide the div again, two images still remain visible: the mappoint and rangearrows, as these are present in the dom tree just beneath the body. So I've modified your Slider class to add a className to the images, so I can hide them too.

Well worth the effort though, great tool!

jc21
Daniel January 11. 2008 16:14

Hi John
Thank you very much for your great color picker. I just integrated it into my tool I called "Color Name & Hue". It should help colorblind people to categorize colors into main hues.
http://www.colblindor.com/color-name-hue/
I hope I accomplish your rules of usage. I had to do some adjustments to it. Otherwise, please let me know.
Daniel

Daniel
Shivanand Sharma January 15. 2008 10:34

An excellent exaxmple demonstrating the potential of Javascript.

Shivanand Sharma
Edward M. January 18. 2008 16:17

Hello - I saw someone asked above about how to force an update to the display of the colorpicker, if another event updates the hex value textbox. However, I didn't see an answer. Can you give a quick example of what could be called to reset everything based on a new hex value (that isn't typed in by the user)? Thank you - Ed

Edward M.
Martin Francis January 28. 2008 14:42

Hi fellow Godbiter!

Many thanks for producing this superb colour picker - thanks to your very generaous MIT licence I will be integrating it into a Church Website CMS I have developed called Ecclesiact.

Thanks again,
God bless,

Martin Francis
<><

Martin Francis
Moritz February 3. 2008 12:58

Hey John,

great color picker. It was exactly what I searched for! Thank you!

@Ramon, @Arjun and @John:
I have the same problem in IE. In firefox everything is working fine. "Sometimes" the slider and pointer is on the top left and when trying to slide shows NANANA in the input fields. I open the colorpicker in a "prototype window class" window. Opening one or more instances makes no difference.

I couldn't find out a regularity.

Does anyone have a solution?

Moritz
Ümit February 6. 2008 09:19

Great work. how can i show / hide color picker?

Ümit
Roger February 18. 2008 08:43

How do you pull out the hex color value? I looked for a get function but there doesn't seem to be one.

Roger
Thi Nguyen February 18. 2008 13:27

For those who want to be able to update the values and graphical displays of the color picker without interacting directly with it, here is the code I have for it:

// this gets the hex value from whatever form field you want.
var inp = document.getElementById( cp_name + '_Hex' );

// the input field is directly tied into the colorpicker app
// so we change the hex value in that field
// and then call the setValuesFromHex() function to change the HSB/RGB values accordingly
// then call the various graphical update functions to update the pointer and such
// see colorpicker.js
// cpObj is the color picker object that is generated

cpObj._cvp.setValuesFromHex();
cpObj.positionMapAndSliderArrows();
cpObj.updateVisuals() ;

Thi Nguyen
Honza Odvarko February 18. 2008 16:20

Hi,
nice work... here is my color picker, much simpler:
http://jscolor.com

Honza Odvarko
SiNo February 25. 2008 12:28

missing nothing - just a little this.
last line (#132) of function hexToWebSafe() in ColorMethods.js

SiNo
SiNo February 25. 2008 18:02

and - sorry - there are still (or again?) mixed case filenames in the zip so that default.html doesn't show much on linux

SiNo
Rikkert Koppes February 26. 2008 10:35

very cool, I had the very same idea the other night (layering images) and started some programming today. I had r,g and b mode working when I started searching for references for the original photoshop palette (don't have photoshop installed). I then stumbled accross your thing, which is exactly what I had in mind.

I might still want to write mine though, I am not too fond of prototype (because of its DOM pollution), furthermore, I don't think one really needs it in this case

Rikkert Koppes
kobe February 26. 2008 23:21

Cool!
It seems like the code at line 135 in file ColorPicker.js is unwanted, isn't it?

[code]
135:    this.color = null;
[/code]

kobe
D March 1. 2008 14:28

I tried installing this on my Rails app and couldn't get it to work... ended up installing JSCOLOR - thanks Honza.

D
M March 11. 2008 12:06

sorry john, tried yours, but jscolor from Honza is indeed much easier to install

M
pingback March 14. 2008 05:52

Pingback from mywebdesigntools.com

7 javascript and dhtml color picker solutions for web designer | My web design tools

mywebdesigntools.com
Free Collection March 17. 2008 04:58

This is really a cool application. One of the best web design tools ever. Thanks for sharing.

Free Collection
Dave March 17. 2008 14:59

I like this code, thanks a lot

Dave
zinderud March 21. 2008 09:10

Very good job !

zinderud
Wilson March 30. 2008 18:07

Hi,

I've tried installing this straight out of the zip file on two different servers and I get a javascript error from the main default.html file at line 200: "Refresh is undefined" when trying to view the page in IE7. It doesn't work for me either in Firefox 2.0.0.13.

The line the browsers choke on is:

Event.observe(window,'load',function() {
  cp1 = new Refresh.Web.ColorPicker('cp1',{startHex: 'ffcc00', startMode:'s'});
  })

Any ideas on what I can do to fix it? The demo at http://johndyer.name/lab/colorpicker/ works just fine.

W

Wilson
fei April 8. 2008 18:20

very nice!

fei
randy April 14. 2008 17:44

Great stuff, I have everything working but one thing. I am putting it in a iframe.
When it inits the arrow and slider are up in the top left and will not move. If I put in a hex value then they work. If i access the page directly it works fine. Just the in the Iframe.
Any suggestions?

Thanks again for doing this

randy
randy April 14. 2008 17:58

just an update to my post. So far i have found that this._barHeight in Slider.jsp is 0 when default.html is inside the iframe and 256 if called directly.

Thanks again

randy
pingback April 19. 2008 17:03

Pingback from blog.open-solutions.pl

Open Solutions Blog  » Blog Archive   » The Best of Open Source: Color Picker

blog.open-solutions.pl
padma April 23. 2008 04:45

Hi,

I need multiple color pickers in single page depending on the selection (either 1 or 2 color pickers).
sometimes the slider image and pointer image is on the top left and when trying to select color shows NAN0533 in the input fields.

Can you help me out?

padma
Andrew haycock April 30. 2008 06:58

great app, have intergrated it into my site but have small issue. the map point image and slider arrows do not want to sit inside my div. they are attached to the colour picker but they sit behind the div and do not appear or disapear along with the div, any ideas would be appriciated

Andrew haycock
hooters May 5. 2008 02:18

this is pretty fucking amazing . kudos to you man!

hooters
Dimitry May 5. 2008 07:34

Same problem with the slider positioning here. Didn't figure out how to fix. Love your script, but having it in a popup window is a blasphemy within web 2.0 world. Smile

Dimitry
pingback May 7. 2008 02:40

Pingback from blog.libinpan.com

links for 2008-05-07 | Libin Pan

blog.libinpan.com
pingback May 9. 2008 20:47

Pingback from jspt.coolwebwindow.com

JSPT - Photoshop風カラーピッカー

jspt.coolwebwindow.com
锐风 May 12. 2008 22:33

There's a bug in IE7.
箭头无法被显示.

锐风
pingback May 13. 2008 17:07

Pingback from devkick.com

Milestone 01 - 70+ High-End Components for Web Designers and Developers : DevKick Blog

devkick.com
pingback May 14. 2008 12:50

Pingback from af-design.com

AF-Design    » JavaScript Color Pickers

af-design.com
pingback May 19. 2008 09:44

Pingback from pixelco.us

Javascript Color Picker - Implementa un selector de color como el de Photoshop - Desarrollo | pixelco.us blog

pixelco.us
nick May 23. 2008 12:47

great work!

just one small remark: the example page (default.html) in your distribution package uses lowercase javascript sources while the file names are capitalized. this caused the colorpicker to malfunction on my server...

nick
Michael Angelo Tarongoy May 28. 2008 02:01

Thanks bro! I have been looking for this...

Michael Angelo Tarongoy
Amiri May 30. 2008 08:09

Thanks! This is fantastic! I parametrized the 'cp1' so it could accept arbitrary table ids, so I could put more than one on a page at a time. Works great. It's kinda big, though... I'm working on trying to shrink it a little.

Amiri

Amiri
Raphaël June 11. 2008 16:05

I found a bug in mode R, G and B. We don't have the correct color in the slider.

The selected color differ from the color showed in the slider.

UPGRADE TO DO ( tested ) in "ColorPicker.js"

Function : Refresh.Web.ColorPicker.prototype.updateSliderVisuals
Line : 571

replace :

var horzPer = (hValue /256)*100;
var vertPer = ( vValue/256)*100;    
var horzPerRev = ( (256-hValue)/256)*100;
var vertPerRev = ( (256-vValue)/256)*100;
this.setAlpha(this._barL4, (vertPer>horzPerRev) ? horzPerRev : vertPer);
this.setAlpha(this._barL3, (vertPer>horzPer) ? horzPer : vertPer);
this.setAlpha(this._barL2, (vertPerRev>horzPer) ? horzPer : vertPerRev);
this.setAlpha(this._barL1, (vertPerRev>horzPerRev) ? horzPerRev : vertPerRev);

by:
x = parseInt ( hValue );
y = parseInt ( vValue );
var n1 , n2 , n3 , n4;
if( x == y ){
  n2 = n3 = 0;
  n1 = x / 255;
  n4 = 1;
} else if( x < y ){
  n3 = 0;
  n1 = x / 255;
  n2 = ( y - x  )/( 255 - x );
  n4 = 1;
} else if( x > y ){
  n2 = 0;
  n1 = y / 255;
  n3 = ( x - y )/( 255 - y );
  n4 = 1;
  }
a = [
  { id:"_barL4" , n: n1 },
  { id:"_barL3" , n: n2 },
  { id:"_barL2" , n: n3 },
  { id:"_barL1" , n: n4 }
  ];
for( var i = 0 , ni = a.length ; i < ni ; i++ )
  this.setAlpha( this [ a[i].id ] , a[i].n * 100 );


Function : Refresh.Web.ColorPicker.prototype.setColorMode
Line : 256

replace:
case 'r': ...
  break:
case 'g': ...
  break:
case 'b': ...
  break:

by :
case 'r':
case 'g':
case 'b':
  var that = this , f = function(s1,s2){that.setImg( that[ s1 ], that.settings.clientFilesPath + s2 )};
  var s = { r:'red',g:'green',b:'blue'}[ colorMode ];
  this[ "_" + s +"Radio" ].checked = true;
  f( '_mapL2' , 'map-' + s + '-max.png' );
  f( '_mapL1' , 'map-' + s + '-min.png' );
  f( '_barL1' , 'bar-' + s + '-bl.png' );
  f( '_barL2' , 'bar-' + s + '-br.png' );
  f( '_barL3' , 'bar-' + s + '-tl.png' );
  f( '_barL4' , 'bar-' + s + '-tr.png' )  ;
  break;


Thank you !

Raphaël
mostafa June 13. 2008 02:31

thank you.it is very usefull for me.

mostafa
techy June 20. 2008 05:56

Thanks for such great and nice color picker.
It is wonderful.
I like it very much.
Thanks

techy
alojaweb June 22. 2008 03:27

excellent solution, thanks for the contribution.

good very good.

alojaweb
pingback June 24. 2008 07:15

Pingback from micksam7.com

A Dolphin’s Journal of Events  » Blog Archive   » Back to Web Dev

micksam7.com
pingback June 25. 2008 17:57

Pingback from igeek.com.ar

iGeek  » 32 Codigos Ajax y Javascript bastante interesantes

igeek.com.ar
iddaa July 20. 2008 11:03

thank you

iddaa
trackback July 22. 2008 18:11

Trackback from John Dyer

Show Commenter's Latest Post: BlogEngine.NET Extension

John Dyer
Mittal August 7. 2008 21:01

Hi John,

This is excellent thing and saved my lot of time/

Is there any way to show and hide the mappoint.gif and rangearrow.gif?

I am trying to put the whole colour picker in a div and with javascript I want to show and hide that div.
Every thing else is working fine but these images are not hiding?

Is there a solution to this?

Mittal
Matt August 20. 2008 00:39

Great work!  
Raphaël's changes fixed the R G and B sliders, but I also noticed that the saturation bar does not show the right color for me.  No matter what the brightness is set to, it is always white at the bottom of the bar and the slider doesn't match the selected color.  

Matt
Matt August 20. 2008 01:56

I decided to have a stab at fixing my problem.  I don't know javascript, so I just made some little tweaks to colorpicker.js.  Of course, this introduced a panoply of bugs, but it's close.  I can no longer click and drag inside the slider box, and the slider looks ugly when B is set to 100%.  

First, I copied bar-saturation.png to bar-saturationb.png, and changed the copy to black, preserving the transparency.  Then I did the following:

Starting at line 225 I changed

// SLIDER
// bottom: color
this.setBG(this._barL3, this.color.hex);

// top: graduated overlay
this.setImg(this._barL4, this.settings.clientFilesPath + 'bar-saturation.png');

this._map.settings.xMaxValue = 359;
this._map.settings.yMaxValue = 100;

to

// SLIDER
// bottom: color
this.setBG(this._barL1, this.color.hex);

// top: graduated overlay
this.setImg(this._barL2, this.settings.clientFilesPath + 'bar-saturationb.png');
this.setImg(this._barL3, this.settings.clientFilesPath + 'bar-saturation.png');

this._map.settings.xMaxValue = 359;
this._map.settings.yMaxValue = 100;

and added a line (underlined) at about 529

case 's':
  var saturatedColor = new Refresh.Web.Color({h:this.color.h, s:100, v:this.color.v});
  this.setBG(this._barL3, saturatedColor.hex);
  this.setAlpha(this._barL3, this.color.v);
  break;

case 'v':

Matt
Santy August 21. 2008 22:31

This is the best colorpicker i found and i would like to use it! But I made my site local and everything worked great and when i uploaded my site it didnt work anymore...All i see are the formfields. I uploaded exactly how it was local (using WAMP). Server issue? Did i look over anything? Any suggestions? THX

Santy
tom armstrong August 22. 2008 11:03

Dear John,

Thank you for creating this excellent Color Picker. Like many others here, e.g. Mittal on October 7, 2008, I am trying to integrate the color picker into a page so that it opens in a hide/show div, rather than opening another window. I implemented Jon Wallsten's suggestion from October 5, 2007 to set the initial color, which worked perfectly. Jon Wallsten attached to cp1._cvp to initialize the color. I am trying to attach to cp1._map and cp1._slider to do (I think):

cp1._map.Arrow.style.display = '';
cp1._slider.Arrow.style.display = '';

and

cp1._map.Arrow.style.display = 'none';
cp1._slider.Arrow.style.display = 'none';

My attempts to attach have not worked, so I don't know if this is the right approach.

Any suggestions?

Thanks,
Tom Armstrong

tom armstrong
Santy August 22. 2008 19:39

just figured out what the error is

Error: Refresh is not defined
Line: 201

IE explains the function refresh is not defined... but it is!!
the default.html from the zip package doesn't work either.
Anybody?

Santy
Georg Tavonius August 24. 2008 08:23

Genious! Really good thing. Except of using of prototype. Wink
I would like to use it, but I already use jQuery in my projects, and another big library would be to much. Can you really easily strip prototype out of it? Would be great for more people, I think.

Cheers, and great work,
Georg

Georg Tavonius
Ciko August 24. 2008 14:25

i have some problem like Wilson,
get a javascript error from the main default.html file at line 200: "Refresh is undefined"..

Ciko
John Dyer August 24. 2008 15:33

For those on L/UNIX systems/hosting, please make sure to rename all the files as lowercase (i.e. rename ColorPicker.js to colorpicker.js)
John Dyer's last post: Optimizing CSS with Base64 Embedded Images (with Bonus Utility!)

John Dyer
Santy August 25. 2008 00:00

Hi John,
This is indeed the solution to the "Refresh not defined" problem.
Thanks!!!

Santy
Shota Watanabe August 25. 2008 05:25

Hello, John.
Great Tool! Thanks.

I found kind of a bug in this tool, so report that.
When we checked RGB mode and slide, we can find FF100FF like color code.
This is related mapValueChanged function line 330 - 381
We needed to change '256' to '255' (because value is 0 ~ 255)

regex: s330,381/256/255/g

Thank you for all,
Shota Watanabe

Shota Watanabe
ptdorf August 26. 2008 06:46

Its great! Thanks a lot for sharing!

ptdorf
pingback August 30. 2008 09:53

Pingback from xtreme-design.ro

Photoshop-Like JavaScript Color Picker

xtreme-design.ro
Steve September 7. 2008 05:44

This is the work of genius, thank you for sharing it!

Steve
deamerica September 12. 2008 02:37

  
I congratulate you good job, just implement this solution one that section of my website.

Thank you

deamerica
Hendrik M.J. Arnoldus September 14. 2008 11:22

I ordered a copy of this colorpicker and payed the required amount  for it (PayPal) to Applied Search Ltd. No software was delivered however.

Hendrik M.J. Arnoldus
John Dyer September 14. 2008 13:48

@Hendrick,
As noted in this post, the colorpicker is free (MIT). You might want to contact Applied Search and ask them to take up your request.
John Dyer's last post: Optimizing CSS with Base64 Embedded Images (with Bonus Utility!)

John Dyer
Pete September 14. 2008 17:34

Having problems with the files. I download and unzip and it works right on my desktop. However I upload the files to my client's webserver and only thing I changed was default.html -> picker.html and I receive a JS error "Refresh is not defined". All the files are there, it works locally, and the structure / directories remain the same. Ideas?

Pete
Hendrik M.J. Arnoldus September 15. 2008 06:47

I am terribly sorry, my earlier message was a horrible mistake (posted to the wrong blog because of a bookmark mistake). I confirm that I have no problem with your software (which is free and can be downloaded directly). My apologies again.

Hendrik M.J. Arnoldus

Hendrik M.J. Arnoldus
Sal Gambino September 24. 2008 04:46

Hi John,
The color picker is a great tool. I was looking for something like this to enhance/modify for a school project regarding color vision deficient learners and the difficulty they have seeing poorly chosen color palettes during presentations. With a lot of hard work, I'm very happy with the final product (since I'm relatively new to JavaScript).

Here's a link to the end result: two color pickers modifying the background and foreground color properties of a single new text area.

http://www.salgambino.com/cp_page.shtm

Sal Gambino
Scotty Waggoner October 12. 2008 02:42

Has anyone found a solution to make the Arrows appear and disappear when the color picker is in a div that can be shown and hidden?  Also this div that I am trying to put the color picker in has a z-order value and the arrows end up being hidden behind the div.

Another problem I am having is when the picker is first loaded, and I try to drag the arrows around the selected color turns black and stays black until I manually change the hex code.  Then it works fine.

Scotty Waggoner
MMF October 16. 2008 22:56

Good

thanks a lot Smile

MMF
neoweb October 20. 2008 22:46

  
I was able to configure although with difficulty, but this excellent tool, thanks for the contribution.

neoweb
Pete Jordan October 21. 2008 06:47

Hi,

Thanks for this: it's nicely coded, and is saving me huge amounts of wheel reinvention. Coupla patches:

1. there's a bug in the Refresh.Web.Color constructor that stops base images being updated if the component being tested for in the constructor is zero:

diff -c -r1.1 ColorMethods.js
*** ColorMethods.js     21 Oct 2008 10:31:26 -0000      1.1
--- ColorMethods.js     21 Oct 2008 10:32:39 -0000
***************
*** 60,70 ****
        };
  
        if (init) {
!               if (init.hex)
                        color.setHex(init.hex);
!               else if (init.r)
                        color.setRgb(init.r, init.g, init.b);
!               else if (init.h)
                        color.setHsv(init.h, init.s, init.v);
        }
  
--- 60,70 ----
        };
  
        if (init) {
!               if (init.hex!=null)
                        color.setHex(init.hex);
!               else if (init.r!=null)
                        color.setRgb(init.r, init.g, init.b);
!               else if (init.h!=null)
                        color.setHsv(init.h, init.s, init.v);
        }

2. I've anonymised the help function in the Refresh.Web.ColorPicker setColorMode method to avoid any namespace conflicts:

*** ColorPicker.js      21 Oct 2008 10:31:27 -0000      1.1
--- ColorPicker.js      21 Oct 2008 10:40:58 -0000
***************
*** 161,167 ****
                this.color = this._cvp.color;
  
                // reset all images
!               function resetImage(cp, img) {
                        cp.setAlpha(img, 100);
                        img.style.backgroundColor = '';
                        img.src = cp.settings.clientFilesPath + 'blank.gif';
--- 161,167 ----
                this.color = this._cvp.color;
  
                // reset all images
!               var resetImage = function (cp, img) {
                        cp.setAlpha(img, 100);
                        img.style.backgroundColor = '';
                        img.src = cp.settings.clientFilesPath + 'blank.gif';

Oh, and one minor quibble: your default.html demo page loads its javascript files with lower case names; the physical filenames are in camel case. Not everybody operates on non-case-significant file systems Smile

Pete Jordan
mina October 23. 2008 13:09

Hi, please how can I get the code to add in my blog?

hola, quisiera colocar en mi blog el colorpicker, y necesito un código para publicarlo en mis entradas, como lo puedo hacer, Gracias.

mina
pingback October 26. 2008 19:07

Pingback from ceslava.com

Generador online de gráficas | ..: Cristian Eslava |  Diseño Gráfico / Web | Maquetación | Formación :..

ceslava.com
pingback October 27. 2008 03:55

Pingback from speckyboy.com

20 Amazing Javascript Prototype Scripts, Elements, Widgets, Classes.. : Speckyboy - Web Design, Web Development and Graphic Design Resources

speckyboy.com
Chris Wolf October 28. 2008 12:28

Hey, just a quick bug I found (hope it's a bug! =D), but whenever I'm in the hue view of the color picker, and I enter a value of "CC0000", the main color window doesn't update =(

Otherwise, thanks for a fantastic color picker! I'm using it everywhere! Awesome!

Chris Wolf
Unreal Media November 7. 2008 22:19

Excellent. That works really well. Nice and smooth Smile

Im using it on my website. Your in an iframe ;)

http://www.unrealmedia.co.uk/233/colour-picker/

Unreal Media
Ehsun November 15. 2008 01:24

Hi,
Thanks for you nice component. Can you help me to sort out this problem:
The colorPicker is working fine in my local server, but when I upload it, it nags the Refresh is undefined. Can you check it here:
www.myofflines.com/colorpicker/colorpicker.php

Ehsun
Ehsun November 15. 2008 04:21

I found the problem!!!
You named the files in CamelCase style but refer to them in the page in all small letters which does not make any problem in windows servers (which you use ;) ) but in the linux servers is totally different! Laughing

Ehsun
Dilip November 15. 2008 22:34

Thanks bro! genius work. I started using it in my website. Really works cool. Is there any copyright restictions for this? Please let me know before I put in the production server. Thanks once again...

Dilip
Harley November 27. 2008 02:02

Has anyone else had a problem where when the color picker is inside DIVs with border > 0 the selector icons become offset from the main color window?

The problem resolves when I set the border to 0px in my CSS but that is not an option for the final page...

Thanks!

Harley
Hou Enrong November 29. 2008 19:34


Thank you, John.
Used the JS Color Picker for my Chop API Color Scheme experiment-thingy.

http://www.roshisoft.com/chopapicode.html

Love this JavaScript library. I quickly threw this code generator together. Please pardon the mess. Smile

Hou Enrong
pingback November 29. 2008 19:41

Pingback from roshisoft.info

Chinese Chop API Code Generator Using John Dyer’s JavaScript Color Picker

roshisoft.info
jade January 13. 2009 18:35

any body know how to implement color picker in vb, i am working on a simple fashion software for my cheap fashion website http://www.fashonplc.com

jade
Chris Corbyn January 14. 2009 23:09

Awesome, thanks so much for this!  I'll post what I've used it for soon (another cool JS project that will appeal to programmers).

Chris Corbyn
Chris Corbyn January 15. 2009 03:40

I've got a quick question (hopefully).  The way I'm using the color picker is in a new window (via window.open).

In the parent window I have an input element that needs to the hex value in it.  What I'd like to achieve is to have the hex value in the parent window's input element update on-the-fly with the inputs in the color picker window.

Effectively I'd like something like:

colorPicker.onUpdate = function() {
  //do whatever while the user is sliding the slider around
};

Is this easy to add, or does it already exist?

Chris Corbyn
Marcel Lainez February 6. 2009 04:24

Wow!!! You are a genius!!! That is an awesome script!!!

Marcel Lainez
S.Ajanthan February 17. 2009 04:45

SUPERB SCRIPT!. Awesome.. thanks for sharing with us.

S.Ajanthan
Adam February 22. 2009 18:07

I'm having a problem using this script in Firefox 3.0.4 in regards to quirks mode. Firefox is only displaying the picker correctly when the rendering mode is quirksmode. If rendered in standards mode, is given (as it should be) the slider bar and the colourmap images are pushed down.
Here are a few screenshots rendered with Firefox 3.0.6:
http://www.meetcweb.com/files/colourpickss/

I have tried making a fix for this, but its still not perfectly aligned. I created 2 classes in CSS and applied these classes to certain elements in the script.

slider.js line 44, after add:
this._arrow.className = 'colorpicker margin';

colorpicker.js line 68, inline add:
, className: 'colorpicker'
after
'blank.gif', width:256, height:256

add the same on lines 72, 87, 91, 95, 100

For the CSS classes,
.colorpicker {
display: block;
}
.margin{
margin-top: 1px;
margin-left: 3px;
}

Adam
Slopjong March 9. 2009 19:52

Really great work John. As you already saw on twitter I'm using it in my wordpress plugin Collroll (http://wordpress.org/extend/plugins/collroll/).

It would be nice to have a function like cp<index_or_what_ever>.hide() and cp<index_or_what_ever>.show() to control the visibility of the sliders.

Please notify me if you've updated your cool color picker Smile

Slopjong
Jon March 18. 2009 17:03

This is a great script.  Exactly what I was looking for.  Thanks for sharing this!

Jon
pingback June 9. 2009 08:07

Pingback from ephrontech.wordpress.com

Prototype.js Javascript Framework « Ephrontech's Blog

ephrontech.wordpress.com
Comments are closed
Web Statistics