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.

color-picker

The Code

$(document).ready(function() {
    var f = $.farbtastic('#picker');
    var p = $('#picker').css('opacity', 0.25);
    var selected;
    $('.colorwell')
      .each(function () { f.linkTo(this); $(this).css('opacity', 0.75); })
      .focus(function() {
        if (selected) {
          $(selected).css('opacity', 0.75).removeClass('colorwell-selected');
        }
        f.linkTo(this);
        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>
 
</form>

demodownload



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,

  • http://punchupproductions.com 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
    http://localhost/p/arges6/js/farbtastic12/farbtastic/farbtastic.js
    Line 27

    my code:

    var f = $.farbtastic(‘#picker’);
    var p = $(‘#picker’).css(‘opacity’, 0.25);
    var selected;
    $(‘.colorchoose’)
    .each(function () { f.linkTo(this); $(this).css(‘opacity’, 0.75); })
    .focus(function() {
    if (selected) {
    $(selected).css(‘opacity’, 0.75).removeClass(‘colorchoose-selected’);
    }
    f.linkTo(this);
    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 !

  • http://pippinspages.com 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?

  • http://www.extension103.com Extension:103

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