Back to post

Bootstrap Colorselector is a very lightweight and easy to implement jQuery color picker plugin that works smoothly on a predefined set of colors. You can set a bunch of color as a select dropdown and it will convert to a dropdown menu automatically with predefined color set. The order of each color can be modified manually.

Features:

How to use it:

1. Include the Javascript bootstrap-colorselector.min.js at the bottom of the web page.

<script src="path/to/bootstrap-colorselector.min.js"></script>

2. Include the CSS bootstrap-colorselector.min.css in the header of the page.

<link rel="stylesheet" href="path/to/bootstrap-colorselector.min.css">

3. Add the basic HTML to the page.

<select id="colorselector">
  <option value="106" data-color="#A0522D">sienna</option>
  <option value="47" data-color="#CD5C5C" selected="selected">indianred</option>
  <option value="87" data-color="#FF4500">orangered</option>
  <option value="15" data-color="#DC143C">crimson</option>
  <option value="24" data-color="#FF8C00">darkorange</option>
  <option value="78" data-color="#C71585">mediumvioletred</option>
</select>

4. Initialize the plugin and we're ready to go. 

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

Methods

$().colorselector(options)

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

.colorselector('setColor', 'color')

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

.colorselector('setValue', value)

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

Plugin's default options:

Name Default Type Description
callback function callback(value, color, title);

First Example

HTML structure

<select id="colorselector">
  <option value="106" data-color="#A0522D">sienna</option>
  <option value="47" data-color="#CD5C5C" selected="selected">indianred</option>
  <option value="87" data-color="#FF4500">orangered</option>
  <option value="15" data-color="#DC143C">crimson</option>
  <option value="24" data-color="#FF8C00">darkorange</option>
  <option value="78" data-color="#C71585">mediumvioletred</option>
</select>

Script

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

Second Example

HTML structure

<select id="colorselector2">
  <option value="106" data-color="#A0522D">sienna</option>
  <option value="47" data-color="#CD5C5C" selected="selected">indianred</option>
  <option value="87" data-color="#FF4500">orangered</option>
  <option value="15" data-color="#DC143C">crimson</option>
  <option value="24" data-color="#FF8C00">darkorange</option>
  <option value="78" data-color="#C71585">mediumvioletred</option>
  <option value="79" data-color="#008B8B">darkcyan</option>
  <option value="18" data-color="#B8860B">darkgoldenrod</option>
</select>
<button class="btn" type="button" id="setColor">set by color (#008B8B)</button>
<button class="btn" type="button" id="setValue">set by value (18)</button>
<input type="text" id="colorValue" />
<input type="text" id="colorColor" />
<input type="text" id="colorTitle" />

Script

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

$("#setColor").click(function(e) {
  $("#colorselector2").colorselector("setColor", "#008B8B");
});

$("#setValue").click(function(e) {
  $("#colorselector2").colorselector("setValue", 18);
});