8 Customizable Javascript Color Pickers

When we build CMS, we provide options to users for customizations. We will use all sort of form fields, for example, text input, date picker, drop down list, auto complete, etc... If the CMS offers theme layout customization, it's inevitable to involve color input UI.

Instead of asking user to key in HEX color codes (e.g. #FF0000 for red color, #000000 for black color), we can use Javascript color picker. We have a few Javascript powered color pickers that comes with intuitive user interface. It eliminates the needs of enter hex codes, just use your mouse pointer to choose the color, or use color slider to get the exact color you want.

Here we have 8 great color pickers for you:

Tiny Colorpicker

Tiny Colorpicker is a crossbrowser lib that creates a color picker (form) input. Its a easy way to add color pickers to your forms or user interface. It has a unique UI which I think it looks really good. You can set the picker as image and choose the color from the image.

Pick-a-Color

A color picker for Twitter Boostrap. The UI not the best but it has wide range of sliders to create the color you want. It also has Saved Colors feature to reuse previously chosen colors.

Farbtastic Color Picker

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.

Flexi Color Picker

A standalone pure Javascript color picker without any images, external libraries, CSS of divs. FlexiColorPicker is based on HSV color model. The only two parts of the color picker are therefore the slider for selecting hue value and the picker for selecting saturation and value.

Bootstrap Colorpicker

Fancy and customizable colorpicker plugin for Twitter Bootstrap. It's quite a comprehensive one with configurable options and plenty of methods and events to create your own color picker.

ColorPicker

ColorPicker v1.0 is a small (45.4KB, 19.5KB gZip) but very advanced framework independent javaScript color picker and color conversion / calculation tool that supports the following color spaces: rgb, hsv, hsl, hex, cmyk, cmy, XYZ, Lab but also alpha, WCAG 2.0 readability standards (based on opacity levels of all layers), contrast, color similarity, grayscale, 2-layer or 3-layer overlap mix, etc...

Eyecon Color Picker

A simple component to select color in the same way you select color in Adobe Photoshop. Powered by jQuery, it has some useful method and events.

Evol ColorPicker

evol-colorpicker is a web color picker which looks like the one in Microsoft Office 2010. It can be used inline or as a popup bound to a text box. It comes with several color palettes, can track selection history and supports "transparent" color. It is a full jQuery UI widget, supporting various configurations and themes.