A Color picker widget.

Included in: dx.webappjs.js, dx.all.js

The dxColorPicker widget allows a user to specify a color value manually or pick it out from the drop-down editor.

This widget, like any other DevExtreme UI widget, can be created using one of three possible approaches: jQuery, Knockout or AngularJS. The following code demonstrates how to create the dxColorPicker widget using the Knockout approach.

<div data-bind="dxColorPicker:{ value:colorValue }"></div>

The current widget value is specified by the value option.

Declare an observable variable and pass it to the value option to update the variable each time the widget value changes.

var colorValue = ko.observable("#FF0000");

NOTE: The widget supports CSS compatible color formats ("#FF0000", "Red", "rgb(255, 0, 0)").

See Also
  • To learn how to create widgets in detail, refer to the Create a Widget article.
  • The dxColorPicker widget is related to the Editors category. So read an overview of the features that are common for editors in the Common Tasks topic of the Editors article.

Watch Video

Show Example:


An object defining configuration options for the dxColorPicker widget.


This section describes members used to manipulate the widget.


This section describes events fired by this component.