Fashion jQuery Color Picker & Selector Plugin - Wheel Color Picker

Fashion jQuery Color Picker & Selector Plugin - Wheel Color Picker
File Size: 185 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

How to start using jQuery?

More in this category...

View our Recommended Plugins

TOP 100 jQuery Plugins 2015

Wheel Color Picker is an easy-to-use jQuery plugin that turns your html form input or textarea into a fashion Color Picker & Selector for picking your favorite color. The color picker can be set to display slider for each individual color channel.

More features:

  • supports both RGB and HSV modes with additional Alpha channel.
  • supports multipe color formats: HEX, CSS-Style HEX, RGB and HSV
  • Fully customizable via CSS and javascript

More Examples:

You might also like:

Basic Usage:

1. Load the latest version of  jQuery library on your web page

<script src=""></script>

2. Download and include jQuery Wheel Color Picker files on the page

<script type="text/javascript" src="jquery.wheelcolorpicker.js"></script>
<link type="text/css" rel="stylesheet" href="css/wheelcolorpicker.css" />

3. There are two ways to initialize color picker. One is by adding "data-wheelcolorpicker" attribute to the input element. 

<input type="text" id="demo" data-wheelcolorpicker>

4. The other way is by invoking $(element).wheelColorPicker() jQuery function.

$(function() {

5. Default plugin options.

// String Color naming style. See colorToRgb for all available formats.
format: 'hex', 

// Enable dynamic slider gradients.
preview: false,

// Enable live color preview on input field
live: true,

// Enable picking color by typing directly
userinput: true,

// Automatically convert inputted value to specified format.
autoConvert: true, 

// Mixed Initial value in any of supported color value format or as an object. 
// Setting this value will override the current input value.
color: null, 

// This option is deprecated. Use sliders = "a" instead.
alpha: null, 

// Enable interactive sliders where slider bar gradients change dynamically as user drag a slider handle. 
// Set to false if this affect performance.
// See also 'quality' option if you wish to keep interactive slider but with reduced quality.
interactive: true,

// CSS Classes to be added to the color picker.
cssClass: '',

// Mixed Color picker width, either in px or 'stretch' to fit the input width. 
// If null then the default CSS size will be used.
width: null, 

// Color picker height in px. If null then the default CSS size will be used.
height: null,

// [block|popup] Layout mode.
layout: 'popup',

// Number Duration for transitions such as fade-in and fade-out.
animDuration: 200,

// Rendering details quality. The normal quality is 1. 
// Setting less than 0.1 may make the sliders ugly, while setting the value too high might affect performance.
quality: 1,

// tring combination of sliders. If null then the color picker will show default values, which is "wvp" for normal color or "wvap" for color with alpha value. 
// Possible combinations are "whsvrgbap". 
// Note that the order of letters affects the slider positions.
sliders: null, 

// Show labels for each slider.
showSliderLabel: true,

// Show numeric value of each slider.
showSliderValue: false,

// Round the alpha value to N decimal digits.
// Set -1 to disable rounding.
rounding: 2,

// Load options from HTML attributes. 
// To set options using HTML attributes, prefix these options with 'data-wcp-' as attribute names.
htmlOptions: true

Change log:

v2.4.5 (2015-10-16)

  • Hide keyboard implementation

v2.4.1 (2015-10-15)

  • Added touch support

v2.3.1 (2015-10-13)

  • Allow initializations using HTML attributes.
  • New examples.

v2.2.0 (2013-12-19)

  • Added example file for demonstrating events
  • Added events: sliderdown, sliderup, slidermove, focus, blur

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