A repository of over 1000 quality jQuery plugins

jQuery jQuery Wheelcolorpicker

jQuery Wheelcolorpicker is a jQuery Rounded Edges plugin.

Created by Fujaru

A jQuery plugin to add color picker functionality to HTML form inputs in round color wheel style.

Not what you're looking for? Click here to view more Rounded Edges jQuery plugins

Wheel Color Picker Plugin for jQuery

The Wheel Color Picker plugin adds color picker functionality to HTML form inputs in round color wheel style. The Wheel Color Picker can be displayed as a popup dialog as users focus the input, or embedded inline. It currently supports these HTML elements:

  • input (works on buttons too!)
  • textarea

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



This plugin supports both RGB and HSV modes with additional Alpha channel.


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

  • hex format, e.g. ffffff
  • CSS-style hex format, e.g. #ffffff
  • rgb format, e.g. rgb(255, 255, 255)
  • hsv format, e.g. hsv(1.0, 1.0, 1.0)


The color picker can be set to display slider for each individual color channel.


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 color picker can automatically adapt when opened on mobile browsers with limited screen width.

See Features Page for the complete list.


First, include these javascript and CSS files on the HTML head section:

<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="css/wheelcolorpicker.css" />


Simply add data-wheelcolorpicker attribute to an input element.

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

And you're done!


Or you can also initialize the color picker to an element by calling:

$(element).wheelColorPicker( options );


<input type="text" class="colorpicker" />

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


See example.html for more usage examples or try it online at our demonstration page.


See Documentation Page for a complete documentation.


jQuery Wheel Color Picker plugin is released under MIT License.

What's New in 3.0

  • Code refactor
  • Support for responsive/mobile websites
  • Options for sliders arrangement
  • Programmatically resizeable color picker
  • External images no longer required

Read more about what's new at Documentation Page

Backward Compatibility

Version 2

Websites built using version 2 of the wheel color picker plugin can be upgraded to version 3 with no changes necessary.

However, CSS customizations made from version 2 may not be compatible with version 3 due to changes on HTML structure.

Please see Documentation Page for migrating instructions from version 2 to version 3.

Version 1.x

alpha option and color method marked as deprecated in version 2.x are now obsolete. CSS is not backward compatible. Switching back to base theme is recommended.

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

You might also like these other Rounded Edges jQuery Plugins


Copyright (c) 2011-2017 Fajar Yoseph Chandra