Wheel Color Picker Plugin for jQuery

jQuery Wheel Color PickerThe Wheel Color Picker plugin adds color picker functionality to HTML <input> element in round color wheel style. The Wheel Color Picker can be displayed as a popup dialog as users focus the input, or embedded inline.

Try it here:

See more examples at our demonstration page.


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

  • Works in both RGB and HSV modes
  • Alpha channel support
  • Various string formats for returned input value (e.g. #ffffff, rgba(255, 255, 255, 0), hsv(360, 1, 1) etc.)
  • Theme customization using CSS with two base themes available: light and dark.
  • Works on responsive websites with support for both desktop and mobile browsers


The Wheel Color Picker plugin is available for download:

You could also browse it at npm or jQuery Plugin Registry. Source code is available at GitHub Repository.

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

Getting Started

The easiest way to initialize the color picker to an element is by simply adding data-wheelcolorpicker HTML attribute.

<!-- Don't forget to include all required JS and CSS files -->
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="jquery.wheelcolorpicker.js"></script>
<link type="text/css" rel="stylesheet" href="wheelcolorpicker.css" />

<input type="text" data-wheelcolorpicker />


See the complete documentation at GitHub Wiki Page.


Should you encounter bugs or have feature requests, feel free to report them at GitHub Issues Page.


jQuery Wheel Color Picker plugin is released under MIT License.

© 2011-2017 Fajar Yoseph Chandra

Support This Project

Do you find this plugin useful? Help support the continuation of Wheel Color Picker plugin development and support.

Click here to lend your support to: jQuery Wheel Color Picker Plugin and make a donation at pledgie.com !