Kendo UI for Angular ColorPicker Overview
The Kendo UI for Angular ColorPicker enables the user to select and submit color values.
The ColorPicker component provides a rich interface to choose a color from Palette and Gradient views rendered in its popup. It enables the user to preview the selected color before submit and to ensure that certain contrast requirements are met.
The following example demonstrates the ColorPicker in action.
Example
View Source
Edit In Stackblitz
Change Theme:
Key Features
- Views—The ColorPicker 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 ColorPicker value, before applying it. Additionally, the current selection can be reverted to its initial state.
- Contrast Tool—The ColorPicker 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.
- Customizing the ColorPicker—You can customize almost any building block of the ColorPicker like the views toggle buttons, clear button, action buttons layout, alpha slider etc.
- Disabled ColorPicker—You can use the configuration options of the ColorPicker to disable the component so that users are not able to interact with it.
- Read-only ColorPicker—The ColorPicker provides an option for overriding its default active state.
- Controlling the open state—The ColorPicker enables you to configure the open state of its popup.
- Forms support—You can use the ColorPicker both in template-driven and reactive Angular forms.
- Debouncing value changes—All Kendo UI for Angular Inputs enable you to implement a slight delay before they accept a new input value.
- 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 ColorPicker is accessible for screen readers and supports WAI-ARIA attributes.
- Keyboard navigation—The ColorPicker supports a number of keyboard shortcuts for processing various commands.
