Farbtastic Color Picker
jQuery Plug-in
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.
Download Farbtastic 1.2 – January 8, 2007 (License: GPL).
Demo
Farbtastic uses layered transparent PNGs to render a saturation/luminance gradient inside of a hue circle. No Flash, no pixel sized divs.
Click and drag over the selector to try it out.
Basic Usage
- 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" /> - 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>
- Add a ready() handler to the document which initializes the color picker and link it to the text field with the following syntax:
<script type="text/javascript">
$(document).ready(function() {
$('#colorpicker').farbtastic('#color');
});
</script>
See demo1.html and demo2.html for an example (jquery.js is not included!).
Styling
The color picker is a block-level element and is 195×195195 pixels large. You can control the position by styling your placeholder (e.g. floating it).
Note that the black/white gradients inside wheel.png and mask.png were generated programmatically and cannot be recreated easily in an image editing program.