Friday, October 5th, 2007

Photoshop Color Picker

Category: Component, JavaScript, Library

John Dyer has seen other colour pickers but has come up with his own that mimics Photoshop:

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

Photoshop Color Picker

Posted by Dion Almaer at 7:22 am

3.7 rating from 57 votes


Comments feed TrackBack URI

Too bad the grid remains grayscale in IE6 (probably due to IE crappy PNG stuff)

Nice thingie though :)

Comment by SchizoDuckie — October 5, 2007

Oooooh nice!

Comment by scriptkiddie — October 5, 2007

Updated to work in IE6 (just for SchizoDuckie ;).

Comment by John Dyer — October 5, 2007

What’s the license for this one. A MIT/BSD would be great.

Comment by Sebastian Werner — October 5, 2007

Looks quite similar to the Dojo color picker –

Comment by Shane O'Sullivan — October 5, 2007

I did this 5 years ago, wrote about it 2 years ago. Who needs HSB colors when using a color picker on a website??

Comment by Mark Kahn — October 5, 2007

Here’s the same thing, but with a MIT license (see the source of the js file in the package). I’ve been using this one for a while, since it’s based on mootools, my library of choice.

Comment by justin — October 5, 2007

And I foolishly forgot the link for the above comment:

Comment by justin — October 5, 2007

To everyone saying “The same thing has been done”: It hasn’t. This is, I’m fairly certain, the only “real” implementation of an HSL/RGB color picker in JavaScript.

The argument I tried to make before is that nobody needs a full HSL/RGB color picker :-). If you’re not certain about what I mean, open his demo and click on the radio buttons next to the “H/S/L R/G/B” input boxes.

Comment by Mark Kahn — October 5, 2007

Nobody mentioned ColorJack? Let’s fix that, shall we :)

Comment by Vasili Sviridov — October 5, 2007

Mootools has one color picker of that type too… it’s not my job but I used it in my Canvas Experiments. Take a look in example 2:

Comment by Fabio Zendhi Nagao — October 5, 2007

The one of MooTools you’re talking about is mooRainbow, which is smaller than others because instead of using one alpha image, mixed with white to transparence and black to transparence, it has 2 separated images: 1 for white to transparent, 1 for black to transparent. This way you avoid grayscale and your pngs are ~5k instead of 20kb.
It allows you to use mousewheel on inputs or slider, and it can be attached on any element you want and it is damned fast thank to mootools.

The new release of mooRainbow, scheduled on mootools 1.2 release, will allow to use just one instance on a collection of elements.

Comment by w00fz — October 5, 2007

The YahooUI library has had a color picker like this for a while. I’ve been using it at for a couple of months now.

Comment by walter — October 5, 2007

@Fabio: Actually a white-transparent or black-transparent png should be well under 1kb if it’s a uniform gradient (by default photoshop does NOT give a uniform gradient). My 256x256kb white/black overlay png is 12.5kb. So you save ~11k.

Comment by Mark Kahn — October 5, 2007

Probably you meant @ w00fz :P
The point is that separated, both, are 1.53kb (768bytes each one, 256×256). Uniform gradient or not, white and black mixed generate a grayscales, so there are more colors.
Separated are just 1 color + transparence.

Comment by w00fz — October 5, 2007

I made the NoGray Color picker (which support HSL) around 3 years ago and just updated it to us mooTools (for better compatibility) a few months ago. It’s free for download with a MIT license.

Also, free basic support is provided.

The files and scripts are optimized for faster loading.

Hope you enjoy it.

Comment by Wesam Saif — October 5, 2007

Very good implementation. Works fine.

Comment by nymane — October 5, 2007

And there is a similar component for ExtJS too:

Comment by amon — October 6, 2007

I think both Dojo and YUI have been having this and some external plugins for scripaculous. *Yawns*

Comment by Jake — October 6, 2007

awesome .. I downloaded it .. and made it into an AIR app (just for my own use of course). Just took a few minutes and now I have it on the desktop for ease of use.

You might think of doing the same and distributing the AIR?

Good job!

Comment by Nancy — October 8, 2007

Sweet, added this to my bookmarks.

In case you guys want Photoshop CS3 cheap – we have it for $347

Comment by Nancy — November 5, 2007

Leave a comment

You must be logged in to post a comment.