Wheel Color Picker Plugin 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 and rearrange their positions.

RGB sliders:

HSV sliders:

Sliders only:

Preview color on textbox:

Color Picker Sizes

By default the color picker widget is automatically resizes to fit the sliders. However, you may also set a custom size to it by specifying width and height via CSS. This feature only applies to desktop website. For mobile browser, color picker will automatically adjusted to fit browser screen.

Default autoresize:

Custom size:

Custom size (sliders only):

Preview color on textbox:

Embedded Color Picker

Color picker can also be embedded inline.

Selected color:

Color Manipulations

By accessing color components in RGB or HSV, it is possible to manipulate colors with ease.

Pick a color:

Predefined colors:

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