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 ColorPicker Component is part of Kendo UI for Angular, a professional grade UI library with 100+ 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 ColorPicker in action.

Example
View Source
Change Theme:

Key Features

  • ViewsThe ColorPicker provides options for displaying gradient and palette views, as well as switching between them in a seamless way.
  • Color PreviewYou 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 ToolThe 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 ColorPickerYou can customize almost any building block of the ColorPicker like the views toggle buttons, clear button, action buttons layout, alpha slider etc.
  • Disabled ColorPickerYou can use the configuration options of the ColorPicker to disable the component so that users are not able to interact with it.
  • Read-only ColorPickerThe ColorPicker provides an option for overriding its default active state.
  • Controlling the open stateThe ColorPicker enables you to configure the open state of its popup.
  • Forms supportYou can use the ColorPicker both in template-driven and reactive Angular forms.
  • Debouncing value changesAll Kendo UI for Angular Inputs enable you to implement a slight delay before they accept a new input value.
  • AppearanceAll Kendo UI for Angular Inputs enable you to set their dimensions.
  • GlobalizationAll Kendo UI for Angular Inputs provide globalization options.
  • AccessibilityThe ColorPicker is accessible for screen readers and supports WAI-ARIA attributes.
  • Keyboard navigationThe ColorPicker supports a number of keyboard shortcuts for processing various commands.

In this article

Not finding the help you need?