ColorPalettes provide users with a selection of predefined colors for various design or styling purposes, making color selection easier.

ColorPalette Overview

The ColorPalette component is a user interface element that provides a collection of colors that users can choose from. The component facilitates color selection in various applications, making it a handy tool for tasks that involve color matching and styling. With the ColorPalette, the user can pick colors from the palette and apply them to different elements or components.

Live Demo


ColorPalettes provide built-in styling options that grant visually appealing and flexible rendering experience. 

Apart from the default vision of the Telerik and Kendo UI ColorPalette, the component supports alternative styling options that enable you to configure the individual aspects of its appearance.


Depending on the action you want to imply through its appearance, the Telerik and Kendo UI ColorPalette can get the following states which you can set by using the following classes:

  • A ColorPalette in its normal state appears active, and is usable and clickable.
  • k-hover—The hover state of the ColorPalette is applied when the user hovers over a single color tile but does not click it. The mouse pointer changes to indicate that you can make a selection.
  • k-selected—The selected state of a ColorPalette is activated after the user has clicked on one of the color tiles.
  • k-focus—The focus state of the ColorPalette is triggered when the user navigates through the color tiles by keyboard, voice, or mouse click. This state highlights a single ColorPalette tile so that it covers all accessibility requirements.
  • k-disabled— The disabled state of the ColorPalette indicates that the user cannot interact with the component. When disabled, the component has no interactive behavior, it is faded out and slightly out of focus, which helps the user to distinguish it from the active elements on the page.


The anatomy of the ColorPalette summarizes the elements of the component. 

The next image shows the anatomy of a ColorPalette and includes the following elements: 

  1. ColorPalette tile
  2. ColorPalette row
  3. ColorPalette table

Framework-Specific Documentation

For specific information about the component, refer to its official product documentation: