ColorPicker

The ColorPicker is a compact color selection component providing a wide color spectrum and predefined palette.

ColorPicker Overview

The Telerik and Kendo UI ColorPicker component is a versatile UI element that allows users to select colors from a wide spectrum or choose from a set of predefined swatches, making it ideal for scenarios where precise color customization, flexibility, and ease of use are essential. In its dropdown, it offers both a color gradient view for custom color picking and a color palette view for quick selections. ColorPicker allows users to preview the selected color before submitting it and ensure that specific contrast requirements are met.

Live Demo

States
Modifiers
Variant
Size
Fill Mode
Roundness

Appearance

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

Apart from the default vision of the Telerik and Kendo UI ColorPicker, 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 ColorPicker can acquire the following states which you can set by using the following classes:

  • A ColorPicker in its normal state appears usable and clickable. The control displays a preselected color or a preview mask indicating that no color has been selected yet.
  • k-hover—When a user hovers over a ColorPicker, it enters the hover state. This state indicates that the control is interactive and that the user can click it to open a dropdown with color controls.
  • k-focus—When a user clicks or tabs into a ColorPicker, it enters the focus state. This state renders a visual indicator, such as a highlighted border, and indicates that the control is active and ready to use.
  • k-disabled—The disabled state indicates that a ColorPicker is temporarily unclickable and users cannot interact with it. To indicate that they are unavailable, ColorPickers in their disabled state appear faded and slightly out of focus.

Anatomy

The anatomy of the ColorPicker summarizes the elements of the component:

A Telerik and Kendo UI ColorPicker component with the ComboBox, ColorGradient icon, ColorPalette Icon, Reset Color Icon, Selected Color Preview, Previous Color Preview, Canvas, Color Controls, Color Formats, and Action Button elements
  1. Container
  2. Color preview
  3. Icon button
  4. Reset color icon button
  5. Selected and previous color preview
  6. ColorGradient icon button
  7. ColorPicker header
  8. ColorGradient
  9. ColorPicker footer
  10. ColorPalette icon button
  11. ColorPalette

Variants

Depending on the element the color preview displays, the Telerik and Kendo UI ColorPicker can be any of the following types:

  • ColorPicker with a Swatch color preview—The ColorPicker displays the currently selected color as a tile.
  • ColorPicker with an Icon and color indicator—The ColorPicker renders a customizable icon with a color indicator.
Two variants of a Telerik and Kendo UI ColorPicker component showing color swatch and icon with a color indicator
  1. ColorPicker with a Swatch color preview
  2. ColorPicker with an icon and a color indicator

Size

The ColorPicker provides the size configuration option that enables you to control how big or small the rendered ColorPicker will be.

size provides the following available options:

  • small—Renders a small ColorPicker that is suitable to use in compact designs.
  • medium (default)—Renders a medium ColorPicker.
  • large—Renders a large ColorPicker that is suitable to use in adaptive designs.
  • none—Does not set a size and allows you to add your own, custom value.
Three Telerik and Kendo UI ColorPicker components demonstrating the small, default medium, and large sizes respectively.
  1. Small
  2. Medium
  3. Large

Fill Mode

The ColorPicker provides the fillMode configuration option that enables you to control the way in which color is applied to the rendered component. The ColorPicker also provides options for fill-mode customization. By default, the ColorPicker is rendered in solid fill mode.

fillMode provides the following available options:

  • solid (default)—On a page, a solid ColorPicker puts the strongest emphasis on the color selection action and draws the attention of users.
  • outline—The outline ColorPicker has a medium emphasis and reduces the visual noise when the page displays many elements of equal importance.
  • flat—The flat ColorPicker places the lowest emphasis on the color selection action and has neither a background nor a border. The main purpose of the flat ColorPicker is to avoid distracting users from the main content.
  • none—Does not set a fillMode and allows you to add your own, custom value.
Three Telerik and Kendo UI ColorPicker components demonstrating the default solid, outline, and flat fill modes respectively
  1. Solid
  2. Outline
  3. Flat

Border Radius

The ColorPicker provides the rounded option that enables you to control the border-radius of the rendered component. The defined value for the border-radius affects the look and feel of the UI. The ColorPicker also provides options for border-radius customization.

rounded provides the following available options:

  • small—Renders a border radius of 2 px.
  • medium (default)—Renders a border radius of 4 px.
  • large—Renders a border radius of 6 px.
  • full—Renders a border radius of 9999 px.
  • none—Does not set a rounded value and allows you to customize the configuration.
Five Telerik and Kendo UI ColorPicker components demonstrating the small, default medium, large, full, and none fill modes respectively.
  1. Small
  2. Medium
  3. Large
  4. Full

Framework-Specific Documentation

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

Feedback