jQuery ‘Farbtastic’ colour picker

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;
    $('.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>

This entry was posted in Javascript, Tutorials, Twitter, Web Tools, jQuery and tagged color picker, colour picker. Bookmark the permalink.