Advanced examples

Add complementary color swatches

The colorpicker ColorItem class uses and comes bundled with Qix Color, a great color parsing library with a friendly API that allows you to manipulate and convert the color. ColorItem is just an abstraction layer on top of the library, which is more convenient for Bootstrap Colorpicker.

In this example we use the ColorItem API to add color swatches based on a tetrad of the selected color.


Code
<div id="cp1" data-color="#6D2781">
  <input type="text" class="form-control" style="width:auto"/> <br>
</div>
<script>
  $(function () {
    $('#cp1')
        .colorpicker({
          inline: true,
          container: true,
          extensions: [
            {
              name: 'swatches',
              options: {
                colors: {
                  'tetrad1': '#000',
                  'tetrad2': '#000',
                  'tetrad3': '#000',
                  'tetrad4': '#000'
                },
                namesAsValues: false
              }
            }
          ]
        })
        .on('colorpickerChange colorpickerCreate', function (e) {
          var colors = e.color.generate('tetrad');

          colors.forEach(function (color, i) {
            var colorStr = color.string(),
                swatch = e.colorpicker.picker
                    .find('.colorpicker-swatch[data-name="tetrad' + (i + 1) + '"]');

            swatch
                .attr('data-value', colorStr)
                .attr('title', colorStr)
                .find('> i')
                .css('background-color', colorStr);
          });
        });
  });
</script>

Customize the colorpicker size

This example shows how to tweak the Colorpicker styles and settings to make it look bigger.

Code
<div id="cp2" data-color="#6D2781"></div>
<style>
  .colorpicker.colorpicker-2x {
    width: 272px;
  }

  .colorpicker-2x .colorpicker-saturation {
    width: 200px;
    height: 200px;
  }

  .colorpicker-2x .colorpicker-hue,
  .colorpicker-2x .colorpicker-alpha {
    width: 30px;
    height: 200px;
  }

  .colorpicker-2x .colorpicker-alpha,
  .colorpicker-2x .colorpicker-preview {
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
  }

  .colorpicker-2x .colorpicker-preview,
  .colorpicker-2x .colorpicker-preview div {
    height: 30px;
    font-size: 16px;
    line-height: 160%;
  }

  .colorpicker-saturation .colorpicker-guide {
    height: 10px;
    width: 10px;
    border-radius: 10px;
    margin: -5px 0 0 -5px;
  }
</style>
<script>
  $(function () {
    $('#cp2').colorpicker({
      inline: true,
      container: true,
      format: null,
      customClass: 'colorpicker-2x',
      sliders: {
        saturation: {
          maxLeft: 200,
          maxTop: 200
        },
        hue: {
          maxTop: 200
        },
        alpha: {
          maxTop: 200
        }
      }
    });
  });
</script>

Customize the colorpicker template

This example shows how to use a custom template with a button inside.

Code
<div id="cp3" data-color="#305AA2"></div>
<script>
  $(function () {
    $('#cp3').colorpicker({
          inline: true,
          container: true,
          template: '<div class="colorpicker">' +
          '<div class="colorpicker-saturation"><i class="colorpicker-guide"></i></div>' +
          '<div class="colorpicker-hue"><i class="colorpicker-guide"></i></div>' +
          '<div class="colorpicker-alpha">' +
          '   <div class="colorpicker-alpha-color"></div>' +
          '   <i class="colorpicker-guide"></i>' +
          '</div>' +
          '<div class="colorpicker-bar"><button class="btn btn-danger">Button</button></div>' +
          '</div>'
        });
  });
</script>