Simple HSV/RGB Color Picker Plugin For jQuery - jColor-Picker

jColor-Picker is a jQuery plugin that helps you create a visual HSL/RGB color picker using HTML5 canvas element and a little JavaScript.

How to use it:

1. Put jQuery library together with the jColor-Picker plugin's JavaScript and CSS files in your html document.

<link rel="stylesheet" href="jcolor-picker.min.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jcolor-picker.min.js"></script>

2. Create a placeholder element for the color picker.

<div id="my-color-picker"></div>

3. Initialize the plugin to generate a default color picker inside the container element you created.

$('#my-color-picker').jColorPicker();

4. Customize your color picker by overriding the default styles as shown below:

.jcolor-picker{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #383838;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}

Change log:

2017-04-23

• added button
• added touch support

 

---

This awesome jQuery plugin is developed by 1rosehip. For more Advanced Usages, please check the demo page or visit the official website.