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.

The FlatColorPicker Component is part of Kendo UI for Angular, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

The following example demonstrates the FlatColorPicker in action.

View Source
Change Theme:

Key Features

  • Views—The FlatColorPicker provides options for displaying gradient and palette views, as well as switching between them in a seamless way.
  • Color 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—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—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—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—The FlatColorPicker provides an option for overriding its default active state.
  • Debouncing value changes—All Kendo UI for Angular Inputs enable you to implement a slight delay before they accept a new input value.
  • Forms support—You can use the FlatColorPicker both in template-driven and reactive Angular forms.
  • Appearance—All Kendo UI for Angular Inputs enable you to set their dimensions.
  • Globalization—All Kendo UI for Angular Inputs provide globalization options.
  • Accessibility—The FlatColorPicker is accessible for screen readers and supports WAI-ARIA attributes.
  • Keyboard navigation—The FlatColorPicker supports a number of keyboard shortcuts for processing various commands.

Support and Learning Resources

Additional Resources