---
title: Usage
position: 2
seo_title: Guidelines for Using the ColorPicker Component
seo_description: Get the knack of the Telerik and Kendo UI ColorPicker and learn
  how to use and implement the component by following the instructions and
  recommendations in the user guidelines created by our designers.
---
## Usage Guidelines

The Telerik and Kendo UI ColorPicker requires you to follow some basic principles when using the component.

### Purpose

Effective use of color selection tools in your user interface can have a significant impact on the user experience. It's important to strike a balance between versatility and simplicity when choosing between the ColorPicker and ColorPalette components.

<DosDonts>
<Do description="Use ColorPickers where a wide spectrum of color options is required, offering users the ability to precisely select and customize their desired colors.">![A Telerik and Kendo UI ColorPicker offering a wide spectrum of colors](images/components-colorpicker-usage-purpose-do.png "Use a Telerik and Kendo UI ColorPicker when you need to allow the user to select from a wide spectrum of colors.")</Do>
<Dont description="Avoid using ColorPicker in scenarios where users are restricted to a predefined color palette or don't need its advanced features. In such cases, use either a ColorPalette or a simplified ColorPicker only with a palette view to provide a more streamlined color selection experience.">![An incorrectly used Telerik and Kendo UI ColorPicker offering a limited selection](images/components-colorpicker-usage-purpose-dont.png "Don't use a ColorPicker when the possible selection is restricted.")</Dont>
</DosDonts>


### Compactness

In the field of user interface design, choosing the right color selection tool is crucial for an efficient and user-friendly design. When it comes to compact and space-constrained layouts, ColorPickers are a good choice to allow precise color matching. However, in scenarios where space is more generous, such as sidebars or extended layouts, it's advisable to use the FlatColorPicker component instead.

<DosDonts>
<Do description="Use the ColorPicker component in user interfaces, such as toolbars, where the compact design and space efficiency are priorities.">![A Telerik and Kendo UI ColorPicker used in a toolbar](images/components-colorpicker-usage-compactness-do.png "Use the Telerik and Kendo UI ColorPicker when space efficiency is a priority.")</Do>
<Dont description="Avoid using ColorPickers in user interfaces, such as sidebars or spacious layouts, where ample space is available, and the focus is on delivering intuitive and user-friendly interactions. Use FlatColorPicker component instead.">![A Telerik and Kendo UI ColorPicker that should be replaced with a FlatColorPicker](images/components-colorpicker-usage-compactness-dont.png "Don't use the Telerik and Kendo UI ColorPicker when there is enough space for a FlatColorPicker.")</Dont>
</DosDonts>