ColorPicker Customization

The ColorPicker allows you to customize the following building blocks:

• Views Toggle Buttons
• Clear Button
• Action Buttons Layout
• Palette View
• Gradient View
• Icons

Views Toggle Buttons

When both the Gradient and Palette view are present, the user can toggle between them through the view buttons rendered in the header of the ColorPicker popup. The order of the buttons will be determined by the order specified in the views array.

If only a single view is specified, the view toggle buttons will not be rendered.

The following example demonstrates the toggle buttons in action.

Clear Button

The ColorPicker provides an option to display a clear button, through the clearButton property. It allows the user to clear the current ColorPicker value.

The following example demonstrates the clear button.

Action Buttons Layout

When the preview option of the ColorPicker is enabled, it will display the Apply and Cancel action buttons in its footer. The layout of the buttons can be customized through the actionsLayout property.

The following example demonstrates how to customize the layout of the action buttons.

Palette View

To change the appearance in the popup when the ColorPicker displays its palette view, utilize its paletteSettings option.

The paletteSettings interface exposes the following options:

• columns—Specifies the number of columns in the palette table. By default, the table has 10 columns.

• palette—Determines the set of colors that will 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 the predefined palette color presets.

• tileSize—Determines the size of each colored tile (rectangle) in the palette table. The following values are allowed:

  • number—Will be applied to both the width and the height of the tile.
  • TileSize configuration object—Allows you to specify the width and height values individually.

The following example demonstrates the palette settings in action.

Gradient View

To change the appearance in the popup when the ColorPicker displays its gradient view, utilize its gradientSettings option.

The gradientSettings interface exposes the following options:

• contrastTool—Provides an option for displaying a contrast tool. It ensures the user that the selected color meets certain contrast requirements e.g. AA or AAA.
• opacity—Determines whether the popup will display an opacity (alpha) slider. Currently, when the opacity slider is enabled, you can use only an rgba output format.
• delay—Determines the delay time (in milliseconds) before the value is changed on handle drag.

The following example demonstrates the gradient settings in action.

Icons

You can enhance the visual appearance of the ColorPicker by displaying an icon to the left side of its button. The selected color will be displayed right below the icon, which allows you to bring visual context about the purpose of the selected color.

To display an icon, use either of the following options:

• SVG Icon
• Font and third-party icons

As of R2 2023 (v13.0.0) the default icon type in the Kendo UI for Angular components and Kendo UI themes is changed from font to svg. Set the svgIcon property, or Continue Using Font Icons.

Displaying SVG Icons

To display an SVG icon inside the ColorPicker set the svgIcon property of the ColorPicker to the necessary SVGIcon. For details, go to the list of SVG icons supported by Kendo UI for Angular.

Copy Code<kendo-colorpicker [svgIcon]="svgIcon"> </kendo-colorpicker>

Copy Codeimport { editToolsIcon, SVGIcon } from "@progress/kendo-svg-icons";

public svgIcon: SVGIcon = editToolsIcon;

The following example demonstrates how to set the svgIcon property of the ColorPicker.

Displaying Font Icons

To display a font icon inside the ColorPicker:

1. Use the ICON_SETTINGS token of the Icons package and set the icon type to font. For more information, go to the topic about icon settings.
2. Depending on the font icons library, you can set the:
   • icon property to a font icon in the Kendo UI theme. For details, go to the list of font icons supported by Kendo UI for Angular.

     Copy Code<kendo-colorpicker icon="edit-tools"></kendo-colorpicker>

   • iconClass property to a third-party font icon (like FontAwesome).

     Copy Code<kendo-colorpicker iconClass="fa fa-pencil-square-o"></kendo-colorpicker>

The following example demonstrates how to set the icon and iconClass properties of the ColorPicker.

Suggested Links

• API Reference of the ColorPicker