PhotoShop-like JavaScript Color Picker

By BylineJohn Dyer on

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 thoughts on “PhotoShop-like JavaScript Color Picker”

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

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

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

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

  13. @sudopeople, you can instantiate the ColorPicker using:
    var cp = new ColorPicker(‘cp1′, {startMode:’h’, startHex:’ff0000′});
    to set the starting color and mode.

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

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

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

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

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

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

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

  28. 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? 😀
    I actually hate this phrase but really mean it: keep up your (awesome) good work 🙂
    Thanks again!

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

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

  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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  74. Cool!
    It seems like the code at line 135 in file ColorPicker.js is unwanted, isn’t it?
    [code]
    135: this.color = null;
    [/code]

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

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

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

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

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

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

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

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

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

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

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

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

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

  99. 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’:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  124. 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! 😀

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  157. Pingback: 10 Most Useful Javascript Color Pickers Plugins | CS5 Design
  159. Pingback: Online Database / Choice - Need a bit of help

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

  161. Pingback: 10 Best Javascript Color Pickers Plugins
  162. Pingback: 10 Best Javascript Color Pickers Plugins | Free and Useful Online Resources for Designers and Developers

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

  165. Hi I am so excited I found your blog, I really found you by accident,
    while I was browsing on Google for something else, Regardless I
    am here now and would just like to say thanks a lot for a marvelous post and a all
    round enjoyable blog (I also love the theme/design), I
    don’t have time to read through it all at the minute but I have book-marked it and also included your RSS
    feeds, so when I have time I will be back to read much more, Please do keep up the excellent work.

  166. Just apply the milk on your scalp and tie a towel or
    some cloth around your hair to prevent loss of the milk from your hair.
    Coconut oil has amazing properties for fighting both internal and external yeast
    infections. Tyng Tan and her team of hair specialists have the training and experience for a successful hair transplantation in Singapore.

  167. Just want to say your article is as astounding. The clarity in your post
    is just spectacular and i can assume you are an expert on this subject.
    Fine with your permission let me to grab your RSS feed to keep up to
    date with forthcoming post. Thanks a million and please carry on the enjoyable work.

  168. Pingback: 20 Libraries & Plugins for the Prototype JavaScript Framework - Speckyboy Design Magazine

Comments are closed.