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