Simple Predefined Color Selector Plugin – Bootstrap Colorselector

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:

• Bootstrap-colorselector is lightweight.
• Supports on all modern devices and browsers.
• Easy to implement.
• Supports to modify the order of color manually.

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: