Collection of 10 Awesome JavaScript Color Pickers

Do you wish to implement a color picker in your design applications? Checkout the following free scripts. Some of the well known frameworks used to develop these scripts are JQuery, MooTools and

free-advanced-dhtml-color-picker 1. COLOURLovers Color Picker is a free, advanced and professional DHTML script which is easy to implement in the pages of your website.

* Draggable color picker
* multiple fields can be used to call the script
* The script is WYSIWYG – the color you pick is the color you get
* The position of the picker can be set (x, y)

[Go to Project Page | Demo]

jquery-colorpicker-plugin 2. ColorPicker is a JQuery simple component that allows you to select color in the same way you select color in Adobe Photoshop.

* flat mode – element in page
* powerful controls for color selection
* easy customizable
* fits into the view port

[Go to Project Page | Download | Implement]

farbtastic 3. Farbtastic is an awesome JQuery plugin that can add one ore more color picker widgets into a page through JavaScript. Each widget is linked to an existing element (for example a text field) and updates the fields color when a color is selected.

* This plugin uses layered transparent PNGs to render a saturation/lumination gradient inside a hue circle. Flash and pixel sized DIVs aren’t used.
* It’s WYSIWYG – the color you click is the color you get (with the exception of +1/-1 rounding differences). Many pickers throw up an arbitrary gradient that’s only a poor match.
* The intuitive HSL color space is used rather than the more common HSB – it’s easy to make a color brighter without touching its saturation, or vice versa
* Small size – built on the compact JQuery library having only 23 KB

[Go to Project Page | Download | Demo]

moorainbow 4. mooRainbow is a powerful JavaScript color picker made with MooTools JavaScript Framework that allows you to visually choose colors. The script can be attached to any element in the DOM.

* Fully CSS Customizable
* Keeps DOM clean and generates valid XHTML and CSS
* Returns an object containing RGB, HSB and HEX of chosen color
* Fast loading
* Works in most modern browsers such as FireFox (and friends), Safari, Opera, IE

[Go to Project Page | Download | Demo]

yui-color-picker 5. YUI Color Picker is based on Yahoo’s excellent UI library (slider widget).

Features include:

* It’s WYSIWYG – the clicked color is the color you get
* multiple text fields can be used to fill colors using a single Color Picker

[Go to Project Page | Download | Demo]

color-picker-scriptaculous 6. Color Picker was inspired by YUI Color Picker script and it is based on the fantastic library.

Features include:
* CSS Customizable
* Easy to install

[Go to Project Page | Download | Demo]

nogray-color-picker 7. NoGray Color Picker is an advanced script that handles RGB, HSL, and Hexadecimal values. It works in the same way as the color picker from Adobe Photoshop returning the hexadecimal value of the color.

* an XHTML doctype

Transitional//EN" "">
<html xmlns="">

* The look and feel are customizable (edit color_picker_interface.html)
* Option to use Only Web Colors (Photoshop-Like)

[Go to Project Page | Download | Demo]

jscolor 8. jsColor extends standard form controls of a smooth color picker dialog. To pickerize your text fields you just have to include the jscolor.js script into your HTML page and set your input elements to <input class="color"/>.

* it’s quick and easy to install
* it doesn’t use any pop-up windows
* it’s cross-browser compatible

[Go to Project Page | Demo]

color-picker 9. colorPicker is a free, simple and easy to use script that add a color picker control to your input fields.


* update the input field’s background with the selected color
* easy & fast installation

[Home | Demo]

interactive-color-picker 10. JavaScript – Interactive Color Picker is a very well written tutorial from ‘Switch on the Code’ that helps you to create a color picker using javascript, css, and html. The source files are available for download.
[Go to tutorial page]

Comment via Facebook



  1. Robert Dupuy says

    All of these require a mouse to use – and you can’t assume your user has a mouse. iPad/iPhone/Android anyone?

    I mean, these require precision, you may fumble around with it on your iPad – but I can’t imagine its fun – they aren’t optimized for touch. So 10 color pickers, all the same. None differentiate themselves.

    They all look like a Photoshop color picker.

Leave a Reply

Your email address will not be published. Required fields are marked *