# FlatColorPicker Customization

The FlatColorPicker allows you to customize the following building blocks:

* [Views Toggle Buttons](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/flatcolorpicker/customization#views-toggle-buttons)
* [Clear Button](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/flatcolorpicker/customization#clear-button)
* [Action Buttons Layout](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/flatcolorpicker/customization#action-buttons-layout)
* [Palette View](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/flatcolorpicker/customization#palette-view)
* [Gradient View](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/flatcolorpicker/customization#gradient-view)

## Views Toggle Buttons

When both the Gradient and Palette view are present, the user can toggle between them through the view buttons rendered in the header of the FlatColorPicker. The order of the buttons will be determined by the order specified in the [`views`](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api/flatcolorpickercomponent#views) array.

> If only a single view is specified, the view toggle buttons will not be rendered.

The following example demonstrates the toggle buttons in action.

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

## Clear Button

The FlatColorPicker provides an option to display a clear button through the [`clearButton`](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api/flatcolorpickercomponent#clearbutton) property. It allows the user to clear the current FlatColorPicker value.

The following example demonstrates the clear button.

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

## Action Buttons Layout

When the [`preview`](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api/flatcolorpickercomponent#preview) option of the FlatColorPicker is enabled, it will display the `Apply` and `Cancel` action buttons in its footer. The layout of the buttons can be customized through the [`actionsLayout`](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api/flatcolorpickercomponent#actionsLayout) property.

The following example demonstrates how to customize the layout of the action buttons.

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

## Palette View

To change the appearance when the FlatColorPicker displays a Palette view, utilize its [`paletteSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api/palettesettings) option.

The [`paletteSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api/palettesettings) interface exposes the following options:

* `columns`—Specifies the number of columns in the palette table. By default, the table has 10 columns.
* `palette`—Determines the set of colors that will be visualized in the palette itself. The possible values are an array or a comma-separated string with colors, or the name of one of the [predefined palette color presets](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/colorpalette/presets).
* `tileSize`—Determines the size of each colored tile (rectangle) in the palette table. The following values are allowed:

  * `number`—Will be applied to both the width and the height of the tile.
  * [`TileSize`](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api/tilesize) configuration object—Allows you to specify the width and height values individually.

The following example demonstrates the palette settings in action.

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

## Gradient View

To change the appearance when the FlatColorPicker displays the Gradient view, utilize its [`gradientSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api/gradientsettings) option.

The [`gradientSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api/gradientsettings) interface exposes the following options:

* `contrastTool`—Provides an option for displaying a contrast tool. It ensures the user that the selected color meets certain contrast requirements e.g. AA or AAA.
* `opacity`—Determines whether the popup will display an opacity (alpha) slider. Currently, when the opacity slider is enabled, you can use only an `rgba` output format.
* `delay`—Determines the delay time (in milliseconds) before the value is changed on handle drag.

The following example demonstrates the gradient settings in action.

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

## Suggested Links

* [API Reference of the FlatColorPicker](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api/flatcolorpickercomponent)