Attached to a field with hex format specified via options:
<input type="text" class="demo1" value="#5367ce" />
<script>
$(function(){
$('.demo1').colorpicker();
});
</script>
As a component:
<div class="input-group demo2">
<input type="text" value="" class="form-control" />
<span class="input-group-addon"><i></i></span>
</div>
<script>
$(function(){
$('.demo2').colorpicker();
});
</script>
Using events to work with the color:
Transparent color support:
Horizonal mode:
Inline mode:
Custom widget size:
<input type="text" id="demo_size" value="#ffaa00" />
<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(){
$('#demo_size').colorpicker({
customClass: 'colorpicker-2x',
sliders: {
saturation: {
maxLeft: 200,
maxTop: 200
},
hue: {
maxTop: 200
},
alpha: {
maxTop: 200
}
}
});
});
</script>
Enabled / disabled
Bootstrap Modal