<!-- Css -->
<link rel="stylesheet" href="vendors/colorpicker/css/bootstrap-colorpicker.min.css" type="text/css">

<!-- Javascript -->
<script src="vendors/colorpicker/js/bootstrap-colorpicker.min.js"></script>

<div class="form-group">
  <input type="text" class="colorpicker-example form-control">
</div>

$('input.colorpicker-example').colorpicker({
  format: 'hex'
});

<div class="form-group">
  <input type="text" class="colorpicker-example form-control">
</div>

$('input.colorpicker-example').colorpicker({
  format: 'rgb'
});

<div class="form-group">
  <input type="text" class="colorpicker-example form-control">
</div>

$('input.colorpicker-example').colorpicker({
  format: 'rgba'
});

<div class="input-group colorpicker-example">
  <input type="text" value="red" class="form-control"/>
  <div class="input-group-append">
    <span class="input-group-text"><i></i></span>
  </div>
</div>

$('input.colorpicker-example').colorpicker();

<a href="#" class="btn btn-dark colorpicker-example">Change background color</a>

$('.colorpicker-example').colorpicker().on('changeColor', function (e) {
	$('body')[0].style.backgroundColor = e.color.toString('rgba');
});

<div class="form-group">
  <input type="text" class="colorpicker-example form-control">
</div>

$('input.colorpicker-example').colorpicker({
    color: "transparent",
    format: "hex"
});

<div class="form-group">
  <input type="text" class="colorpicker-example form-control">
</div>

$('input.colorpicker-example').colorpicker({
    horizontal: true
});

<div class="form-group">
  <input type="text" class="colorpicker-example form-control">
</div>

$('input.colorpicker-example').colorpicker({
    colorSelectors: {
        'black': '#000000',
        'white': '#ffffff',
        'red': '#FF0000',
        'default': '#777777',
        'primary': '#337ab7',
        'success': '#5cb85c',
        'info': '#5bc0de',
        'warning': '#f0ad4e',
        'danger': '#d9534f'
    }
});