Colorpickle - The ultimate jQuery color picker

Free

Yep, this one is a free lunch with no catch!

Easy

Using is easy like Sunday morning!

Customizable

Plenty of options and custom looks via theming.

Colorpickle is a free color picker plugin for jQuery. While the support for color input type is getting better all the time, not all browsers support it and most native browser and OS color pickers are pretty crappy. Colorpickle to the rescue!

Examples

Colorpickle with default settings.

Colorpickle with buttons and onCancel and onOk event handlers.

Colorpickle with Light theme.

Colorpickle with Engineer theme.

Colorpickle with only HSL sliders.

Colorpickle with only RGB sliders.




Usage

Include jQuery and Colorpickle plugin in your HTML document, for example in the head of your document. Colorpickle isn't tested with older jQuery versions than 1.12.0 but should work ok with jQuery 1.9+.

The document must use HTML5 doctype. Remember to also include the Colorpickle CSS file.

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8" />

<title>Your page title</title>

<link rel="stylesheet" href="js/colorpickle/jquery.colorpickle.min.css" />

<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/colorpickle/jquery.colorpickle.min.js"></script>

</head>

Invoke the plugin after DOM is ready. You can use whatever selector to reference your element(s).

$(document).ready(function() {
    
  $("#myColorpickle").colorpickle();
    
});

The element used for Colorpickle can be a div or an input.

<div id="myColorpickle"></div>

<input type="text" id="myColorpickle" />

Styles & themes

All basic styles are defined in the stylesheet colorpickle.css. You can override those in your own stylesheet, but a better way to customize Colorpickle's appearance it to create a theme. Two example themes, Light and Engineer, are provided in the Colorpickle package. Theme CSS file should be named colorpickle-theme-themename.css and all of it's styles wrapped under class .colorpickle-theme-themename.

A theme can be just a CSS file or a directory containing CSS and images.

Example theme Light:

.colorpickle-theme-light {
	color: #333;
	background-color: #eee;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.colorpickle-theme-light .colorPickerWrapper {
	border-radius: 4px;
	overflow: hidden;
}

.colorpickle-theme-light .sliderBg {
	border-radius: 4px;
}

.colorpickle-theme-light input[type="text"] {
	color: #000;
	background-color: #fff;
	border: 1px solid #ccc;
}

.colorpickle-theme-light button {	
	background-color: #2e9ce5;
	border-radius: 4px;
}

.colorpickle-theme-light button:hover {
	background-color: #1483cc;
}

To use a theme include the theme CSS file after the Colorpickle CSS file...

<link rel="stylesheet" href="js/colorpickle/jquery.colorpickle.min.css" media="screen" />
<link rel="stylesheet" href="js/colorpickle/themes/colorpickle-theme-myawesometheme.css" media="screen" />

...and then tell Colorpickle to use the theme:

$("#myColorpickle").colorpickle({theme: "myawesometheme"});

API

Options

Options are passed as an object when calling Colorpickle:

$("#myColorpickle").colorpickle({
    theme: "myawesometheme",
    showOk: true,
    showCancel: true
});

Example with event hooks:

$("#myColorpickle").colorpickle({
    showOk: true,
    showCancel: true,
    onOk: function() {
        console.log("You selected color " + $("#myColorpickle").data("colorpickle").rgb + " and clicked OK.");
    },
    onCancel: function() {
        console.log("You clicked Cancel.");
    }
});
Name Type Default Description
clickToggle boolean true Toggles Colorpickle visibility when clicking the element it is bound to.
closeOnOk boolean false Clicking ok button closes Colorpickle if set to true.
closeOnCancel boolean false Clicking cancel button closes Colorpickle if set to true.
draggable boolean false Is Colorpickle draggable or not. A drag handle is displayed in the top of Colorpickle when set to true.
hex string null Initial RGB hex value, for example "#ff0000". Overrides initial RGB value if set.
hsl array null Initial HSL value, for example [0, 100, 60]. Overrides initial RGB and hex value if set.
hslSliders boolean true Whether to display HSL sliders (true) or not (false).
modal boolean false If set to true Colorpickle will create an overlay on the page and be centered. Use with onTop set to true.
mode string "hex" Color mode in which Colorpickle will set the value when bound to an input field. Possible values are "hex", "rgb" or "hsl"
onTop boolean false If set to true Colorpickle will be absolutely positioned on top of everything else.
rgb array [255, 140, 60] Initial RGB values.
rgbSliders boolean true Whether to display RGB sliders or not.
showCancel boolean false Whether to display cancel button or not.
showHex boolean true Whether to display hex field or not.
showOk boolean false Whether to display ok button or not.
showSLGradient boolean true Whether to display the gradient showing the lightness and saturation varietes of the current hue.
showSwatch boolean true Whether to display the color swatch or not.
textCancel string "Cancel" Text shown on the cancel button.
textOk string "Cancel" Text shown on the ok button.
theme string null Theme name.
visible boolean true Is Colorpickle initially visible or not.
width string null Colorpickle width. Any valid css width will do, for example "500px" or "75%".

Events

These options can be used to define callback functions for Colorpickle events.

Name Type Default Description
onCancel function null Executed when user clicks Cancel button.
onChange function null Executed when the selected color changes.
onInit function null Executed right after Colorpickle is initialized.
onOk function null Executed when user clicks OK button.

Public methods

Public methods can be called like this:

$("#myColorpickle").colorpickle("methodName", arg1, arg2, ... argn);
Name Parameters Description
setHex str hex Sets the current color by given RGB hex value.
setHSL int h, int s, int l Sets the current color by given HSL values.
setRGB int r, int g, int b Sets the current color by given RGB values.

Public properties

Public properties can be accessed like through Colorpickle data. For example property rgb could be accessed like this:

console.log($("#myColorpickle").data("colorpickle").rgb);
Name Type Description
hex string Selected color RGB hex value, for example "#ff9900".
hsl string Selected color HSL value, for example "hsl(25,100,62)".
rgb string Selected color RGB value, for example "rgb(255,140,60)".

Download