It's not done yet. I'm just experimenting with the canvas at this point.
| Currently moused-over color | |
| Currently selected color |
2026-04-14 UPDATE: There is a newly optimized version of the picker, available here.
As it is right now, it's a pretty little widget thing that enables users to wrap their own code around it to make more fully featured color pickers (an example of this can be found here). It's not yet good for much else. I'm not certain how to make proper use of it. Suggestions are welcome!
The Github repo is here. Please use the issues on this repository to report problems you notice, or for feature requests. Please note that I do not plan to support IE8 and below. IE9 is supported. However, the saturation range selector switches to a <select> box, as <input type="range"> is not supported in IE9 and below.
Generation of the picker isn't quick. this is because we're drawing the circle pixel-by-pixel. However, I've gotten it as fast as possible by manually manipulating the values in the image data and then plopping the whole thing into the canvas context once rather than once per pixel (don't do that - it makes browsers sad).
Thanks to this stackoverflow item for the inspiration on how to fix my pixel drawing redundancy issues by introducing me to the midpoint circle algorithm
Both RequireJS and node-style CommonJS are supported. Examples of using RequireJS and browserify are found here and here.