Overview of the ColorPalette Component

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

States

disabled

Angular Blazor jQuery React Vue ASP.NET Core ASP.NET MVC

Appearance

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.

States

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.