jQuery Wheel Color Picker Example

Getting Started

To use jQuery Wheel Color Picker Plugin, first you must include jquery.js (obviously), jquery.wheelcolorpicker.js, and wheelcolorpicker.css.

There are two ways to initialize color picker. One is by adding "data-wheelcolorpicker" attribute to the input element. The other way is by invoking $(element).wheelColorPicker() jQuery function.

When simply initializing wheel color picker with default options, a color picker is displayed as a popup under the input element containing a color wheel, value slider, and a preview box. The value generated by the color picker is in hexadecimal RGB format. If you change the format to something with alpha, an alpha slider will be added in addition to the color wheel and value component slider.

Default:

in RGBA format:

in HSV format:

in CSS format:

Slider customizations

Besides the default sliders, you may also display other color component sliders. Despite the name, the color wheel can be completely hidden too.

RGB sliders:

HSV sliders:

Sliders only:

Preview color on textbox:

Embedded Color Picker

Color picker can also be embedded in place of the input element.

Events

Various events occurring on the color picker are passed to the respective input element.

Pick a color:

Slider events

Input events

Selected color in RGB

Project homepage
Project documentation
Source code repository at GitHub