🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A jQuery based, color wheel style HSV color picker component that makes it easier to select colors using mouse drag and mouse wheel. Degrades gracefully.

color-picker

Documentation

jQuery ColorPicker

I needed a color picker and couldn’t find one I liked so I made one.

Please fork, update, then let me know :)

usage

  1. load jQuery
  2. load jQuery ColorPicker
  3. instantiate jQuery ColorPicker

jQuery.ColorPicker

var myPicker = new jQuery.ColorPicker('#myDiv', {   imagepath: '../images/' });

constructor

jQuery.ColorPicker(container [, options])
  • container : String
    jQuery selector string for the element to be occupied by the ColorPicker.
  • options : Object
    Dictionary style object. See available options below.

options

  • imagepath : String
    The relative path from the page instantiating jQuery ColorPicker to the folder containing the included image files. Defaults to "" (same directory)
  • change : Function
    the given function will be called every time the ColorPicker updates. Keep in mind this may be many times a second while the user is dragging.

methods

  • change()
    Calls the change function supplied in options.
    ex. myPicker.change();
  • hex()
    Returns current hexadecimal color.
    ex. var myHexColor = myPicker.hex();
  • hex(hexString)
    Sets ColorPicker to specified hexadecimal color.
    ex. myPicker.hex('#ffffff');

compatibility

  • Tested only in Firefox 3.6, Chrome 4.0, and Safari 4.0.4 only since this is for an internal site.
  • Firefox is a bit buggy with dragging.

You May Also Like