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