jQuery Wheel Color Picker Plugin

The 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.

Features

SUPPORTED COLORS

This plugin supports the following color modes:

  • RGB
  • HSV
  • HSB
  • Alpha channel

MULTIPLE FORMATS

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)

THEMING CAPABILITY

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.

Download

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+.

Usage

Initialize the color picker to an element by simply calling:

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

Documentation

See the complete documentation here.

Report Bugs

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

License

jQuery Wheel Color Picker plugin is released under MIT License.