I made this for the An Event Apart JavaScript 10k contest but unfortunately finished it after the deadline (but not by much!).
Anyway, here it is for all of you to enjoy. Hopefully useful when you don't feel like opening up Photoshop to get a CSS color.
I'd love to hear suggestions for how I can improve it. (Sorry that the bubbles next to Lab are missing; refreshing the square on the left was too slow for it to be useful.)
If you want to have it much faster, use transparent PNG image for saturation-value rectangle instead of drawing everything in canvas and then just color its background property according to hue.
Long ago I needed color picker, so I did research many options. This was the most efficient implementation I found (the trick I described above comes from here):
It would be really cool to see CMYK support - I prefer HSL to RGB to find good colours that work together; but I prefer CMYK to even HSL
It would also be cool if multiple copies of the tool could dynamically be added to pick multiple colours at a time - with, say, up to eight blocks at the top showing the current colour for each selector, and a text box to easily copy the various colours...
I'm not quite sure how this would work; the color models I have currently are three-dimensional so can be specified by three pieces of information (square x, square y, bar y). CMYK is 4-dimensional so you'd need something like 2 squares to specify a color. (Note that Photoshop's color picker doesn't have bubbles next to CMYK.)
I don't think (programmatically) drawing everything is a good idea. Sprites have been used in computer graphics since time immemorial because they're easy to implement, maintain, change and can offer performance improvements as well.
Just imagine the hassle you have to go through if you want to change a programmatically rendered sprite as opposed to opening it in an image editor and simply changing it there.
Unfortunately, canvas is ridiculously slow in FF3 in general. It's depressing... I built an isometric game in javascript+canvas, paid people to draw neat pixel graphics, but eventually dropped the project because of the performance. In Chrome it was reasonable, but in firefox I rarely got above 10 FPS.
Somehow Firefox became the slowest kid on the block, simply by not improving as fast as others (FF4 is better, but unfortunately change is smaller than I hoped for).
Which is really pity, it's still my primary browser and has a lot of good things going for it.
What's actually worse than FF canvas rendering performance (which, in fact, is not that bad if you measure it) is its memory management.
FF does something very weird, code that works ok in other browsers causes huge memory spikes followed by frequent garbage collection (e.g. what makes tens of KB memory use oscillations in Opera/Chrome makes tens of MB oscillations in FF).
Even something as simple as assigning repeatedly random numbers to fixed length array grows memory in FF. Canvas operations do the same, causing memory use to grow at an alarmingly fast rate.
So if you do animations (or anything which gets executed repeatedly), you get relatively fast rendering which is triggered erratically and paused due to "behind the scene" memory management (which slows down everything).
Small world, I created a page referred to in the bug report :).
Yes, Chrome's memory management got better [1] and Firefox's got worse (at least relatively, they know about the problem and made some improvements [2], but meanwhile other browsers got even better).
It looks like while both Chrome and FF improved their garbage collectors, FF somehow got much higher memory consumption in the first place (growing memory in places where it really shouldn't - aforementioned array assignments or drawing into canvas).
-----
[1] I remember a period where Chrome was tuning their memory management, you would get very different performance between subsequent Chrome updates.
Absolutely. I was just trying to get it under 10k for the contest so I used packer.
The code is messy right now because I was scrambling at the end to try to finish in time for the contest submission deadline, but I'll upload the original source after I have a chance to clean it up.
I second the "would like to look at the source" and I've got a html5/css3 button maker just waiting on a color picker. What kind of license are you going to distribute it with? I wouldn't want to use it if you weren't aware.
Mine allows you to pick a color from an image. Two big caveats (haven't found workarounds for): < IE9 doesn't work and the excanvas VML hack doesn't help (no pixel-level access to images); and images loaded into a canvas element have a same-origin restriction similar to XHR.
Nicely done. I had intended to do something like a color picker or CSS layout tool, but instead I started working on a game and got way carried away (shameless plug: http://10k.aneventapart.com/Entry/154)
My first time using <canvas>. It's really a lot more fun than I expected. Reminds me of the good old days of messing around in Basic.
Anyway, here it is for all of you to enjoy. Hopefully useful when you don't feel like opening up Photoshop to get a CSS color.
I'd love to hear suggestions for how I can improve it. (Sorry that the bubbles next to Lab are missing; refreshing the square on the left was too slow for it to be useful.)