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.
3.8 rating from 45 votes
Too bad the grid remains grayscale in IE6 (probably due to IE crappy PNG stuff)
Nice thingie though :)
Oooooh nice!
Bookmarked!
Updated to work in IE6 (just for SchizoDuckie ;).
Btw, fuck IE, who uses IE for web design?
Just for testing, but no for web design.
So, again, fuck IE
What’s the license for this one. A MIT/BSD would be great.
Looks quite similar to the Dojo color picker - http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/widget/tests/test_ColorPicker.html
http://www.webreference.com/programming/javascript/mk/column3/
I did this 5 years ago, wrote about it 2 years ago. Who needs HSB colors when using a color picker on a website??
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.
And I foolishly forgot the link for the above comment:
http://www.nogray.com/color_picker.php
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.
Nobody mentioned ColorJack? Let’s fix that, shall we :)
http://www.colorjack.com/sphere/
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:
http://zend.lojcomm.com.br/3rdPart/ibolmo/mooCanvas/
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.
The YahooUI library has had a color picker like this for a while. I’ve been using it at http://pixenate.com/pixenate/themes/barcelona/ for a couple of months now.
@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 256×256kb white/black overlay png is 12.5kb. So you save ~11k.
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.
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.
http://www.nogray.com/color_picker.php
Also, free basic support is provided.
The files and scripts are optimized for faster loading.
Hope you enjoy it.
Very good implementation. Works fine.
And there is a similar component for ExtJS too:
http://ux.theba.hu/colorpicker/
I think both Dojo and YUI have been having this and some external plugins for scripaculous. *Yawns*
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!
Nancy
Sweet, added this to my bookmarks.
In case you guys want Photoshop CS3 cheap - we have it for $347
http://www.4-ps.com
thanks. it’s awesome.
ceo of how to lose 5 pounds