PhotoShop-like JavaScript Color Picker

September 27, 2007 | Uncategorized | 170 Comments

Demo Download

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 256×256 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 4×4 or 8×8 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

170 Responses to “PhotoShop-like JavaScript Color Picker”

  1. mud says:

    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!

  2. John Dyer says:

    mud, that Opera plugin looks great! Thanks for the tip on the OSX bug. I’ll check it out.

  3. Benjiiim says:

    Hello,

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

    Thanks !

  4. " Some pickers try to generate the entire color map in JavaScript by drawing a 256×256 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.

  5. justin says:

    Seems an awful lot like this one:

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

  6. John Dyer says:

    @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.

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

  8. John Dyer says:

    @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.

  9. joe larson says:

    brilliant

  10. sudopeople says:

    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).

  11. Justin Etheredge says:

    Ingenious! Bravo!

  12. John Dyer says:

    @sudopeople, you can instantiate the ColorPicker using:

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

    to set the starting color and mode.

  13. JonWallsten says:

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

  14. Jon Wallsten says:

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

  15. John Dyer says:

    @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′});
    });

  16. Jon Wallsten says:

    Thanks, i managaed to figure it out yesterday! :)
    Just a few things:)
    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! :)
    , Jon

  17. Jon Wallsten says:

    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();
    }

  18. Michael Sync says:

    Thanks.. nice one.. I’m gonna save your link…

  19. Leon Bogaert says:

    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("http://johndyer.name/archive/09/28/2007/PhotoShop-like-JavaScript-Color-Picker.aspx&quot;);

  20. Sergio says:

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

    Thanks and cheers!!!!!

  21. idearat says:

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

  22. Nancy says:

    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

  23. John Dyer says:

    I added an MIT license to the code and download. Have fun!

  24. mrrau says:

    : ))
    Your face is everywhere, hehe.

  25. oct says:

    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

  26. John Dyer says:

    @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.

  27. oct says:

    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? :D

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

    Thanks again!

  28. John Dyer says:

    @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…

  29. Will Gillen says:

    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!

  30. John Dyer says:

    @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.

  31. Allan says:

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

  32. Stefan says:

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

  33. jmirkin says:

    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.

  34. drewp says:

    @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.

  35. Dimitri Tishchenko says:

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

  36. jonese says:

    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.

  37. Matt Stow says:

    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.

  38. Matt Stow says:

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

  39. John Dyer says:

    @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.

  40. Matt Stow says:

    w00t! Awesome work John.

    Thanks for the speedy response.

  41. Arjun says:

    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?

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

  43. Guus says:

    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.

  44. 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).

  45. John Dyer says:

    @Guss and @Sean, I just updated the download and tested it and it seems to be working for me.

  46. Michael says:

    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.

  47. John Dyer says:

    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.

  48. Guus says:

    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

  49. Guus says:

    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 http://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,

  50. John Dyer says:

    @Guss,
    When I look at that page, the script tags point to http://www.qr2v39nc5ga2zcgj.com/test/refresh_web/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.

  51. Harriet says:

    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

  52. Nate says:

    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.

  53. Nate says:

    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.

  54. Nate says:

    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!

  55. John Dyer says:

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

  56. Asit says:

    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

  57. John Dyer says:

    @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.

  58. Ramon says:

    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

  59. @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

  60. jc21 says:

    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!

  61. Daniel says:

    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

  62. An excellent exaxmple demonstrating the potential of Javascript.

  63. Edward M. says:

    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

  64. 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
    <><

  65. Moritz says:

    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?

  66. Ümit says:

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

  67. Roger says:

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

  68. Thi Nguyen says:

    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() ;

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

  70. SiNo says:

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

  71. SiNo says:

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

  72. 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

  73. kobe says:

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

    135:    this.color = null;
    
  74. D says:

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

  75. M says:

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

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

  77. Dave says:

    I like this code, thanks a lot

  78. Wilson says:

    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

  79. fei says:

    very nice!

  80. randy says:

    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

  81. randy says:

    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

  82. padma says:

    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?

  83. Andrew haycock says:

    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

  84. hooters says:

    this is pretty fucking amazing . kudos to you man!

  85. Dimitry says:

    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. :)

  86. 锐风 says:

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

  87. nick says:

    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…

  88. Michael Angelo Tarongoy says:

    Thanks bro! I have been looking for this…

  89. Amiri says:

    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

  90. Raphaël says:

    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 !

  91. mostafa says:

    thank you.it is very usefull for me.

  92. techy says:

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

  93. alojaweb says:

    excellent solution, thanks for the contribution.

    good very good.

  94. Mittal says:

    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?

  95. Matt says:

    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.

  96. Matt says:

    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);
    [u] this.setAlpha(this._barL3, this.color.v);[/u]
    break;

    case ‘v’:

  97. Santy says:

    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

  98. 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

  99. Santy says:

    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?

  100. Genious! Really good thing. Except of using of prototype. ;-)
    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

  101. Ciko says:

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

  102. John Dyer says:

    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)

  103. Santy says:

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

  104. 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

  105. ptdorf says:

    Its [b]great[/b]! Thanks a lot for sharing!

  106. Steve says:

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

  107. deamerica says:

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

    Thank you

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

  109. John Dyer says:

    @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.

  110. Pete says:

    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?

  111. 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

  112. Sal Gambino says:

    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

  113. 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.

  114. MMF says:

    Good

    thanks a lot :)

  115. neoweb says:

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

  116. Pete Jordan says:

    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:
    [quote]
    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);
    }
    [/quote]
    2. I’ve anonymised the help function in the Refresh.Web.ColorPicker setColorMode method to avoid any namespace conflicts:
    [quote]
    *** 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’;
    [/quote]
    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 :)

  117. mina says:

    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.

  118. Chris Wolf says:

    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!

  119. Unreal Media says:

    Excellent. That works really well. Nice and smooth :)

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

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

  120. Ehsun says:

    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:
    http://www.myofflines.com/colorpicker/colorpicker.php

  121. Ehsun says:

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

  122. Dilip says:

    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…

  123. Harley says:

    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!

  124. Hou Enrong says:

    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. :)

  125. jade says:

    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

  126. Chris Corbyn says:

    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).

  127. Chris Corbyn says:

    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?

  128. Wow!!! You are a [b]genius[/b]!!! That is an awesome script!!!

  129. S.Ajanthan says:

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

  130. Adam says:

    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;
    }

  131. Slopjong says:

    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 :-)

  132. Jon says:

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

  133. Hi John,

    I wrote you once before (can’t remember exactly what though… I think I wanted to give you some hints,…) but never got an answer (…I know, you can’t answer anyone ;o)

    I kind of finished my colorPicker now (http://colorpicker.dematte.at) and wanted to ask you if it’s ok if I mention your nice project on my web-page.

    I would be pleased to get some response if you can spend some seconds.
    Thanks and good luck for the future.
    I like your work a lot,

    Cheers
    Peter

  134. bookmark says:

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

    Thanks!

  135. tibia gold says:

    Thanks for the share, I have been readin online all day and this was actully worth reading. Thanks

  136. seo says:

    Thanks and cheers I set the border to 0px in my CSS but that is not an option for the final page…

  137. netflex says:

    Thank you for sharing this, have the same problem on Vista and IE7 but I fixed it already.

  138. rs gold says:

    Now and then I’ll stumble across a post like this and I’ll recall that there really are still interesting pages on the web. ^_^. Thanks.

  139. eve isk says:

    Excellent read, I just passed this onto a colleague who was doing a little homework on that. And he in fact bought me lunch because I found it for him

  140. eve isk says:

    Thanks for the share, I have been readin online all day and this was actully worth reading. Thanks

  141. I have read a lot of the comments and I just wonder why people say the things they do, I mean they can find the bad in anything. I guess that is where we are in this world. Just hurt hurt hurt, no matter what the subject is. Lawrence Williams http://www.trybw.com Fort Myers, Naples, Bonita,Cape Coral Computer Repair Service

  142. Bob says:

    This color picker is the best ive seen

  143. resume says:

    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.

  144. Philipp says:

    I would like to try it, but I get a 404 when trying to download.

  145. Shop Compare says:

    This is a great script. Thanks for sharing this!

  146. Software says:

    Thanks for colorpicker! I will use it!

  147. light bulbs says:

    this is easily the best javascript colour picker out there, will definitely use it from now on

  148. Lukas Bombach says:

    I would like to try the colorpicker, but the Link to the zip is dead. Can you maybe upload it again?

  149. JK says:

    Hey John D,
    Nice Work….But i have 1 Question,how can we use this JPicker on Asp Control for eg. Textbox or Button….Instead of Inline Control…?
    B’coz Im facing problem while using asp control element….Please give some light on this Issue..

    Thanx,

    Gr8 Work for Inline Element…Keep it Up

    JK

    • johndyer says:

      I’m not sure. It’s been 5 years or so since I made this, so you might have better luck with something created since jQuery :)

  150. MeduZa says:

    the picker is the best out there.
    few tips:
    try to avoid capital letters on files (on Linux they are problematic)
    put the image’s path on the first lines for an easy/quick access

    that all!

    perfect work

  151. Lari says:

    Great color picker!
    But, I need some help how to get this working in WordPress?
    If I want to add it in a post or page, how can I do that?

  152. Mike says:

    Hi John,
    I test your “Photoshop Like Color Picker”. It’s really wonderful and very useful.
    Really thanks.

    Good Luck.

  153. sswam says:

    Thanks, this is a great heavy-duty colour picker, and nicely licensed too! :)

  154. [...] trying to do? It's a color picker. Something like Spectrum – The No Hassle jQuery Colorpicker PhotoShop-like JavaScript Color Picker | John Dyer's Code As for matching the colors, I don't fully get what you want, but here are some thoughts: 1) If [...]

  155. Tejas Nityanand says:

    Hey very nice plugin. I am experiencing a problem though, I dont know if anybody has encountered with this problem but when I use this plugin in an html page which also has JQuery imported, then the JQuery related uses are disabled giving a ‘TypeError’ error in firefox error console. Please can anybody help, I wanted to use this plugin as well as the JQuery.

  156. [...] useful tool. FlexiNo flash, images, external libraries, CSS or 1px divs. Only 4.3KB minified. JavaScript Color PickerPhotoShop-like JavaScript Color Picker. [...]

  157. Juan says:

    Any plans on updating this color picker using jquery?

  158. You should really fix the file names in the example file. They are in lower case while the files in the zip have some capitalization.

  159. SoftMoon WebWare’s MasterColorPicker™ package delivers five JavaScript™ powered professional quality interactive graphical color-pickers, plus a named-color-table based color-picker framework with seven named-color database files included: Brewer, common, Crayola, HTML, OpenOffice, universal, & X11. Your chosen colors can be returned in the most popular color-space models including hexadecimal-RGB, RGB, HSL, HSB, HCG, or CMYK, or when using named-colors their names can also be returned. The different graphical color-pickers each look at the different available color-spaces in a different way, giving you complete intuitive control over finding the exact color you want. Best of all, you can work with one color-space graphically, while outputting the corresponding conversion value from another color-space.

    check out the ☺ *free* ☺ MasterColorPicker package: delivering all the color you can handle:

    http://softmoon-webware.com/MasterColorPicker_instructions.php

    It may even be possible to incorporate Mr. Dyer’s color-picker into this package…it’s designed to manage as many pickers as you want…

  160. paul salber says:

    Internet Explorer 10 has broken the colorpicker

    A monochrome palate is appearing instead of the full spectrum palate

    Pray please provide a fix

    Paul Salber

Leave a Reply

Hi, I'm John Dyer. In my day job, I build websites and create online seminary software for a seminary in Dallas. I also like to release open source tools including a pretty popular HTML5 video player and build tools that help people find best bible commentaries and do bible study. And just for fun, I also wrote a book on the theology of technology and media.

Fork me on GitHub

Social Widgets powered by AB-WebLog.com.