A pure JavaScript color picker

There is plenty of color picker components on the web but very few of them are built with pure JavaScript, without using images, Flash or 1px divs. Moreover, it's difficult to find one that works on mobile devices as well. Let me introduce a plain JavaScript color picker written in 300 lines of code including comments. Discover SVG!

One of the main advantages of this color picker is that it can be scaled to any size preserving quality of the gradient of the picker and slide area. Moreover, the user is able to restyle the picker and slide area to fit their needs.

The result is 4.3KB of minified JavaScript without any dependency on an external library. It's a standalone piece of code which you can just append to your page. It works in all major browsers (IE7+, FF3.5+, Chrome 4+, Safari 4+, Opera 9+, might also work in IE6 but you know, who cares. The dimension and position of the picker and slide area can be fully customized in CSS just like any other div element. Couple of ready-to-use themes are included in the github repository as well.

And what is the magic behind? Sorry, no magic, just normal (usually forgotten) SVG/VML. The size of the vector objects (picker and slide) is set to 100% width/height so that they are adjusted according to the outer divs. Registered callback is invoked whenever the color changes and it is passed a color in hexadecimal, hsv and rgb formats. That's it.

Try it yourself: Flexi Color Picker.