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

File Size: 129KB
Views Total: 3176
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:


  • 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

$( function() {

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.