Lightweight jQuery Color Picker Plugin For Bootstrap - Colorselector

File Size: 12.2 KB
Views Total: 8173
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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>

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


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

  callback: function (value, color, 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.