Really-simple-bootstrap-color-picker

This project is maintained by b3nj4m

That's a long name

really-simple-bootstrap-color-picker is a fork of really-simple-color-picker, thus the long name.

Improvements over really-simple-color-picker include:

Example usage

<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label">Pick a Color</label>
    <div class="controls input-prepend">
      <input type="text" name="color" class="color input-small" />
    </div>
  </div>
  <div class="control-group">
    <label class="control-label">Pick a Color</label>
    <div class="controls input-prepend">
      <input type="text" name="color" class="color input-small" />
    </div>
  </div>
</form>
$(function() {
  var $inputs = $('input.color');
  $inputs.colorPicker({pickerDefault: '#99CCFF'});

  $inputs.each(function(idx, item) {
    var $input = $(item);
    var $target = $input.parents('.control-group:first').find('label:first');
    $target.css('color', $input.val());

    $input.on('colorPicker:preview colorPicker:change', function(e, value) {
      $target.css('color', value);
    });

    $input.on('colorPicker:addSwatch', function(e, value) {
      //do something with custom color (e.g. persist on the server-side)
    });
  });
});

Destroying the color picker

If you need to destroy your color pickers for any reason, there is a handy destroy function.

$('input.color').colorPicker('destroy');