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).


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

  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:<script type="text/javascript">
    $(document).ready(function() {

See demo1.html and demo2.html for an example (jquery.js is not included!).


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.

Leave a comment