How to make use of it:

1. Include the model sheet colorPick.css within the header and the JavaScript file.

<link rel="stylesheet" href="colorPick.css">
<!-- OPTIONAL DARK THEME -->
<link rel="stylesheet" href="colorPick.dark.theme.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="colorPick.js"></script>

2. Create a DOM component to put the color picker.

<div class="colorPickSelector"></div>

3. Initialize the color picker with default options.

$(".colorPickSelector").colorPick();

4. Style the color picker selector within the CSS.

.colorPickSelector {
  border-radius: 5px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  -webkit-transition: all linear .2s;
  -moz-transition: all linear .2s;
  -ms-transition: all linear .2s;
  -o-transition: all linear .2s;
  transition: all linear .2s;
}

.colorPickSelector:hover { transform: scale(1.1); }

5. Config the color picker with the next options.

$(".colorPickSelector").colorPick({
  'initialColor': '#3498db',
  'allowRecent': true,
  'recentMax': 5,
  'allowCustomColor': false,
  'palette': ["#1abc9c", "#16a085", "#2ecc71", "#27ae60", "#3498db", "#2980b9", "#9b59b6", "#8e44ad", "#34495e", "#2c3e50", "#f1c40f", "#f39c12", "#e67e22", "#d35400", "#e74c3c", "#c0392b", "#ecf0f1", "#bdc3c7", "#95a5a6", "#7f8c8d"],
  'onColorSelected': function() {
    this.element.css({'backgroundColor': this.color, 'color': this.color});
  }
});

Flat HTML5 Palette Color Picker, HTML5 Color Palette, ColorPick.js Plugin/Github

See Demo And Download