JavaScript Color Pickers

If you are building an application that deals with graphics somehow, you are likely going to need a color picker. Fortunately there are quite a few of those available for JavaScript. HTML5 includes color input type even. One color picker, aptly named nativeColorPicker, provides a shim for Internet Explorer so that you have got all bases covered. Other pickers available are more specialized.

One example of these is colorjoe. That is a widget I developed myself after getting frustrated with existing alternatives. My primary goals were to make it scaleable using CSS (no images needed) and make it easy to adjust. I think I succeeded in these goals quite well. David Durman's Flexi shares the goal of avoiding images. It is actually a lot lighter than colorjoe (19k vs. 4k. minified) though given its modular nature it should be possible to get rid of some of that fat if needed.

Besides these three there are quite a few pickers available. Enjoy the listing below for some. If you are missing your favorite, let us know and we'll add it to the catalog!

nativeColorPicker

A JavaScript Native Color Picker Polyfill for Internet Explorer for the HTML5 <input type="color">.

colorjoe

Unlike many other colorpickers out there, colorjoe is truly scaleable. It is based on CSS and does not depend on external images. As a result, you can tweak its size to fit your purposes. Supports touch and AMD module definition as well.

Flexi ColorPicker

No flash, images, external libraries, CSS or 1px divs.

SimpleColor

jQuery Simple Color is a very simple color-picker plugin that displays a square grid of selectable colors. I found a lot of the other color-picker plugins quite heavy, so I ended up writing this to provide a dead-simple alternative. The list of colors it uses can be customized, and the layout size etc can be configured to a certain extent.

ExColor

The jQuery plugin for color editing on your website.

JavaScript ColorPicker

This colorPicker is a light weight all-rounder (~ 29kB - only 1 file*; 12.8kB gZiped) that can display and let you choose the entire color palette in HSB and RGB color modes. This highly customizable, easy to install and speed optimized app comes in 4 different sizes (from 151 x 87 pixels to 407 x 302 pixels) and therefore different feature levels so you can use it for every supposable cause from 'easy choice' to 'professional determination'. That's probably all you'll ever need to let your clients choose the right color. You'll also find a lot of extra helpers and smart features that make life easier.

Farbtastic

Farbtastic is a jQuery plug-in that can add one or more color picker widgets into a page through JavaScript. Each widget is then linked to an existing element (e.g. a text field) and will update the element's value when a color is selected.

mooRainbow

mooRainbow is a powerful Javascript color picker that allows you to visually choose and use colors as a real and useful application.

jPicker

jPicker is a fast, lightweight jQuery plugin for including an advanced color picker in your web projects. It has been painstakenly ported from John Dyers' awesome work on his picker using the Prototype framework.

I hope you managed to find a picker fitting your needs. You might find a few additional ones on our colorpicker listing. This post just represents the state at the time of writing. Happy hacking!