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
  • Oscar

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

  • Daniel Murphy

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

  • Mecki

    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?

  • Jean-Christophe

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

  • Pippin

    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?

  • Extension:103

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