jQuery Color Picker

Steven Wittens of Drupal fame has released a nifty jQuery plugin of his own called Farbtastic. So what does it do you ask?

Farbtastic uses layered transparent PNGs to render a saturation/luminance gradient inside of a hue circle. No Flash, no pixel sized divs.

With Farbtastic, a simple form input box turns into a auto-updated hex code whose background color changes accordingly with the clickable color wheel and block added by the 8kb Javascript file. Click the color, drag the chooser or enter in a hex code manually.

Just include the farbtastic.js file along with the farbtastic.css stylesheet and create a placeholder div along with a form element for the hex code like so:

<form>
    <input type="text" ... />
</form>
<div id="colorpicker"></div>

And then include the one line jQuery code:

$('#colorpicker').farbtastic('#colorpickerinput');

That’s all there is to it! You should now have a color picker widget on your page.

To see a working demo as well as more in depth instructions on using the plugin, visit the Farbtastic page. Farbtastic is protected by the GPL.

Posted: July 18th, 2006


Subscribe for email updates

Comments are closed.
Comments are automatically turned off two weeks after the original post. If you have a question concerning the content of this post, please feel free to contact me.


Secrets of the JavaScript Ninja

Secrets of the JS Ninja

Secret techniques of top JavaScript programmers. Published by Manning.

John Resig Twitter Updates

@jeresig

Infrequent, short, updates and links.