---
title: Overview
position: 1
seo_title: Overview of the ColorPicker Component
seo_description: Learn about the basic features of the Telerik and Kendo UI ColorPicker component and its types, check out the extensive set of available options in its live demo, and master its appearance by setting the size, fill mode, and border-radius as you wish on the fly.
---
## 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
### 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:
#### 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.
#### 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.
#### 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.
#### 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.
### Framework-Specific Documentation
For specific information about the component, refer to its official product documentation:
