Collection of 10 Awesome JavaScript Color Pickers

Posted on February 24, 2009, under JavaScript 

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 Script.aculo.us.

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.

Features
* 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.

Features
* 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.

Features
* 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.

Features
* 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 script.aculo.us library.

Features include:
* CSS Customizable
* Easy to install
* It is WYSIWYG

[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.

Requirements
* an XHTML doctype

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


Features
include:
* The look and feel are customizable (edit color_picker_interface.html)
* Option to use Only Web Colors (Photoshop-Like)
* It’s WYSIWYG

[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"/>.

Features
* 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.

Features

* WYSIWYG
* 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

comments

4 Replies to "Collection of 10 Awesome JavaScript Color Pickers"

  1. Really impressive set of Pickers, thanks for that! JQuery – very best framework for Web development, I like using it :)

  2. 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.

  3. Here is one of a different style. It looks like the one in MS-Office 2010, displaying different color palettes rather than gradients.

    Demo: http://evoluteur.github.io/colorpicker/index.html

    Code: https://github.com/evoluteur/colorpicker

Leave a Reply


* = required fields

  (will not be published)


XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Note: If you want to post CODE Snippets, please make them postable first!
(e.g. <br /> should be converted to &lt;br /&gt;)

POSTING RULES:

  • The comment must be relevant with the topic of the post.
  • Only comments with real email addresses will get approved. So, emails like 'abc@domain.com' will not be accepted.
  • Do not post the same message in multiple articles through the site.
  • Do not post advertisements, junk mail or pyramid schemes.
  • In case you post a link to another site, please explain briefly where the link goes as a courtesy to other users.
  • Do not post comments such as: "Thank you", "Awesome", "Nice tutorial", "Merci", etc.