Sphere HTML5 Color Picker Plugin - jQuery ColorPicker.js

A small and high-performance jQuery color picker plugin that the users can select a color from a HTML5 canvas based sphere color wheel.

It provides a convenient callback function  that returns the selected color code (in hex) for further use.

How to use it:

1. Load the core stylesheet colorpicker.css and Font Awesome Iconic Font (required for icons) in the header of the document.

<link rel="stylesheet" href="/path/to/fontawesome.css" />
<link rel="stylesheet" href="colorpicker.css" />

2. Create a container to hold the color picker.

<div class="pickerarea">
</div>

3. Load jQuery library and the ColorPicker.js script at the end of the document.

<script src="jquery.slim.min.js"></script>
<script src="colorpicker.min.js"></script>

4. Call the function to initialize the color picker and get the selected color code using the callback function.

$(function(){
  $(".pickerarea").ColorPicker(
    {
      callback: function(color){
        console.log("Selected Color: "+color);
      }
    }
  );
});

---

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