<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Color picker for jQuery</title>
  <meta name="description" content="A very simple jQuery color picker plugin">

  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.css">
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css">
  <link rel="stylesheet" href="jquery.simplecolorpicker.css">
  <link rel="stylesheet" href="jquery.simplecolorpicker-regularfont.css">
  <link rel="stylesheet" href="jquery.simplecolorpicker-glyphicons.css">
  <link rel="stylesheet" href="jquery.simplecolorpicker-fontawesome.css">
</head>

<body style="padding: 15px;">

<!-- Button to init the jQuery plugin -->
<button id="init" class="btn btn-primary">Init the jQuery plugin</button>

<!-- Button to destroy the jQuery plugin -->
<button id="destroy" class="btn btn-danger">Destroy the jQuery plugin</button>

<br><br>

<h3>Short list of colors</h3>
colorpicker-shortlist:
<select name="colorpicker-shortlist">
  <option value="#7bd148">Green</option>
  <option value="#5484ed">Bold blue</option>
  <option value="#a4bdfc">Blue</option>
  <option value="#46d6db">Turquoise</option>
  <option value="#7ae7bf">Light green</option>
  <option value="#51b749">Bold green</option>
  <option value="#fbd75b">Yellow</option>
  <option value="#ffb878">Orange</option>
  <option value="#ff887c">Red</option>
  <option value="#dc2127">Bold red</option>
  <option value="#dbadff">Purple</option>
  <option value="#e1e1e1">Gray</option>
</select>

<h3>Long list of colors</h3>
colorpicker-longlist:
<select name="colorpicker-longlist">
  <option value="#ac725e">#ac725e</option>
  <option value="#d06b64">#d06b64</option>
  <option value="#f83a22">#f83a22</option>
  <option value="#fa573c">#fa573c</option>
  <option value="#ff7537">#ff7537</option>
  <option value="#ffad46">#ffad46</option>
  <option value="#42d692">#42d692</option>
  <option value="#16a765">#16a765</option>
  <option value="#7bd148">#7bd148</option>
  <option value="#b3dc6c">#b3dc6c</option>
  <option value="#fbe983">#fbe983</option>
  <option value="#fad165">#fad165</option>
  <option value="#92e1c0">#92e1c0</option>
  <option value="#9fe1e7">#9fe1e7</option>
  <option value="#9fc6e7">#9fc6e7</option>
  <option value="#4986e7">#4986e7</option>
  <option value="#9a9cff">#9a9cff</option>
  <option value="#b99aff">#b99aff</option>
  <option value="#c2c2c2">#c2c2c2</option>
  <option value="#cabdbf">#cabdbf</option>
  <option value="#cca6ac">#cca6ac</option>
  <option value="#f691b2">#f691b2</option>
  <option value="#cd74e6">#cd74e6</option>
  <option value="#a47ae2">#a47ae2</option>
</select>

<h3>No theme</h3>
colorpicker-notheme:
<select name="colorpicker-notheme">
  <option value="#7bd148">Green</option>
  <option value="#5484ed">Bold blue</option>
  <option value="#a4bdfc">Blue</option>
  <option value="#46d6db">Turquoise</option>
  <option value="#7ae7bf">Light green</option>
  <option value="#51b749">Bold green</option>
  <option value="#fbd75b">Yellow</option>
  <option value="#ffb878">Orange</option>
  <option value="#ff887c">Red</option>
  <option value="#dc2127">Bold red</option>
  <option value="#dbadff">Purple</option>
  <option value="#e1e1e1">Gray</option>
</select>

<h3>'regularfont' theme</h3>
colorpicker-regularfont:
<select name="colorpicker-regularfont">
  <option value="#7bd148">Green</option>
  <option value="#5484ed">Bold blue</option>
  <option value="#a4bdfc">Blue</option>
  <option value="#46d6db">Turquoise</option>
  <option value="#7ae7bf">Light green</option>
  <option value="#51b749">Bold green</option>
  <option value="#fbd75b">Yellow</option>
  <option value="#ffb878">Orange</option>
  <option value="#ff887c">Red</option>
  <option value="#dc2127">Bold red</option>
  <option value="#dbadff">Purple</option>
  <option value="#e1e1e1">Gray</option>
</select>

<h3>'glyphicons' theme</h3>
colorpicker-glyphicons:
<select name="colorpicker-glyphicons">
  <option value="#7bd148">Green</option>
  <option value="#5484ed">Bold blue</option>
  <option value="#a4bdfc">Blue</option>
  <option value="#46d6db">Turquoise</option>
  <option value="#7ae7bf">Light green</option>
  <option value="#51b749">Bold green</option>
  <option value="#fbd75b">Yellow</option>
  <option value="#ffb878">Orange</option>
  <option value="#ff887c">Red</option>
  <option value="#dc2127">Bold red</option>
  <option value="#dbadff">Purple</option>
  <option value="#e1e1e1">Gray</option>
</select>

<h3>'fontawesome' theme</h3>
colorpicker-fontawesome:
<select name="colorpicker-fontawesome">
  <option value="#7bd148">Green</option>
  <option value="#5484ed">Bold blue</option>
  <option value="#a4bdfc">Blue</option>
  <option value="#46d6db">Turquoise</option>
  <option value="#7ae7bf">Light green</option>
  <option value="#51b749">Bold green</option>
  <option value="#fbd75b">Yellow</option>
  <option value="#ffb878">Orange</option>
  <option value="#ff887c">Red</option>
  <option value="#dc2127">Bold red</option>
  <option value="#dbadff">Purple</option>
  <option value="#e1e1e1">Gray</option>
</select>

<h3>Bootstrap 3 form</h3>
<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-4 control-label" for="input01">Text input</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" id="input01">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-4 col-sm-6">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Option one
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-4 control-label" for="colorpicker-bootstrap3-form">colorpicker-bootstrap3-form</label>
    <div class="col-sm-6">
      <select name="colorpicker-bootstrap3-form" id="colorpicker-bootstrap3-form" class="form-control">
        <option value="#7bd148">Green</option>
        <option value="#5484ed">Bold blue</option>
        <option value="#a4bdfc">Blue</option>
        <option value="#46d6db">Turquoise</option>
        <option value="#7ae7bf">Light green</option>
        <option value="#51b749">Bold green</option>
        <option value="#fbd75b">Yellow</option>
        <option value="#ffb878">Orange</option>
        <option value="#ff887c">Red</option>
        <option value="#dc2127">Bold red</option>
        <option value="#dbadff">Purple</option>
        <option value="#e1e1e1">Gray</option>
      </select>
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-4 control-label" for="multiSelect">Multicon-select</label>
    <div class="col-sm-6">
      <select multiple id="multiSelect" class="form-control">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-4 control-label" for="fileInput">File input</label>
    <div class="col-sm-6">
      <input id="fileInput" type="file">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-4 col-sm-6">
      <button type="submit" class="btn btn-primary">Save changes</button>
      <button class="btn btn-default">Cancel</button>
    </div>
  </div>
</form>

<h3>Bootstrap 3 modal window</h3>
<a href="#myModal" class="btn btn-primary" data-toggle="modal">Launch demo modal</a>
<div id="myModal" class="modal fade" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        colorpicker-modal-inline:
        <select name="colorpicker-modal-inline">
          <option value="#7bd148">Green</option>
          <option value="#5484ed">Bold blue</option>
          <option value="#a4bdfc">Blue</option>
          <option value="#46d6db">Turquoise</option>
          <option value="#7ae7bf">Light green</option>
          <option value="#51b749">Bold green</option>
          <option value="#fbd75b">Yellow</option>
          <option value="#ffb878">Orange</option>
          <option value="#ff887c">Red</option>
          <option value="#dc2127">Bold red</option>
          <option value="#dbadff">Purple</option>
          <option value="#e1e1e1">Gray</option>
        </select>
        <br><br>
        colorpicker-modal-picker:
        <select name="colorpicker-modal-picker">
          <option value="#7bd148">Green</option>
          <option value="#5484ed">Bold blue</option>
          <option value="#a4bdfc">Blue</option>
          <option value="#46d6db">Turquoise</option>
          <option value="#7ae7bf">Light green</option>
          <option value="#51b749">Bold green</option>
          <option value="#fbd75b">Yellow</option>
          <option value="#ffb878">Orange</option>
          <option value="#ff887c">Red</option>
          <option value="#dc2127">Bold red</option>
          <option value="#dbadff">Purple</option>
          <option value="#e1e1e1">Gray</option>
        </select>
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="modal">Close</button>
        <button class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<h3>Option selected</h3>
colorpicker-option-selected:
<select name="colorpicker-option-selected">
  <option value="#7bd148">Green</option>
  <option value="#5484ed">Bold blue</option>
  <option value="#a4bdfc" selected>Blue</option>
  <option value="#46d6db">Turquoise</option>
  <option value="#7ae7bf">Light green</option>
  <option value="#51b749">Bold green</option>
  <option value="#fbd75b">Yellow</option>
  <option value="#ffb878">Orange</option>
  <option value="#ff887c" selected>Red</option>
  <option value="#dc2127">Bold red</option>
  <option value="#dbadff">Purple</option>
  <option value="#e1e1e1">Gray</option>
</select>

<h3>Options disabled</h3>
colorpicker-options-disabled:
<select name="colorpicker-options-disabled">
  <option value="#7bd148">Green</option>
  <option value="#5484ed">Bold blue</option>
  <option value="#a4bdfc" disabled>Blue</option>
  <option value="#46d6db">Turquoise</option>
  <option value="#7ae7bf">Light green</option>
  <option value="#51b749">Bold green</option>
  <option value="#fbd75b">Yellow</option>
  <option value="#ffb878">Orange</option>
  <option value="#ff887c" disabled>Red</option>
  <option value="#dc2127">Bold red</option>
  <option value="#dbadff">Purple</option>
  <option value="#e1e1e1">Gray</option>
</select>

<h3>Option selected and disabled at the same time</h3>
colorpicker-option-selected-disabled:
<select name="colorpicker-option-selected-disabled">
  <option value="#7bd148">Green</option>
  <option value="#5484ed">Bold blue</option>
  <option value="#a4bdfc" selected disabled>Blue</option>
  <option value="#46d6db">Turquoise</option>
  <option value="#7ae7bf">Light green</option>
  <option value="#51b749">Bold green</option>
  <option value="#fbd75b">Yellow</option>
  <option value="#ffb878">Orange</option>
  <option value="#ff887c" selected disabled>Red</option>
  <option value="#dc2127">Bold red</option>
  <option value="#dbadff">Purple</option>
  <option value="#e1e1e1">Gray</option>
</select>

<h3>Optgroups</h3>
colorpicker-optgroups:
<select name="colorpicker-optgroups">
  <option value="#7bd148">Green</option>
  <option value="#5484ed">Bold blue</option>
  <optgroup label="----------"></optgroup>
  <option value="#a4bdfc">Blue</option>
  <option value="#46d6db">Turquoise</option>
  <option value="#7ae7bf">Light green</option>
  <option value="#51b749">Bold green</option>
  <option value="#fbd75b">Yellow</option>
  <option value="#ffb878">Orange</option>
  <option value="#ff887c">Red</option>
  <option value="#dc2127">Bold red</option>
  <optgroup label="----------"></optgroup>
  <option value="#dbadff">Purple</option>
  <option value="#e1e1e1">Gray</option>
</select>

<h3>Change background color</h3>
colorpicker-change-background-color:
<select name="colorpicker-change-background-color">
  <option value="#7bd148">Green</option>
  <option value="#5484ed">Bold blue</option>
  <option value="#a4bdfc">Blue</option>
  <option value="#46d6db">Turquoise</option>
  <option value="#7ae7bf">Light green</option>
  <option value="#51b749">Bold green</option>
  <option value="#fbd75b">Yellow</option>
  <option value="#ffb878">Orange</option>
  <option value="#ff887c">Red</option>
  <option value="#dc2127">Bold red</option>
  <option value="#dbadff">Purple</option>
  <option value="#e1e1e1">Gray</option>
</select>

<h3>selectColor('#fbd75b') after 5 seconds</h3>
colorpicker-selectColor-#fbd75b:
<select name="colorpicker-selectColor-#fbd75b">
  <option value="#7bd148">Green</option>
  <option value="#5484ed">Bold blue</option>
  <option value="#a4bdfc">Blue</option>
  <option value="#46d6db">Turquoise</option>
  <option value="#7ae7bf">Light green</option>
  <option value="#51b749">Bold green</option>
  <option value="#fbd75b">Yellow</option>
  <option value="#ffb878">Orange</option>
  <option value="#ff887c">Red</option>
  <option value="#dc2127">Bold red</option>
  <option value="#dbadff">Purple</option>
  <option value="#e1e1e1">Gray</option>
</select>

<h3>selectColor('#FBD75B') after 5 seconds</h3>
colorpicker-selectColor-#FBD75B:
<select name="colorpicker-selectColor-#FBD75B">
  <option value="#7bd148">Green</option>
  <option value="#5484ed">Bold blue</option>
  <option value="#a4bdfc">Blue</option>
  <option value="#46d6db">Turquoise</option>
  <option value="#7ae7bf">Light green</option>
  <option value="#51b749">Bold green</option>
  <option value="#fbd75b">Yellow</option>
  <option value="#ffb878">Orange</option>
  <option value="#ff887c">Red</option>
  <option value="#dc2127">Bold red</option>
  <option value="#dbadff">Purple</option>
  <option value="#e1e1e1">Gray</option>
</select>

<h3>Multiple selectColor('#fbd75b') after 5 seconds</h3>
colorpicker-selectColor-#fbd75b-multiple:
<select name="colorpicker-selectColor-#fbd75b-multiple" style="display: none;">
  <option value="#7bd148">Green</option>
  <option value="#5484ed">Bold blue</option>
  <option value="#a4bdfc">Blue</option>
  <option value="#46d6db">Turquoise</option>
  <option value="#7ae7bf">Light green</option>
  <option value="#51b749">Bold green</option>
  <option value="#fbd75b">Yellow</option>
  <option value="#fbd75b">Yellow</option>
  <option value="#fbd75b">Yellow</option>
  <option value="#ffb878">Orange</option>
  <option value="#ff887c">Red</option>
  <option value="#dc2127">Bold red</option>
  <option value="#dbadff">Purple</option>
  <option value="#e1e1e1">Gray</option>
</select>

<h3>selectColor('unknown') after 5 seconds</h3>
colorpicker-selectColor-unknown:
<select name="colorpicker-selectColor-unknown">
  <option value="#7bd148">Green</option>
  <option value="#5484ed">Bold blue</option>
  <option value="#a4bdfc">Blue</option>
  <option value="#46d6db">Turquoise</option>
  <option value="#7ae7bf">Light green</option>
  <option value="#51b749">Bold green</option>
  <option value="#fbd75b">Yellow</option>
  <option value="#ffb878">Orange</option>
  <option value="#ff887c">Red</option>
  <option value="#dc2127">Bold red</option>
  <option value="#dbadff">Purple</option>
  <option value="#e1e1e1">Gray</option>
</select>

<h3>Picker short list</h3>
colorpicker-picker-shortlist:
<select name="colorpicker-picker-longlist">
  <option value="#7bd148">Green</option>
  <option value="#5484ed">Bold blue</option>
  <option value="#a4bdfc">Blue</option>
  <option value="#46d6db">Turquoise</option>
  <option value="#7ae7bf">Light green</option>
  <option value="#51b749">Bold green</option>
  <option value="#fbd75b">Yellow</option>
  <option value="#ffb878">Orange</option>
  <option value="#ff887c">Red</option>
  <option value="#dc2127">Bold red</option>
  <option value="#dbadff">Purple</option>
  <option value="#e1e1e1">Gray</option>
</select>

<h3>Picker long list</h3>
colorpicker-picker-longlist:
<select name="colorpicker-picker-longlist">
  <option value="#ac725e">#ac725e</option>
  <option value="#d06b64">#d06b64</option>
  <option value="#f83a22">#f83a22</option>
  <option value="#fa573c">#fa573c</option>
  <option value="#ff7537">#ff7537</option>
  <option value="#ffad46">#ffad46</option>
  <option value="#42d692">#42d692</option>
  <option value="#16a765">#16a765</option>
  <option value="#7bd148">#7bd148</option>
  <option value="#b3dc6c">#b3dc6c</option>
  <option value="#fbe983">#fbe983</option>
  <option value="#fad165">#fad165</option>
  <option value="#92e1c0">#92e1c0</option>
  <option value="#9fe1e7">#9fe1e7</option>
  <option value="#9fc6e7">#9fc6e7</option>
  <option value="#4986e7">#4986e7</option>
  <option value="#9a9cff">#9a9cff</option>
  <option value="#b99aff">#b99aff</option>
  <option value="#c2c2c2">#c2c2c2</option>
  <option value="#cabdbf">#cabdbf</option>
  <option value="#cca6ac">#cca6ac</option>
  <option value="#f691b2">#f691b2</option>
  <option value="#cd74e6">#cd74e6</option>
  <option value="#a47ae2">#a47ae2</option>
</select>

<h3>Picker with 1s animation delay</h3>
colorpicker-picker-delay:
<select name="colorpicker-picker-delay">
  <option value="#7bd148">Green</option>
  <option value="#5484ed">Bold blue</option>
  <option value="#a4bdfc">Blue</option>
  <option value="#46d6db">Turquoise</option>
  <option value="#7ae7bf">Light green</option>
  <option value="#51b749">Bold green</option>
  <option value="#fbd75b">Yellow</option>
  <option value="#ffb878">Orange</option>
  <option value="#ff887c">Red</option>
  <option value="#dc2127">Bold red</option>
  <option value="#dbadff">Purple</option>
  <option value="#e1e1e1">Gray</option>
</select>

<h3>Picker with option selected</h3>
colorpicker-picker-option-selected:
<select name="colorpicker-picker-option-selected">
  <option value="#7bd148">Green</option>
  <option value="#5484ed">Bold blue</option>
  <option value="#a4bdfc" selected>Blue</option>
  <option value="#46d6db">Turquoise</option>
  <option value="#7ae7bf">Light green</option>
  <option value="#51b749">Bold green</option>
  <option value="#fbd75b">Yellow</option>
  <option value="#ffb878">Orange</option>
  <option value="#ff887c" selected>Red</option>
  <option value="#dc2127">Bold red</option>
  <option value="#dbadff">Purple</option>
  <option value="#e1e1e1">Gray</option>
</select>

<h3>Picker with options disabled</h3>
colorpicker-picker-options-disabled:
<select name="colorpicker-picker-options-disabled">
  <option value="#7bd148">Green</option>
  <option value="#5484ed">Bold blue</option>
  <option value="#a4bdfc" disabled>Blue</option>
  <option value="#46d6db">Turquoise</option>
  <option value="#7ae7bf">Light green</option>
  <option value="#51b749">Bold green</option>
  <option value="#fbd75b">Yellow</option>
  <option value="#ffb878">Orange</option>
  <option value="#ff887c" disabled>Red</option>
  <option value="#dc2127">Bold red</option>
  <option value="#dbadff">Purple</option>
  <option value="#e1e1e1">Gray</option>
</select>

<h3>Picker with option selected and disabled at the same time</h3>
colorpicker-picker-option-selected-disabled:
<select name="colorpicker-picker-option-selected-disabled">
  <option value="#7bd148">Green</option>
  <option value="#5484ed">Bold blue</option>
  <option value="#a4bdfc" selected disabled>Blue</option>
  <option value="#46d6db">Turquoise</option>
  <option value="#7ae7bf">Light green</option>
  <option value="#51b749">Bold green</option>
  <option value="#fbd75b">Yellow</option>
  <option value="#ffb878">Orange</option>
  <option value="#ff887c" selected disabled>Red</option>
  <option value="#dc2127">Bold red</option>
  <option value="#dbadff">Purple</option>
  <option value="#e1e1e1">Gray</option>
</select>

<h3>Picker with Optgroups</h3>
colorpicker-picker-optgroups:
<select name="colorpicker-picker-optgroups">
  <option value="#7bd148">Green</option>
  <option value="#5484ed">Bold blue</option>
  <optgroup label="----------"></optgroup>
  <option value="#a4bdfc">Blue</option>
  <option value="#46d6db">Turquoise</option>
  <option value="#7ae7bf">Light green</option>
  <option value="#51b749">Bold green</option>
  <option value="#fbd75b">Yellow</option>
  <option value="#ffb878">Orange</option>
  <option value="#ff887c">Red</option>
  <option value="#dc2127">Bold red</option>
  <optgroup label="----------"></optgroup>
  <option value="#dbadff">Purple</option>
  <option value="#e1e1e1">Gray</option>
</select>

<h3>Picker with selectColor('#fbd75b') after 5 seconds</h3>
colorpicker-picker-selectColor-#fbd75b:
<select name="colorpicker-picker-selectColor-#fbd75b">
  <option value="#7bd148">Green</option>
  <option value="#5484ed">Bold blue</option>
  <option value="#a4bdfc">Blue</option>
  <option value="#46d6db">Turquoise</option>
  <option value="#7ae7bf">Light green</option>
  <option value="#51b749">Bold green</option>
  <option value="#fbd75b">Yellow</option>
  <option value="#ffb878">Orange</option>
  <option value="#ff887c">Red</option>
  <option value="#dc2127">Bold red</option>
  <option value="#dbadff">Purple</option>
  <option value="#e1e1e1">Gray</option>
</select>

<h3>Picker with selectColor('unknown') after 5 seconds</h3>
colorpicker-picker-selectColor-unknown:
<select name="colorpicker-picker-selectColor-unknown">
  <option value="#7bd148">Green</option>
  <option value="#5484ed">Bold blue</option>
  <option value="#a4bdfc">Blue</option>
  <option value="#46d6db">Turquoise</option>
  <option value="#7ae7bf">Light green</option>
  <option value="#51b749">Bold green</option>
  <option value="#fbd75b">Yellow</option>
  <option value="#ffb878">Orange</option>
  <option value="#ff887c">Red</option>
  <option value="#dc2127">Bold red</option>
  <option value="#dbadff">Purple</option>
  <option value="#e1e1e1">Gray</option>
</select>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.js"></script>
<script src="jquery.simplecolorpicker.js"></script>

<script>
$(document).ready(function() {
  $('select[name="colorpicker-change-background-color"]').on('change', function() {
    $(document.body).css('background-color', $('select[name="colorpicker-change-background-color"]').val());
  });

  setTimeout(function() {
    $('select[name="colorpicker-selectColor-#fbd75b"]').simplecolorpicker('selectColor', '#fbd75b');
  }, 5000);

  setTimeout(function() {
    $('select[name="colorpicker-selectColor-#FBD75B"]').simplecolorpicker('selectColor', '#FBD75B');
  }, 5000);

  setTimeout(function() {
    $('select[name="colorpicker-selectColor-#fbd75b-multiple"]').simplecolorpicker('selectColor', '#fbd75b');
  }, 5000);

  setTimeout(function() {
    // Generates a JavaScript error
    $('select[name="colorpicker-selectColor-unknown"]').simplecolorpicker('selectColor', 'unknown');
  }, 5000);


  setTimeout(function() {
    $('select[name="colorpicker-picker-selectColor-#fbd75b"]').simplecolorpicker('selectColor', '#fbd75b');
  }, 5000);

  setTimeout(function() {
    // Generates a JavaScript error
    $('select[name="colorpicker-picker-selectColor-unknown"]').simplecolorpicker('selectColor', 'unknown');
  }, 5000);
 

  $('#init').on('click', function() {
    $('select[name="colorpicker-shortlist"]').simplecolorpicker();
    $('select[name="colorpicker-longlist"]').simplecolorpicker();
    $('select[name="colorpicker-notheme"]').simplecolorpicker();
    $('select[name="colorpicker-regularfont"]').simplecolorpicker({theme: 'regularfont'});
    $('select[name="colorpicker-glyphicons"]').simplecolorpicker({theme: 'glyphicons'});
    $('select[name="colorpicker-fontawesome"]').simplecolorpicker({theme: 'fontawesome'});
    $('select[name="colorpicker-bootstrap3-form"]').simplecolorpicker({theme: 'glyphicons'});
    $('select[name="colorpicker-modal-inline"]').simplecolorpicker();
    $('select[name="colorpicker-modal-picker"]').simplecolorpicker({picker: true});
    $('select[name="colorpicker-option-selected"]').simplecolorpicker({theme: 'glyphicons'});
    $('select[name="colorpicker-options-disabled"]').simplecolorpicker({theme: 'glyphicons'});
    $('select[name="colorpicker-option-selected-disabled"]').simplecolorpicker({theme: 'glyphicons'});
    $('select[name="colorpicker-optgroups"]').simplecolorpicker();
    $('select[name="colorpicker-change-background-color"]').simplecolorpicker();
    $('select[name="colorpicker-selectColor-#fbd75b"]').simplecolorpicker({theme: 'glyphicons'});
    $('select[name="colorpicker-selectColor-#FBD75B"]').simplecolorpicker({theme: 'glyphicons'});
    $('select[name="colorpicker-selectColor-#fbd75b-multiple"]').simplecolorpicker({theme: 'glyphicons'});
    $('select[name="colorpicker-selectColor-unknown"]').simplecolorpicker({theme: 'glyphicons'});

    $('select[name="colorpicker-picker-shortlist"]').simplecolorpicker({picker: true, theme: 'glyphicons'});
    $('select[name="colorpicker-picker-longlist"]').simplecolorpicker({picker: true, theme: 'glyphicons'});
    $('select[name="colorpicker-picker-delay"]').simplecolorpicker({picker: true, theme: 'glyphicons', pickerDelay: 1000});
    $('select[name="colorpicker-picker-option-selected"]').simplecolorpicker({picker: true, theme: 'glyphicons'});
    $('select[name="colorpicker-picker-options-disabled"]').simplecolorpicker({picker: true, theme: 'glyphicons'});
    $('select[name="colorpicker-picker-option-selected-disabled"]').simplecolorpicker({picker: true, theme: 'glyphicons'});
    $('select[name="colorpicker-picker-optgroups"]').simplecolorpicker({picker: true, theme: 'glyphicons'});
    $('select[name="colorpicker-picker-selectColor-#fbd75b"]').simplecolorpicker({picker: true, theme: 'glyphicons'});
    $('select[name="colorpicker-picker-selectColor-unknown"]').simplecolorpicker({picker: true, theme: 'glyphicons'});
  });

  $('#destroy').on('click', function() {
    $('select').simplecolorpicker('destroy');
  });

  // By default, activate simplecolorpicker plugin on HTML selects
  $('#init').trigger('click');
});
</script>

</body>
</html>