# Kendo UI for Angular FlatColorPicker Overview

The Kendo UI for Angular FlatColorPicker enables the user to select and submit color values.

The FlatColorPicker component provides a rich interface to choose a color from Palette and Gradient views. It enables the user to preview the selected color before submit and to ensure that a certain contrast requirements are met.

<CtaPanelOverview></CtaPanelOverview>

The following example demonstrates the FlatColorPicker in action.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/inputs/flatcolorpicker/overview/source.txt)

## Key Features

* [Views](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/flatcolorpicker/views)—The FlatColorPicker provides options for displaying gradient and palette views, as well as switching between them in a seamless way.
* [Color Preview](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/flatcolorpicker/preview)—You can enable the user to preview and compare the selected color with the FlatColorPicker value, before applying it. Additionally, the current selection can be reverted to its initial state.
* [Color Contrast Tool](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/flatcolorpicker/contrast-tool)—The FlatColorPicker provides an option for displaying a contrast tool. It ensures the user that the selected color meets certain contrast requirements like AA or AAA.
* [Customizing the FlatColorPicker](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/flatcolorpicker/customization)—You can customize almost any building block of the FlatColorPicker like the views toggle buttons, clear button, action buttons layout, alpha slider etc.
* [Disabled FlatColorPicker](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/flatcolorpicker/disabled-state)—You can use the configuration options of the FlatColorPicker to disable the component so that users are not able to interact with it.
* [Read-only FlatColorPicker](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/flatcolorpicker/readonly-state)—The FlatColorPicker provides an option for overriding its default active state.
* [Debouncing value changes](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/debounce-valuechange)—All Kendo UI for Angular Inputs enable you to implement a slight delay before they accept a new input value.
* [Forms support](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/flatcolorpicker/forms)—You can use the FlatColorPicker both in template-driven and reactive Angular forms.
* [Appearance](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/styling)—All Kendo UI for Angular Inputs enable you to set their dimensions.
* [Globalization](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/globalization)—All Kendo UI for Angular Inputs provide globalization options.
* [Accessibility](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/flatcolorpicker/accessibility)—The FlatColorPicker is accessible for screen readers and supports WAI-ARIA attributes.
* [Keyboard navigation](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/flatcolorpicker/keyboard-navigation)—The FlatColorPicker supports a number of keyboard shortcuts for processing various commands.

## Support and Learning Resources

* [FlatColorPicker Homepage](https://www.telerik.com/kendo-angular-ui/flatcolorpicker)
* [Getting Started with the Kendo UI for Angular Inputs](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/installation/getting-started)
* [API Reference of the FlatColorPicker](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api/flatcolorpickercomponent)
* [Getting Started with Kendo UI for Angular (Online Guide)](https://www.telerik.com/kendo-angular-ui-develop/components/getting-started)
* [Getting Started with Kendo UI for Angular (Video Tutorial)](https://www.telerik.com/campaigns/kendo-ui/using-kendo-ui-with-angular-video-tutorial)
* [Video Courses](https://www.telerik.com/kendo-angular-ui-develop/components/getting-started/video-onboarding)
* [FlatColorPicker Forum](https://www.telerik.com/forums/kendo-angular-ui?tagId=2018)
* [Before You Start: All Things Angular (Telerik Blog Post)](https://www.telerik.com/blogs/all-things-angular)
* [Knowledge Base](https://www.telerik.com/kendo-angular-ui-develop/components/knowledge-base)

## Additional Resources

* [Angular Blogs](https://www.telerik.com/blogs/tag/kendo-ui-for-angular)
* [Angular Videos](https://www.telerik.com/videos/kendo-angular-ui)
* [Kendo UI for Angular Roadmap](https://www.telerik.com/support/whats-new/kendo-angular-ui/roadmap)