Palette is a simple, clean, color picker plugin for jQuery v1.7+.
First, make sure the required JavaScript files are included in the <head> tag.
<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).
<link rel="stylesheet" href="css/palette.css" type="text/css">
Lastly, attach Palette to which ever element(s) you want.
$('#palette').palette({'color': 'CC4747'});
<tbody>
<tr>
<td><code>color</code></td>
<td><em>string|object</em></td>
<td><em>'000000'</em></td>
<td>
<p>The default color of the picker.</p>
<p><em>Note, can be in any format <a href="https://github.com/uhnomoli/parse-color.js">parse-color.js</a> recognizes.</em></p>
</td>
</tr>
<tr>
<td><code>onChange</code></td>
<td><em>function</em></td>
<td>—</td>
<td>
<p>A callback function that's fired when the color of the picker changes.</p>
<p><em>Note, this callback is <strong>not</strong> fired for live changes (e.g. while <strong>dragging</strong> the selector cursor as well as the hue and field sliders). For that use <code>onLive</code>.</em></p>
</td>
</tr>
<tr>
<td><code>onHide</code></td>
<td><em>function</em></td>
<td>—</td>
<td>A callback function that's fired when the picker is hidden.</td>
</tr>
<tr>
<td><code>onLive</code></td>
<td><em>function</em></td>
<td>—</td>
<td>
<p>A callback function that's fired <strong>immediately</strong> when the color of the picker changes.</p>
<p><em>Note, this callback is <strong>only</strong> fired for live changes (e.g. while <strong>dragging</strong> the selector cursor as well as the hue and field sliders). <code>onChange</code> will fire on the following <code>mouseup</code> after dragging.</em></p>
</td>
</tr>
<tr>
<td><code>onShow</code></td>
<td><em>function</em></td>
<td>—</td>
<td>A callback function that's fired when the picker is shown.</td>
</tr>
<tr>
<td><code>onSubmit</code></td>
<td><em>function</em></td>
<td>—</td>
<td>A callback function that's fired when the <strong>current</strong> color of the picker is changed <em>(e.g. when the submit button is clicked)</em>.</td>
</tr>
</tbody>
| Property | Type | Default | Description |
|---|
<tbody>
<tr>
<td><code>$.palette.color($palette, color, 'from')</code></td>
<td>
<p>Gets or sets the color of the supplied picker.</p>
<p><code>color</code> can be in any format <a href="https://github.com/uhnomoli/parse-color.js">parse-color.js</a> recognizes. If it isn't supplied, the color of the supplied picker is returned.</p>
<p><code>from</code> 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.</p>
</td>
</tr>
<tr>
<td><code>$.palette.hide()</code></td>
<td>Hides the picker(s).</td>
</tr>
<tr>
<td><code>$.palette.show($palette)</code></td>
<td>Shows the supplied picker.</td>
</tr>
</tbody>
| Method | Description |
|---|
$('#palette').palette();
Given the above usage of Palette, the following data is available.
var parent_data = $('#palette').data('palette');
<tbody>
<tr>
<td><code>palette</code></td>
<td>The jQuery object of the picker.</td>
</tr>
</tbody>
| Property | Description |
|---|
var
$palette = parent_data.palette,
picker_data = $palette.data('palette');
<tbody>
<tr>
<td><code>color</code></td>
<td>
<p>The <a href="https://github.com/uhnomoli/parse-color.js">parse-color.js</a> object of the color of the picker.</p>
<p><em>Note, this can differ from <code>current</code>.</em></p>
</td>
</tr>
<tr>
<td><code>current</code></td>
<td>The <a href="https://github.com/uhnomoli/parse-color.js">parse-color.js</a> object of the <strong>current</strong> color of the picker.</td>
</tr>
<tr>
<td><code>parent</code></td>
<td>The jQuery object of the element the picker is attached to.</td>
</tr>
</tbody>
| Property | Description |
|---|
Also note, all of the picker's options are available via it's data.