• Material
  • Fabric
  • Bootstrap
  • High Contrast
Preferences
Theme Selection
Mode Selection
Touch
Mouse

Chart

This sample demonstrates customization of the ColorPicker component by using its properties from the property pane. Select any combination of properties from the property pane to customize the ColorPicker component.

DEMO
SOURCE

Choose a color

Value
Mode
Disable
Show Buttons
Show Switcher

The ColorPicker is a user interface to select and adjust color values. This supports various color specifications like RGB (Red Green Blue), HSV (Hue Saturation Value), and Hex codes.

In this sample, ColorPicker is rendered with default configuration.

This sample can be customized further with the combination of ColorPicker properties from the property pane. For example,

  • Control (apply/cancel) buttons can be enabled or disabled using Show Buttons checkbox from the property pane.
  • You can select the color by entering the color value in the property pane Value textbox.
  • You can switch to 'Picker' and 'Palette' modes by clicking and selecting the mode from Select Mode dropdownlist.
  • you can enable or disable the ColorPicker using Disabled checkbox from property pane.
  • you can enable or disable the mode switcher using Mode Switcher checkbox from property pane.

More information about ColorPicker can be found in this documentation section.