New to Kendo UI for Angular? Start a free 30-day trial

ColorPicker Customization

The ColorPicker provides multiple options for changing its appearance according to the user's needs. It allows you to specify settings, depending on the currently selected view - palette, gradient or combo. You could also enhance the visual appearance of the component by providing a Kendo UI or custom icon to be displayed in its button.

Customize the Palette View

To change the appearance in the popup when the palette view is being used, utilize the paletteSettings option of the ColorPicker component. It exposes the following settings:

  • columnsSpecifies the number of columns in the palette table. By default the table has 10 columns.
  • paletteDetermines the set of colors to be visualized in the palette itself. The possible values are an array or a comma-separated string with colors, or the name of one of our predefined palette color presets.
  • tileSizeDetermines the size of each colored tile(rectangle) in the palette table. The following values are allowed:
    • numberWill be applied to both the width and the height of the tile
    • TileSize configuration objectAllows specifying the width and height values individually.

The following example demonstrates the palette settings in action.

Example
View Source
Edit In Stackblitz  
Change Theme:

Customize the Gradient View

To change the appearance in the popup when the gradient view is being used, utilize the gradientSettings option of the ColorPicker component. It exposes the following settings:

  • clearButtonDetermines whether a Clear color button will be displayed in the popup. It allows the user to clear the current ColorPicker value.
  • opacityDetermines whether an opacity(alpha) slider will be displayed in the popup. Currently when the opacity slider is enabled, only rgba output format is available.

The following example demonstrates the gradient settings in action.

Example
View Source
Edit In Stackblitz  
Change Theme:

Customize the Combined View

The ColorPicker enables you to customize the combo view of its popup. To achieve this, utilize both the gradientSettings and the paletteSettings options of the component.

The following example demonstrates customized combo view.

Example
View Source
Edit In Stackblitz  
Change Theme:

Display an Icon in the ColorPicker

You can enhance the visual appearance of the ColorPicker by displaying an icon on the left side of its button. In this case the selected color will be displayed just below the icon. This allows you to bring visual context on what the selected color will be used for.

To display the icon use either of the following options:

  • iconAllows the usage of built-in Kendo UI icon by providing its name e.g. edit-tool. The icon will be automatically rendered in a span element with the corresponding CSS classes.
  • iconClassAllows the usage of custom icons by providing the full icon CSS classes to be rendered.

The following example demonstrates visualizing Kendo UI and custom icons in the ColorPicker.

Example
View Source
Edit In Stackblitz  
Change Theme: