---
title: Overview
position: 1
seo_title: Overview of the FlatColorPicker Component
seo_description: Learn about the basic features of the Telerik and Kendo UI
  FlatColorPicker component, check out the available options in its live
  demo, and explore its anatomy.
---
## FlatColorPicker Overview

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

### Live Demo

<LiveDemo data='{"links":[{"text":"Angular","url":"https://www.telerik.com/kendo-angular-ui/components/inputs/flatcolorpicker"},{"text":"Blazor","url":"https://demos.telerik.com/blazor-ui/flatcolorpicker/overview"},{"text":"React","url":"https://www.telerik.com/kendo-react-ui/components/inputs/flatcolorpicker"},{"text":"Vue","url":"https://www.telerik.com/kendo-vue-ui/components/inputs/flatcolorpicker"},{"text":"ASP.NET Core","url":"https://demos.telerik.com/aspnet-core/flatcolorpicker"},{"text":"ASP.NET MVC","url":"https://demos.telerik.com/aspnet-mvc/flatcolorpicker"}],"demo":"components/flatcolorpicker/overview"}'></LiveDemo>

### Anatomy

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

<BlueprintImage data='{"description":"","labels":[{"text":"ColorGradient icon button"},{"text":"ColorPalette icon button"},{"text":"Reset color icon button"},{"text":"Selected and previous color preview"},{"text":"FlatColorPicker header"},{"text":"ColorGradient"},{"text":"ColorPalette"},{"text":"ColorPicker footer"}]}'>![](images/components-flatcolorpicker-overview-anatomy.png "")</BlueprintImage>

### Framework-Specific Documentation

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

<Wrap>
<ExternalResource data='{"title":"Kendo UI for Angular FlatColorPicker","description":"Find more information about the Kendo UI for Angular FlatColorPicker in the official product documentation of the component.","url":"https://www.telerik.com/kendo-angular-ui/components/inputs/flatcolorpicker/"}'>![Kendo UI for Angular logo.](/images/angular-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for Blazor FlatColorPicker","description":"Find more information about the Telerik UI for Blazor FlatColorPicker in the official product documentation of the component.","url":"https://docs.telerik.com/blazor-ui/components/flatcolorpicker/overview"}'>![Telerik UI for Blazor logo.](/images/blazor-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for jQuery FlatColorPicker","description":"Find more information about the Kendo UI for jQuery FlatColorPicker in the official product documentation of the component.","url":"https://docs.telerik.com/kendo-ui/controls/flatcolorpicker/overview"}'>![Kendo UI for jQuery logo](/images/jquery-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"KendoReact FlatColorPicker","description":"Find more information about the KendoReact FlatColorPicker in the official product documentation of the component.","url":"https://www.telerik.com/kendo-react-ui/components/inputs/flatcolorpicker/"}'>![Kendo UI for React logo](/images/react-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for Vue FlatColorPicker","description":"Find more information about the Kendo UI for Vue FlatColorPicker in the official product documentation of the component.","url":"https://www.telerik.com/kendo-vue-ui/components/inputs/flatcolorpicker/"}'>![Kendo UI for Vue logo](/images/vue-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET Core FlatColorPicker","description":"Find more information about the Telerik UI for ASP.NET Core FlatColorPicker component.","url":"https://docs.telerik.com/aspnet-core/html-helpers/editors/flatcolorpicker/overview"}'>![Telerik UI for ASP.NET Core logo](/images/core-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET MVC FlatColorPicker","description":"Find more information about the Telerik UI for ASP.NET MVC FlatColorPicker component.","url":"https://docs.telerik.com/aspnet-mvc/html-helpers/editors/flatcolorpicker/overview"}'>![Telerik UI for ASP.NET MVC logo](/images/mvc-logo.svg)</ExternalResource>

</Wrap>