A simple component to select color in the same way you select color in Adobe Photoshop
+Flat mode.
++
+
+$('#colorpickerHolder').ColorPicker({flat: true});
+
+ Custom skin and using flat mode to display the color picker in a custom widget.
+Attached to an text field and using callback functions to update the color with field's value and set the value back in the field by submiting the color.
+ +
+$('#colorpickerField1').ColorPicker({
+ onSubmit: function(hsb, hex, rgb) {
+ $('#colorpickerField1').val(hex);
+ },
+ onBeforeShow: function () {
+ $(this).ColorPickerSetColor(this.value);
+ }
+})
+.bind('keyup', function(){
+ $(this).ColorPickerSetColor(this.value);
+});
+
+ Attached to DOMElement and using callbacks to live preview the color and adding animation.
++
+$('#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);
+ }
+});
+
+