Lightweight jQuery Color Picker Plugin For Bootstrap - Colorselector

A jQuery & Bootstrap color picker that converts a normal select element containing a set of predefined colors into a popup color selector.

How to use it:

1. Load the Stylesheet bootstrap-colorselector.css and JavaScript file bootstrap-colorselector.js into your Bootstrap project.

<link href="bootstrap-colorselector.css" rel="stylesheet">
<script src="bootstrap-colorselector.js"></script>

2. Insert your predefined color hex values and names as options into a select element as this:

<select id="colorselector">
  <option value="1" data-color="#1ABC9C">TURQUOISE</option>
  <option value="2" data-color="#16A085" selected="selected">GREEN SEA</option>
  <option value="3" data-color="#2ECC71">EMERALD</option>
  ...
</select>

3. Attach the colorselector to the select element. Done.

$('#colorselector').colorselector();

4. Get and output the color values, hex codes and names:

$('#colorselector').colorselector({
  callback: function (value, color, title) {
    $("#colorValue").val(value);
    $("#colorColor").val(color);
    $("#colorTitle").val(title);
  }
});

5. Set the hex value.

$('#element').colorselector('setColor', '#FF0000');

6. Set the color value (ID).

$('#element').colorselector('setId', 4);

---

This awesome jQuery plugin is developed by flaute. For more Advanced Usages, please check the demo page or visit the official website.