Color Picker

About

A simple component to select color in the same way you select color in Adobe Photoshop

Features

• Flat mode - as element in page
• Powerful controls for color selection
• Easy to customize the look by changing some images
• Fits into the viewport

Examples

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);
	}
});