# Vue FlatColorPicker Overview

The FlatColorPicker component provides a flat view for the ColorGradient and the ColorPalette components and adds a header and footer. The header contains the current color, the previously selected color, and a button that clears the selected value. The footer contains two buttons that you can configure to apply or cancel the selection.

The following example demonstrates the FlatColorPicker in action.

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

## Key Features

* [Disabled FlatColorPicker](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/flatcolorpicker/disabled)—You can render a disabled FlatColorPicker by setting a single property and keep it disabled until certain requirements are met.
* [FlatColorPicker customization](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/flatcolorpicker/customization)—You can customize the rendering of the FlatColorPicker header and footer.

## Support and Learning Resources

* [FlatColorPicker Homepage](https://www.telerik.com/kendo-vue-ui/flatcolorpicker)
* [Getting Started with the Kendo UI Vue Inputs](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/get-started)
* [API Reference of the FlatColorPicker Component](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/flatcolorpickerprops)
* [Getting Started with Kendo UI for Vue - JavaScript (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/javascript-composition-api)
* [Getting Started with Kendo UI for Vue - TypeScript (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/typescript-composition-api)
* [Getting Started with Kendo UI for Vue - JavaScript + Options API (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/javascript-options-api)
* [Getting Started with Kendo UI for Vue - TypeScript + Options API (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/typescript-options-api)
* [Getting Started with Kendo UI for Vue - Nuxt 3 (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/get-started-nuxt-3)
* [Virtual Classroom (Training Course for Registered Users)](https://learn.telerik.com/learn/course/internal/view/elearning/45/kendo-ui-for-vue-with-typescript)
* [FlatColorPicker Forum](https://www.telerik.com/forums/kendo-ui-vue?searchText=flatcolorpicker)
* [Knowledge Base](https://www.telerik.com/kendo-vue-ui/components/knowledge-base/)
* [Kendo UI Productivity Tools extension for VS Code](https://www.telerik.com/kendo-vue-ui-develop/components/vscode-extension)

## Additional Resources

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