Press "Enter" to skip to content

A Minimal jQuery Color Picker Plugin for Modern Web | ColorPick.js

ColorPick.js is a simple, compact plug-in for jQuery color picker for the modern web. Color Picker plugin that allows the user to select colors from a predefined palette with support for recently selected colors.

jquery color picker, jquery color picker bs, jquery ui color picker, jquery color picker example, jquery color picker cdn, color picker plugin

How to make use of it:

1. Include the model sheet colorPick.css within the header and the JavaScript file on the bottom of the webpage.

<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

Official Website(philzet): Click Here

This superior jQuery/javascript plugin is developed by philzet. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *