# ColorPicker Views

The ColorPicker enables you to configure its popup view through the [`views`](https://www.telerik.com/kendo-react-ui/components/inputs/api/colorpickerprops#views) property. You can display a gradient view, palette view, or both. By default, both views will be rendered, and the user can toggle between them by using the view toggle buttons rendered in the header of the popup.

The following example demonstrates both ColorPicker views in action.

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

## Active View

When both the `gradient` and `palette` views are present, the initially active view of the FlatColorPicker can be set through the [`activeView`](https://www.telerik.com/kendo-react-ui/components/inputs/api/colorpickerprops#activeview) property. By default, the `gradient` view is rendered as active.

The following example shows how to specify the initially active view.

[Demo Source](https://demos.telerik.com/kendo-react-ui/inputs/colorpicker/active-view/source.txt)

## Suggested Links

* [API Reference of the ColorPicker](https://www.telerik.com/kendo-react-ui/components/inputs/api/colorpickerprops)
* [Appearance of the ColorPicker](https://www.telerik.com/kendo-react-ui/components/inputs/colorpicker/appearance)