jQuery Palette

A simple, clean, color picker plugin for jQuery.

Palette is a simple, clean, color picker plugin for jQuery v1.7+.

Getting Started

First, make sure the required JavaScript files are included in the <head> tag.

1
2
3
<script src="js/parse-color.min.js" type="text/javascript"></script>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.palette.min.js" type="text/javascript"></script>

Next, include Palette's stylesheet (you may need to update the image paths depending on how your site is structured).

1
<link rel="stylesheet" href="css/palette.css" type="text/css">

Lastly, attach Palette to which ever element(s) you want.

1
$('#palette').palette({'color': 'CC4747'});

Settings

Property Type Default Description
color string|object '000000'

The default color of the picker.

Note, can be in any format parse-color.js recognizes.
onChange function —

A callback function that's fired when the color of the picker changes.

Note, this callback is not fired for live changes (e.g. while dragging the selector cursor as well as the hue and field sliders). For that use onLive.
onHide function — A callback function that's fired when the picker is hidden.
onLive function —

A callback function that's fired immediately when the color of the picker changes.

Note, this callback is only fired for live changes (e.g. while dragging the selector cursor as well as the hue and field sliders). onChange will fire on the following mouseup after dragging.
onShow function — A callback function that's fired when the picker is shown.
onSubmit function — A callback function that's fired when the current color of the picker is changed (e.g. when the submit button is clicked).

Methods

Method Description
$.palette.color($palette, color, 'from')

Gets or sets the color of the supplied picker.

color can be in any format parse-color.js recognizes. If it isn't supplied, the color of the supplied picker is returned.

from is a string telling Palette where the color of the picker is being changed from and can be anything. For the most part, it is used internally to tell Palette not to overwrite the field the color is being changed from. If it isn't supplied, all fields are updated.
$.palette.hide() Hides the picker(s).
$.palette.show($palette) Shows the supplied picker.

Data

1
$('#palette').palette();

Given the above usage of Palette, the following data is available.

Parent

1
var parent_data = $('#palette').data('palette');
Property Description
palette The jQuery object of the picker.

Picker

1
2
3
4
var
    $palette = parent_data.palette,
    
    picker_data = $palette.data('palette');
Property Description
color

The parse-color.js object of the color of the picker.

Note, this can differ from current.
current The parse-color.js object of the current color of the picker.
parent The jQuery object of the element the picker is attached to.

Also note, all of the picker's options are available via it's data.

Dependencies

Screenshots

jQuery Palette

source

  • JS