Use your left/right keys to browse tutorials
jQuery ‘Farbtastic’ colour picker

jQuery ‘Farbtastic’ colour picker

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on July 20, 2009

The Farbtastic colour picker is really easy to implement. Its great if your building a customisable interface for an online product in the same way that you can manipulate the design of your Twitter profile. Farbtastic uses layered transparent PNGs to render a saturation/luminance gradient inside of a hue circle. more info on the colour picker can be found here You need to include jQuery, farbtastic.js, and style sheet all of which are in the download below.


The Code

$(document).ready(function() {
    var f = $.farbtastic('#picker');
    var p = $('#picker').css('opacity', 0.25);
    var selected;
      .each(function () { f.linkTo(this); $(this).css('opacity', 0.75); })
      .focus(function() {
        if (selected) {
          $(selected).css('opacity', 0.75).removeClass('colorwell-selected');
        p.css('opacity', 1);
        $(selected = this).css('opacity', 1).addClass('colorwell-selected');

The html from the demo.

<form action="" style="width: 500px;">

  <div id="picker" style="float: right;"></div>
  <div class="form-item"><label for="color1">Color 1:</label><input type="text" id="color1" name="color1" class="colorwell" value="#edfa00" /></div>
  <div class="form-item"><label for="color2">Color 2:</label><input type="text" id="color2" name="color2" class="colorwell" value="#ff9505" /></div>
  <div class="form-item"><label for="color3">Color 3:</label><input type="text" id="color3" name="color3" class="colorwell" value="#f86c2a" /></div>


More tutorials from Papermashup
6 discussions around jQuery ‘Farbtastic’ colour picker
  1. Oscar says:

    Hi, excellent tutorial, i have a question, how i can call a function when anyone of the color is changed. thanks for share,

  2. Just what I needed. I was having trouble getting multiple color select options. This really helps out.

  3. Mecki says:

    Thanks for this tutorial!
    But after implementing this on my website firefly says me:

    container is undefined
    Line 27

    my code:

    var f = $.farbtastic(‘#picker’);
    var p = $(‘#picker’).css(‘opacity’, 0.25);
    var selected;
    .each(function () { f.linkTo(this); $(this).css(‘opacity’, 0.75); })
    .focus(function() {
    if (selected) {
    $(selected).css(‘opacity’, 0.75).removeClass(‘colorchoose-selected’);
    p.css(‘opacity’, 1);
    $(selected = this).css(‘opacity’, 1).addClass(‘colorchoose-selected’);

    Am I missing an easy mistake of me here?

  4. Jean-Christophe says:

    Really great for my client and is collection of Carnival glass wiki color that i have some ideas !

  5. Pippin says:

    Tutorial is great, but I cannot make it work in my WordPress admin. I’ve made it work perfect on a local file, but not in the WordPress admin. Any ideas or special tricks that are needed?

  6. great demo, will be implementing this right now on my wordpress theme.

Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.

Get in contact

Please use the form below to get in contact. If your question is related to a free script download, please use the comments on the article page as community members are more likely to respond quicker than I can personally.

About Me

I'm Ashley Ford, Co-founder and Technical Director at London, UK. Previously I worked at InMobi, Spotify and MySpace. My interests include photography and making short videos I'm also an avid F1 fan. I'm always working on side projects. Here are a few: Easy Poll, We Deliver.

What do you specialise in?

I spend a lot of time coding in PHP and MySQL, as well as front end XHTML and CSS. I also specialise in javascript and the jQuery framework as well as being an avid designer. You can find me on dribbble

Interested in advertising?

If you'd like to advertise on please get in touch via the contact link below for advertising opportunities.

How do I contact you

You can contact me here. and I'm available for consultation, freelance, programming book reviews.

Get on the mailing list

Join over 3000 people who have subscribed to the Papermashup inbox message, and be the first to find out about tutorial, competitions and giveaways.