Kendo UI for Angular ColorPicker Overview

The Kendo UI for Angular ColorPicker enables the user to select and submit color values.

The ColorPicker is designed to replace the <input type="color"> HTML5 tag which is not widely supported in browsers.

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.

View Source
Edit In Stackblitz  
Change Theme:

Key Features

  • ViewsThe ColorPicker provides options for configuring the way its popup is rendered and displays a gradient, palette, or a combined popup view.
  • 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.
  • Customizing the ColorPickerYou can enable the user to choose whether to render an alpha slider and an alpha input in the ColorPicker.
  • 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.
  • 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?