Wheel Color Picker 1.2 is Out!

Despite the two months age of the Wheel Color Picker plugin since its first debut, it is already used in various websites across countries. Therefore I am happy to announce the new release of jQuery Wheel Color Picker plugin! This new version adds some new exciting features and fixes:

  • Setting preset value is now supported. This can be achieved either by setting “value” attribute to inputs (e.g. < input class=”colorpicker” value=”FF0000″ />) or adding “color” option when initializing (e.g. $('.colorpicker').wheelColorPicker({ color: "FF0000" }); ).
  • Added “rgb%” (i.e. rgb(100%, 100%, 100%)) and “rgba%” (i.e. rgba(100%, 100%, 100%, 1) ) color formats.
  • The color picker now supports alpha value. If you set color format option to “rgba” or “rgba%”, the color picker dialog will come up with additional alpha slider on the right.
  • Fixed a bug that giving undefined reference to rselectedColor error when using rgba format.

Grab the package while it’s hot directly from http://plugins.jquery.com/files/jquery.wheelcolorpicker-1.2.0.zip

For an online demonstration and documentation, please visit http://www.jar2.net/projects/jquery-wheelcolorpicker/demo.

There are still things to do to improve this plugin, such as adding HSL color format support, advanced color picker and so on. Let’s look forward to have more new useful features implemented on the next release.



    • ¿How I can place two wheel Color Picker on the same page with two different formats?
      One rgba format and another hex format

    • The script configurations (formats, etc) are currently stored globally, so using different formats for multiple inputs on the same page is currently somewhat impossible without additional coding.

      Let’s say you have two inputs:
      <input type=”text” id=”ColorPicker1″ />
      <input type=”text” id=”ColorPicker2″ />

      Here’s the code to initialize plus additional code for the formats:
      $(function() {
      $(‘#ColorPicker1’).wheelColorPicker({dir: ‘.’, format: ‘rgba’});
      $(‘#ColorPicker2’).wheelColorPicker({dir: ‘.’, format: ‘hex’});

      $(‘#ColorPicker1’).focus(function() {
      $(this).wheelColorPicker({format: ‘rgba’});
      $(‘#ColorPicker2’).focus(function() {
      $(this).wheelColorPicker({format: ‘hex’});

      I am planning to put the configs separately for each color picker input in the near future release though.

      Anyway, thanks for your feedback. =)

    • With your advice is working perfectly.

      Thank you very much.

      Excellent plugin.