Properties

Name Type Default
colorMode String 'saturation'

Sets or gets the color mode.

Possible Values: 
'hue'
'saturation'

Code examples

Set the colorMode property. 

$('#ColorPicker').jqxColorPicker({colorMode: 'hue' });

Get the colorMode property. 

var colorMode = $('#jqxColorPicker').jqxColorPicker('colorMode');
Try it: colorMode is set to 'hue'
disabled Boolean false

Enables or disables the color picker.

Code examples

Set the disabled property. 

$('#ColorPicker').jqxColorPicker({disabled: true });

Get the disabled property. 

var disabled = $('#jqxColorPicker').jqxColorPicker('disabled');
Try it: disabled is set to true
height Number/String null

Sets or gets the height of the color picker.

Code examples

Set the height property. 

$('#ColorPicker').jqxColorPicker({height: 300 });

Get the height property. 

var height = $('#jqxColorPicker').jqxColorPicker('height');
Try it: height is set to 300
showTransparent Boolean false

Sets or gets the showTransparent property.

Code examples

Set the showTransparent property. 

$('#ColorPicker').jqxColorPicker({showTransparent: true });

Get the showTransparent property. 

var showTransparent = $('#jqxColorPicker').jqxColorPicker('showTransparent');
Try it: showTransparent is set to true
width Number/String null

Sets or gets the width of the color picker.

Code examples

Set the width property. 

$('#ColorPicker').jqxColorPicker({width: 300 });

Get the width property. 

var width = $('#jqxColorPicker').jqxColorPicker('width');
Try it: width is set to 300

Events
colorchange Event

This event is triggered when a new color is picked.

Code examples

Bind to the colorchange event by type: jqxColorPicker. 

$('#jqxColorPicker').bind('colorchange', function (event)
{ 
    var color = event.args;
});
Try it: Bind to the colorchange event by type:jqxColorPicker

Methods
getColor Method

Gets the color.

Parameter Type Description
None
Return Value
Object - object.hex - color as string. object.r, object.g, object.b - numbers from 0 to 255.

Code examples

Invoke the getColor method. 

var color = $("#jqxColorPicker").jqxColorPicker('getColor');
Try it: gets the color of the jqxColorPicker
setColor Method

Sets a color.

Parameter Type Description
color Object/String hex color string or object with object.r, object.g, object.b number properties. Each property value should be from 0 to 255.
Return Value
None

Code examples

Invoke the setColor method. 

 $("#jqxColorPicker").jqxColorPicker('setColor', '#bbaaff');
                        or
 $("#jqxColorPicker").jqxColorPicker('setColor', {r: 150, g: 250, b: 255});
Try it: sets the color of the jqxColorPicker