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

File Size: 22.7 KB
Views Total: 3322
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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.


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

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

Change log:


  • 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.