Simple color palette for Bootstrap
JavaScript CSS
Switch branches/tags
Nothing to show
Latest commit db6e748 Oct 24, 2013 @extremeFE Merge pull request #3 from dillonlucente/master
Fixing lightest gray color.
Permalink
Failed to load latest commit information.
css add example of google style color palette Jun 20, 2013
js Fixing lightest gray color. Oct 23, 2013
README.md Update README.md Jun 24, 2013
example.html Update bootstrap cdn Sep 7, 2013

README.md

bootstrap-colorpalette

Simple color palette for Bootstrap

Online Demo

Requirements

Example

Basic

<div class="colorpalette"></div>
$('.colorpalette').colorPalette();

selectColor event

<input class="selected-color">
<div class="colorpalette"></div>
$('.colorpalette').colorPalette()
  .on('selectColor', function(e) {
    $('.selected-color').val(e.color);
  });

Gmail editor style

<div class="btn-group">
  <a class="selected-color" class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><i>A</i></a>
  <ul class="dropdown-menu">
    <li style="display:inline-block;">
      <div>&nbsp;font color</div>
      <div class="colorpalette1"></div>
    </li>
    <li style="display:inline-block;">
      <div>&nbsp;background color</div>
      <div class="colorpalette2"></div>
    </li>
  </ul>
</div>
$('.colorpalette1').colorPalette()
  .on('selectColor', function(e) {
    $('.selected-color i').css('color', e.color);
  });
$('.colorpalette2').colorPalette()
  .on('selectColor', function(e) {
    $('.selected-color i').css('background-color', e.color);
  });

Custom color option

<input class="selected-color">
<div class="colorpalette"></div>
var options = {
  colors:[['#000000', '#424242', '#636363', '#9C9C94', '#CEC6CE', '#EFEFEF', '#EFF7F7', '#FFFFFF']]
}
$('.colorpalette').colorPalette(options)
  .on('selectColor', function(e) {
    $('.selected-color').val(e.color);
  });