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