Color Palette for Bootstrap

View on GitHub

---

Basic color palette

Color

<div class="btn-group">
  <input id="selected-color1">
  <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown">Color</a>
  <ul class="dropdown-menu">
    <li><div id="colorpalette1"></div></li>
  </ul>
</div>

$('#colorpalette1').colorPalette()
  .on('selectColor', function(e) {
    $('#selected-color1').val(e.color);
  });

---

Gmail style color palette

A

•  font color
•  background color

<div class="btn-group">
  <a id="selected-color2" class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><i>A</i></a>
  <ul class="dropdown-menu" style="width:293px;">
    <li style="display:inline-block;">
      <div> font color</div>
      <div id="colorpalette2"></div>
    </li>
    <li style="display:inline-block;">
      <div> background color</div>
      <div id="colorpalette3"></div>
    </li>
  </ul>
</div>

$('#colorpalette2').colorPalette()
  .on('selectColor', function(e) {
    $('#selected-color2 i').css('color', e.color);
  });
$('#colorpalette3').colorPalette()
  .on('selectColor', function(e) {
    $('#selected-color2 i').css('background-color', e.color);
  });

---

Custom color option

<input id="selected-color3">
<div id="colorpalette4"></div>

var options = {
  colors:[['#000000', '#424242', '#636363', '#9C9C94', '#CEC6CE', '#EFEFEF', '#EFF7F7', '#FFFFFF']]
}
$('#colorpalette4').colorPalette(options)
  .on('selectColor', function(e) {
    $('#selected-color3').val(e.color);
  });