Extensions

To extend the functionality of Bootstrap Colorpicker, there is something called Bootstrap Colorpicker Extensions. The library comes with many core extensions like: preview (enabled by default), debugger, swatches and palette (used by swatches to resolve named colors), but you can also create your own using the $.colorpicker.Extension class and adding it globally to the Colorpicker.extensions static property or to your instance using myColorpicker.registerExtension(MyExtensionClass, extensionOptions).
Think of an extension as a plugin for Bootstrap Colorpicker, capable of listen and react to all of its events in a single place, as well as being able to resolve colors (like the swatches extension does).

Color Swatches

This example shows how use the swatches extension to define a list of preset color swatches (or color palette) and use their aliases as input values. W3C named colors are also supported.


Code
<div id="cp1" data-color="primary">
  <input type="text" class="form-control" style="width:auto"/> <br>
</div>
<script>
  $(function () {
    $('#cp1').colorpicker({
      inline: true,
      container: true,
      extensions: [
        {
          name: 'swatches', // extension name to load
          options: { // extension options
            colors: {
              'black': '#000000',
              'gray': '#888888',
              'white': '#ffffff',
              'red': 'red',
              'default': '#777777',
              'primary': '#337ab7',
              'success': '#5cb85c',
              'info': '#5bc0de',
              'warning': '#f0ad4e',
              'danger': '#d9534f'
            },
            namesAsValues: true
          }
        }
      ]
    });
  });
</script>

Debug Mode

When the debug option is enabled, the builtin debugger extension will be loaded.
On debug mode, every event is logged (as debug/verbose level) in the browser console. You can also intercept those logs with the 'colorpickerDebug' event, as shown in this example.
This example also shows how the events are triggered and when.


    Code
    <div id="cp2" class="input-group">
  <input type="text" class="form-control input-lg" value="#902100"/>
  <span class="input-group-append">
    <span class="input-group-text colorpicker-input-addon"><i></i></span>
  </span>
</div>
<br>
<ul id="cp2_debug"></ul>
<script>
  $(function () {
    var n = 0;
    $('#cp2')
        .colorpicker({
          debug: true
        })
        .on('colorpickerDebug', function (e) {
          var dbg = $('#cp2_debug');
          n++;
          while (dbg.find('li').length > 10) {
            // only list last 10 events
            dbg.find('li').first().remove();
          }
          dbg.append('<li>' + n + ': ' + e.debug.eventName + '</li>');
        });
  });
</script>