Highly Configurable Color Picker For jQuery and jQuery UI - Vanderlee Colorpicker

Vanderlee Colorpicker is a powerful and highly configurable color picker plugin for jQuery and jQuery UI.

You might also like:

• Beautiful jQuery Color Picker For Bootstrap - Pick-a-Color
• Smooth Color Picker Plugin with jQuery and Bootstrap - jqolor
• jQuery Color Picker Plugin - wColorPicker
• Simple Color Picker Plugin - colorselector
• Colorpicker Plugin For Bootstrap
• Customizable and Touch-Friendly jQuery Color Picker Plugin - spectrum

Features:

• jQueryUI (themeroller-based) look & feel
• Supports Control parts, Layout, Input/output formats, Swatches and many more...
• Accurate color model
• Smart window alignment
• Complete API with events and methods
• Easily extendable with plugins
• Cross browser
• Supports localization: English, Dutch, French, Brazilian Portuguese

Basic Usage:

1. Include jQuery, jQuery UI and jQuery Vanderlee Colorpicker in the header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<script src="jquery.colorpicker.js"></script>

2. Include required CSS files to style your color picker

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<link href="jquery.colorpicker.css" rel="stylesheet" type="text/css"/>

3. Create a container for the color picker

<span class="cp-basic" style="display: inline-block; vertical-align: top;"></span>

4. Call the plugin

<script>
$( function() {
$('.cp-basic').colorpicker();
});
</script>

5. Available options.

alpha: false, // Show alpha controls and mode
altAlpha: true, // change opacity of altField as well?
altField: '', // selector for DOM elements which change background color on change.
altOnChange: true, // true to update on each change, false to update only on close.
altProperties: 'background-color', // comma separated list of any of 'background-color', 'color', 'border-color', 'outline-color'
autoOpen: false, // Open dialog automatically upon creation
buttonClass: null, // If set, the button will get this/these classname(s).
buttonColorize: false,
buttonImage: 'images/ui-colorpicker.png',
buttonImageOnly: false,
buttonText: null, // Text on the button and/or title of button image.
closeOnEscape: true, // Close the dialog when the escape key is pressed.
closeOnOutside: true, // Close the dialog when clicking outside the dialog (not for inline)
color: '#00FF00', // Initial color (for inline only)
colorFormat: 'HEX', // Format string for output color format
draggable: true, // Make popup dialog draggable if header is visible.
duration: 'fast',
hsv: true, // Show HSV controls and modes
inline: true, // Show any divs as inline by default
inlineFrame: true, // Show a border and background when inline.
layout:  {
map: [0, 0, 1, 5], // Left, Top, Width, Height (in table cells).
bar: [1, 0, 1, 5],
preview: [2, 0, 1, 1],
hsv: [2, 1, 1, 1],
rgb: [2, 2, 1, 1],
alpha: [2, 3, 1, 1],
hex: [2, 4, 1, 1],
lab: [3, 1, 1, 1],
cmyk: [3, 2, 1, 2],
swatches: [4, 0, 1, 5]
},
limit: '', // Limit color "resolution":  '', 'websafe', 'nibble', 'binary', 'name'
modal: false, // Modal dialog?
mode: 'h', // Initial editing mode, h, s, v, r, g, b or a
okOnEnter: false, // Close (with OK) when pressing the enter key
parts: '', // leave empty for automatic selection
regional: '',
revert: false, // Revert color upon non
rgb: true, // Show RGB controls and modes
showAnim: 'fadeIn',
showCancelButton: true,
showNoneButton: false,
showCloseButton: true,
showOn: 'focus click alt', // 'focus', 'click', 'button', 'alt', 'both'
showOptions: {},
swatches: null, // null for default or kv-object or names swatches set
swatchesWidth: 84, // width (in number of pixels) of swatches box.
title: null,
cancel: null,
close: null,
init: null,
select: null,
ok: null,
open: null

Change Log:

v1.0.6 (2013-11-24)

• Fixed zIndex error on overlay
• Fixed okOnEnter option

v1.0.5 (2013-09-24)

• Fixed bar color normalization for S and V modes
• Fixed okOnEnter option

v1.0.0 (2013-07-02)

• Fixed Color Picker opens with black color (000000) after the page was loaded.

---

This awesome jQuery plugin is developed by vanderlee. For more Advanced Usages, please check the demo page or visit the official website.