Colorpicker

Bootstrap Colorpicker is a modular color picker plugin for Bootstrap 4. Plugin page. 

<!-- 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>
Hex
<div class="form-group">
  <input type="text" class="colorpicker-example form-control">
</div>
$('input.colorpicker-example').colorpicker({
  format: 'hex'
});
Rgb
<div class="form-group">
  <input type="text" class="colorpicker-example form-control">
</div>
$('input.colorpicker-example').colorpicker({
  format: 'rgb'
});
Rgba
<div class="form-group">
  <input type="text" class="colorpicker-example form-control">
</div>
$('input.colorpicker-example').colorpicker({
  format: 'rgba'
});
With custom options

Sample overriding the initial color and format

<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();
Working with events
Change background color 
<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');
});
Transparent color support
<div class="form-group">
  <input type="text" class="colorpicker-example form-control">
</div>
$('input.colorpicker-example').colorpicker({
    color: "transparent",
    format: "hex"
});
Horizontal mode
<div class="form-group">
  <input type="text" class="colorpicker-example form-control">
</div>
$('input.colorpicker-example').colorpicker({
    horizontal: true
});
Aliased color palette
<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'
    }
});