<!-- 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'}});