Excellent jQuery Color Picker Plugin

I stumbled upon this frankly excellent, though unfortunately generically named, jQuery color picker plugin the other day. Color Picker is a jquery plugin developed by Stefan Petre, which simply put, delivers you with a neat little widget that allows a user to select a color the same way you would select a color in a graphics application like say Adobe Photoshop.

It is particularly simple, provides you with a number of configurable options as well as layouts to choose from. Listed as its main features, Color Picker exhibits a great flat mode (in other words can appear as an element in the page), power controls for color selection, easy customization (swapping in and out base images) and can fit nicely in the standard viewport.

It is dual licensed under MIT and GPL in case you were wondering.

Implementing is as simple as including the stylesheet and javascript file in your header and then instantiating the plugin in the usual way:

 $('input').ColorPicker(options);

where the options is a standard hash of optional paramters. These options include:

  • eventName: The desired event to trigger the colorpicker. Default: ‘click’
  • color: The default color. String for hex color or hash for RGB and HSB ({r:255, r:0, b:0}) . Default: ‘ff0000′
  • flat: Whatever if the color picker is appended to the element or triggered by an event. Default false
  • livePreview: Whatever if the color values are filled in the fields while changing values on selector or a field. If false it may improve speed. Default true
  • onShow: Callback function triggered when the color picker is shown
  • onBeforeShow: Callback function triggered before the color picker is shown
  • onHide: Callback function triggered when the color picker is hidden
  • onChange: Callback function triggered when the color is changed
  • onSubmit: Callback function triggered when the color it is chosen

So in other words, easy to implement, loads of customizable features and works like a charm!

Related Link: http://www.eyecon.ro/colorpicker/

Related Posts :

About Craig Lotter

Craig Lotter is an established web developer and application programmer, with strong creative urges (which keep bursting out at the most inopportune moments) and a seemingly insatiable need to love all things animated. Living in the beautiful coastal town of Gordon's Bay in South Africa, he games, develops, takes in animated fare, trains under the Funakoshi karate style and for the most part, simply enjoys life with his amazing wife and daughter. Oh, and he draws ever now and then too.
This entry was posted in Software & Websites and tagged , , , , , , . Bookmark the permalink.
  • http://www.weightlossndiets.com/weight-loss-program Micheal Beatty

    This is really excellent!

  • http://www.craiglotter.co.za Craig Lotter

    Eek, a spam comment that got through! O.O

  • Basilis

    Hey mate, do u know how i can transfirm the output of that Jquery plugin, to HEX instead of DEC?

  • http://www.craiglotter.co.za Craig Lotter
  • Sdasdfsdfsssssdsfaf

    dfdfdfdfd

  • Fsdsd

    asdfaddsdfdsdfsd

  • Emmaand

    HI.
    If I would like to change color of a div called “box” on change, how would the code look and where do I implement the code? ( new to jquery)