jQuery Wheel Color Picker Plugin

jQuery Wheel Color PickerThe Wheel Color Picker plugin adds color picker functionality to HTML form inputs (text box) in the round color wheel fashion. The Wheel Color Picker dialog appears as users focus the input or can also be set as a block widget replacing the input. It currently supports these HTML elements:

  • input (works on buttons too!)
  • textarea

Note: It should also work on other HTML elements which support jQuery .val() function.



This plugin supports the following color modes:

  • RGB
  • HSV
  • HSB
  • Alpha channel


There are numbers of formats which the color picker can display its value:

  1. hex format, e.g. ffffff
  2. CSS-style hex format, e.g. #ffffff
  3. rgb format, e.g. rgb(255, 255, 255)
  4. rgba format, e.g. rgba(255, 255, 255, 1)
  5. hsv format, e.g. hsv(360, 1, 1, 1)
  6. hsb format, e.g. hsb(360, 1, 1, 1)


The color picker appearance can be customized using CSS. This package already contains two CSS variants which can be used as starting point to make your own theme.

The complete list of features can be read from the Documentation Page.


The Wheel Color Picker plugin is available for download:

You could also browse it at jQuery Plugin Registry or browse the source at GitHub. Click here to download older versions.

Version 1.x requires jQuery 1.4+ to work, whereas version 2.x onwards require jQuery 1.7+.


Initialize the color picker to an element by simply calling:

.wheelColorPicker( options );


<input type="text" class="colorpicker" />
<script type="text/javascript">
  $(function() { $('.colorpicker').wheelColorPicker(); });


See the complete documentation here.

Report Bugs

Should you encounter issues, feel free to report them at GitHub Issues Page.


jQuery Wheel Color Picker plugin is released under MIT License.