jQuery Color Picker Plugin - wColorPicker

wColorPicker is a lightweight and fast jQuery plugin that adds a clean color picker to your web page. Comes with hover event, click event and supports some animation effects.

Basic Usage:

1. Include jQuery library and wColorPicker.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="wColorPicker.js"></script>

2.  Include wColorPicker CSS

<link rel="Stylesheet" type="text/css" href="wColorPicker.css" />

3. Markup

<div id="wColorPicker1" class="hoverBox">
<input id="wColorPicker_input1" type="text"/>
</div>

4. Call the plugin with options

<script type="text/javascript">
$("#wColorPicker1").wColorPicker({
initColor: '#FF00FF',
onSelect: function(color){
$("#wColorPicker_input1").css('background', color).val(color);
},
onMouseover: function(color){
$("#wColorPicker_input1").css('background', color).val(color);
},
onMouseout: function(color){
$("#wColorPicker_input1").css('background', color).val(color);
}
});
</script>

5. More Options

$('#wColorPicker1').wColorPicker({
    theme         : 'black',    // colors - black, white, cream, red, green, blue, yellow, orange, plum
    opacity       : 0.8,        // opacity level
    initColor     : '#FF0000',  // initial colour to set palette to
    onMouseover   : null,       // function to run when palette color is moused over
    onMouseout    : null,       // function to run when palette color is moused out
    onSelect      : null,       // function to run when palette color is selected
    mode          : 'flat',     // flat mode inserts the palette to container, other modes insert button into container - hover, click
    buttonSize    : 20,         // size of button if mode is ohter than flat
    effect        : 'slide',    // none/slide/fade
    showSpeed     : 500,        // time to run the effects on show
    hideSpeed     : 500         // time to run the effects on hide
});

Change log:

v2.1.7 (2013-09-27)

• Updated cursor for auto generated button
• Updated rgbHex to v1.1.2.

---

This awesome jQuery plugin is developed by websanova. For more Advanced Usages, please check the demo page or visit the official website.