Farbtastic: jQuery color picker plugin

Farbtastic is a jQuery plug-in that can add one or more color picker widgets into a page through JavaScript. Each widget is then linked to an existing element (e.g. a text field) and will update the element’s value when a color is selected.

Usage:

1- Include farbtastic.js and farbtastic.css in your HTML:

<script type="text/javascript" src="farbtastic.js"></script>
<link rel="stylesheet" href="farbtastic.css" type="text/css" />

2- Add a placeholder div and a text field to your HTML, and give each an ID:

<form><input type="text" id="color" name="color" value="#123456" /></form>
<div id="colorpicker"></div>

3- Add a ready() handler to the document which initializes the color picker and link it to the text field with the following syntax:

$(document).ready(function() {
    $('#colorpicker').farbtastic('#color');
  });

Advanced Usage:

jQuery Method
$(…).farbtastic()
$(…).farbtastic(callback)

This creates color pickers in the selected objects. callback is optional and can be a:
DOM Node, jQuery object or jQuery selector: the color picker will be linked to the selected element(s) by syncing the value (for form elements) and color (all elements).
Function: this function will be called whenever the user chooses a different color. It should have the following signature:
function callback(color) { … }

With color the chosen color in hex representation (e.g. ‘#123456′).
Object
$.farbtastic(placeholder)
$.farbtastic(placeholder, callback)

Invoking $.farbtastic(placeholder) is the same as using $(placeholder).farbtastic() except that the Farbtastic object is returned instead of the jQuery object. This allows you to use the Farbtastic methods and properties below.
Note that there is only one Farbtastic object per placeholder. If you call $.farbtastic(placeholder) twice with the same placeholder, you will get the same object back each time.

The optional callback argument behaves exactly as for the jQuery method.
Methods
.linkTo(callback)
Allows you to set a new callback. Any existing callbacks are removed. See above for the meaning of callback.
.setColor(string)
Sets the picker color to the given color in hex representation (e.g. ‘#123456′).
.setColor([h, s, l])
Sets the picker color to the given color in normalized HSL (0..1 scale).
Properties
.linked
The elements (jQuery object) or callback function this picker is linked to.
.color
Current color in hex representation (e.g. ‘#123456′).
.hsl
Current color in normalized HSL (e.g. [0.3, 0.4, 0.5]).

https://acko.net/blog/farbtastic-jquery-color-picker-plug-in

Creating a JavaScript Library

I recently wrote a JavaScript library for creating random colors and color schemes, and while I foun…

jQuery drop down menu: droppy

Quick and dirty nested drop-down menu in the jQuery style. I needed a nav like this for a recent pro…

jQuery slideViewerPro: A “pro” jQuery image slider

slideViewerPro is a fully customizable jQuery image gallery engine which allows to create outstandin…

jQuery Optimization: Avoid Unnecessary Styling

This is another common mistake that many jQuery developer made. jQuery provides us with the ability …

jQuery AutoComplete Plugin

I’d like to present another jQuery plugin, this time it’s autocomplete with some handy features. The…

jQuery Optimization: Balance between JavaScript and jQuery

jQuery is excellent to speed up ANY front-end developer job. However, there are times when jQuery ma…