Example Javascript code
$('#colorSelector').ColorPicker({
color: '#0000ff',
onShow: function (colpkr) {
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(500);
return false;
},
onChange: function (hsb, hex, rgb) {
$('#colorSelector div').css('backgroundColor', '#' + hex);
}
});
Example CSS code
#hello_id {
padding: 0px 2%;
border-top: 1px solid #fff;
border-bottom: 1px solid #bbb;
background: #e5e5e5;
background: -moz-linear-gradient(top, #e5e5e5 1%, #dbdbdb 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#e5e5e5), color-stop(100%,#dbdbdb));
background: -webkit-linear-gradient(top, #e5e5e5 1%,#dbdbdb 100%);
background: -o-linear-gradient(top, #e5e5e5 1%,#dbdbdb 100%);
background: -ms-linear-gradient(top, #e5e5e5 1%,#dbdbdb 100%);
background: linear-gradient(top, #e5e5e5 1%,#dbdbdb 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#dbdbdb',GradientType=0 );
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}