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: Wii + Flash + Papervision3D + C# = Alumni World Map

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: Wii + Flash + Papervision3D + C# = Alumni World Map

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: Wii + Flash + Papervision3D + C# = Alumni World Map

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's last post: Tab Resurrection

nicholasroussos.com

pingback October 3. 2007 22:40

Pingback from ajaxgirl.com

Ajax Girl » Blog Archive » Photoshop Color Picker
ajaxgirl.com's last post: Brightcove 3 (Leaked ScreenShots)

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: Wii + Flash + Papervision3D + C# = Alumni World Map

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: Wii + Flash + Papervision3D + C# = Alumni World Map

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: Wii + Flash + Papervision3D + C# = Alumni World Map

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's last post: 6 soluciones libres para mostrar tus imágenes al mundo

webmasterlibre.com

Michael Sync October 6. 2007 21:46

Thanks.. nice one.. I'm gonna save your link...
Michael Sync's last post: Silverlight 2 Contest: Time to vote

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's last post: Richard Oribe gana el oro y bate récord mundial en 200 libre S4

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's last post: New Yorker Covers by BoB Staake

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: Wii + Flash + Papervision3D + C# = Alumni World Map

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's last post: Mehr Transparenz im IE6

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: Wii + Flash + Papervision3D + C# = Alumni World Map

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: Wii + Flash + Papervision3D + C# = Alumni World Map

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: Wii + Flash + Papervision3D + C# = Alumni World Map

John Dyer

pingback October 10. 2007 19:22

Pingback from toonz.wordpress.com

links for 2007-10-10 « toonz
toonz.wordpress.com's last post: links for 2008-07-10

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's last post: Borrar todos los comentarios de una entrada en Wordpress

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's last post: 12 Steps To Professional Web Design

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's last post: links for 2008-10-06

ashwell.co.za

pingback October 18. 2007 21:34

Pingback from mtnconcept.com

Free Tools» Blog Archive

mtnconcept.com's last post: Showcase, galerie images Prototype

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's last post: Backgrounds animados con jQuery

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's last post: Google Chrome: It's Shiny

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's last post: Piping bei der Variablenzuweisung

Sascha Hameisters Javascript Input Output

pingback November 10. 2007 20:50

Pingback from weblatam.com

Colección de utilidades AJAX 1 | WebLatam
weblatam.com's last post: Un Mapamundi que cambia de tamaño

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: Wii + Flash + Papervision3D + C# = Alumni World Map

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's last post: http://www.centuryidea.cn/2008/09/12/as3%e7%ac%ac%e4%b8%80%e8%8a%82%ef%bc%9a%e5%ad%a6%e4%b9%a0as3-%e7%9a%84%e7%ac%94%e8%ae%b0/" rel="nofollow">[AS3]第一节:学习AS3 的笔记

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's last post: Amusing side effects of popular culture

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: Wii + Flash + Papervision3D + C# = Alumni World Map

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: Wii + Flash + Papervision3D + C# = Alumni World Map

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: Wii + Flash + Papervision3D + C# = Alumni World Map

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: Wii + Flash + Papervision3D + C# = Alumni World Map

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: Wii + Flash + Papervision3D + C# = Alumni World Map

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's last post: Unobtrusive Javascript Form Validation for Prototype

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's last post: Color Blindness Simulator: New Tool Released on Colblindor

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's last post: 20 great music advertising interface for design inspiration

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's last post: QuickTime Alternative

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's last post: wtfBlog

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's last post: links for 2008-10-10

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's last post: Hello?

devkick.com

pingback May 14. 2008 12:50

Pingback from af-design.com

AF-Design » JavaScript Color Pickers
af-design.com's last post: Niche Portals

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's last post: Donuts

micksam7.com