Bootstrap ColorPicker GitHub


Simple input field
<input id="cp1" type="text" class="form-control" value="#5367ce" /> <script> $(function() { $('#cp1').colorpicker(); }); </script>
As a component
<div id="cp2" class="input-group colorpicker-component"> <input type="text" value="#00AABB" class="form-control" /> <span class="input-group-addon"><i></i></span> </div> <script> $(function() { $('#cp2').colorpicker(); }); </script>
With custom options
Sample overriding the initial color and format
<div id="cp3" class="input-group colorpicker-component"> <input type="text" value="#00AABB" class="form-control" /> <span class="input-group-addon"><i></i></span> </div> <script> $(function() { $('#cp3').colorpicker({ color: '#AA3399', format: 'rgb' }); }); </script>
Working with events
Change background color
<a href="#" class="btn btn-default" id="cp4">Change background color</a> <script> $(function() { $('#cp4').colorpicker().on('changeColor', function(e) { $('body')[0].style.backgroundColor = e.color.toString( 'rgba'); }); }); </script>
Transparent color support
<input type="text" class="form-control" id="cp5" /> <script> $(function() { $('#cp5').colorpicker({ color: "transparent", format: "hex" }); }); </script>
Horizontal mode
<input type="text" class="form-control" id="cp6" /> <script> $(function() { $('#cp6').colorpicker({ color: "#88cc33", horizontal: true }); }); </script>
Inline mode
<div id="cp7" class="inl-bl"></div> <style> .inl-bl { display: inline-block; } </style> <script> $(function() { $('#cp7').colorpicker({ color: '#ffaa00', container: true, inline: true }); }); </script>
Aliased color palette
<div id="cp8" data-format="alias" class="input-group colorpicker-component"> <input type="text" value="primary" class="form-control" /> <span class="input-group-addon"><i></i></span> </div> <script> $(function() { $('#cp8').colorpicker({ colorSelectors: { 'black': '#000000', 'white': '#ffffff', 'red': '#FF0000', 'default': '#777777', 'primary': '#337ab7', 'success': '#5cb85c', 'info': '#5bc0de', 'warning': '#f0ad4e', 'danger': '#d9534f' } }); }); </script>
Customized widget size
Also showing the support of HTML color names
<input id="cp9" type="text" class="form-control" value="pink" /> <style> .colorpicker-2x .colorpicker-saturation { width: 200px; height: 200px; } .colorpicker-2x .colorpicker-hue, .colorpicker-2x .colorpicker-alpha { width: 30px; height: 200px; } .colorpicker-2x .colorpicker-color, .colorpicker-2x .colorpicker-color div { height: 30px; } </style> <script> $(function() { $('#cp9').colorpicker({ customClass: 'colorpicker-2x', sliders: { saturation: { maxLeft: 200, maxTop: 200 }, hue: { maxTop: 200 }, alpha: { maxTop: 200 } } }); }); </script>
Disabled / enabled status

Enable Disable

<div id="cp10" class="input-group colorpicker-component"> <input disabled type="text" value="" class="form-control" /> <span class="input-group-addon"><i></i></span> </div> <br> <p> <a class="btn btn-sm btn-default enable-button" href="#">Enable</a> <a class="btn btn-sm btn-default disable-button" href="#">Disable</a> </p> <script> $(function() { $(".disable-button").click(function(e) { e.preventDefault(); $("#cp10").colorpicker('disable'); }); $(".enable-button").click(function(e) { e.preventDefault(); $("#cp10").colorpicker('enable'); }); $('#cp10').colorpicker(); }); </script>
Inside a modal
<button class="btn btn-primary btn-md" data-toggle="modal" data-target="#myModal"> Show modal </button> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <div id="cp11" class="input-group colorpicker-component"> <input type="text" value="" class="form-control" /> <span class="input-group-addon"><i></i></span> </div> </div> </div> </div> </div> <script> $(function() { $('#cp11').colorpicker(); }); </script>