Getting Started
Components
- Barcodes
- Buttons
- Chartsupdated
- Conversational UIupdated
- Data Query
- Date Inputsupdated
- Date Math
- Dialogs
- Drawing
- Dropdownsupdated
- Editor
- Excel Export
- File Saver
- Filter
- Gantt
- Gauges
- Gridupdated
- Icons
- Indicators
- Inputsupdated
- - Overview
  - Getting Started
  - CheckBox
  - ColorGradient
  - ColorPalette
  - ColorPicker
  - FlatColorPicker
  - FormField
  - MaskedTextBoxupdated
  - NumericTextBoxupdated
  - RadioButton
  - RangeSlider
  - Ratingnew
  - Signature
  - Slider
  - Switch
  - TextArea
  - TextBox
  - Setting the Width
  - Debouncing Value Changes
  - Globalization
  - API
- Labels
- Layout
- ListBox
- ListView
- Map
- Menus
- Navigation
- Notification
- Pager
- PDF Export
- PDFViewer
- PivotGridupdated
- Popup
- ProgressBars
- Ripple
- Schedulerupdated
- ScrollView
- Sortable
- Spreadsheetupdated
- ToolBar
- Tooltips
- TreeList
- TreeView
- Typography
- Uploads
- Utilities
Styling & Themes
Common Features
Project Setup
Knowledge Base
Sample Applications
FAQ
Troubleshooting
Updates
Changelogs

Components / Inputs / API / ColorPickerComponent /

New to Kendo UI for Angular? Start a free 30-day trial

ColorPickerComponent

Represents the Kendo UI ColorPicker component for Angular.

The ColorPicker is a powerful tool for choosing colors from Gradient and Palette views which are rendered in its popup. It supports previewing the selected color, reverting it to its previous state or clearing it completely.

Selector

kendo-colorpicker

Export Name

Accessible in templates as #kendoColorPickerInstance="kendoColorPicker"

Inputs

Name	Type	Default	Description
actionsLayout	`ColorPickerActionsLayout`		Configures the layout of the `Apply` and `Cancel` action buttons. The possible values are: `start` `center` `end` (default) `stretch`
activeView	`ColorPickerView`		Sets the initially active view in the popup. The property supports two-way binding. The supported values are: `gradient` `palette`
clearButton	`boolean`	`true`	Specifies whether the ColorPicker should display a 'Clear color' button.
disabled	`boolean`	`false`	Sets the disabled state of the ColorPicker. To learn how to disable the component in reactive forms, refer to the article on Forms Support.
fillMode	`InputFillMode`		The fillMode property specifies the background and border styles of the ColorPicker (see example). The possible values are: `flat` `solid` (default) `outline` `none`
format	`OutputFormat`		Specifies the output format of the ColorPicker. If the input value is in a different format, it will be parsed into the specified output `format`. The supported values are: `rgba` (default) `hex`
gradientSettings	`GradientSettings`		Configures the gradient that is displayed in the ColorPicker popup.
icon	`string`		Defines the name of an existing icon in the Kendo UI theme. Provide only the name of the icon without the `k-icon` or the `k-i-` prefixes. For example, `pencil-tools` will be parsed to `k-icon k-i-pencil-tools`.
iconClass	`string \| string[] \| {[key: string]: boolean}`		A CSS class name which displays an icon in the ColorPicker button. `iconClass` is compatible with the `ngClass` syntax. Takes precedence over `icon` if both are defined.
paletteSettings	`PaletteSettings`		Configures the palette that is displayed in the ColorPicker popup.
popupSettings	`PopupSettings`		Configures the popup of the ColorPicker.
preview	`boolean`	`false`	Displays `Apply` and `Cancel` action buttons and color preview panes. When enabled, the component value will not change immediately upon color selection, but only after the `Apply` button is clicked. The `Cancel` button reverts the current selection to its previous state i.e. to the current value.
readonly	`boolean`	`false`	Sets the read-only state of the ColorPicker.
rounded	`InputRounded`		The rounded property specifies the border radius of the ColorPicker (see example). The possible values are: `small` `medium` (default) `large` `full` `none`
size	`InputSize`		The size property specifies the padding of the ColorPicker internal elements (see example). The possible values are: `small` `medium` (default) `large` `none`
svgIcon	`SVGIcon`		Defines an SVGIcon to be rendered within the button. The input can take either an existing Kendo SVG icon or a custom one.
tabindex	`number`	`0`	Specifies the tabindex of the component.
value	`string`		Specifies the value of the initially selected color.
views	`ColorPickerView[]`		Specifies the views that will be rendered in the popup. By default both the gradient and palette views will be rendered.

Fields

Name	Type	Description
container	`ViewContainerRef`	Provides a reference to a container element inside the component markup. The container element references the location of the appended popup— for example, inside the component markup.
isFocused	`boolean`	Indicates whether the ColorPicker wrapper is focused.
isOpen	`boolean`	Indicates whether the ColorPicker popup is open.

Events

Name	Type	Description
activeColorClick	`EventEmitter<ActiveColorClickEvent>`	Fires each time the left side of the ColorPicker wrapper is clicked. The event is triggered regardless of whether a ColorPicker icon is set or not. The ActiveColorClickEvent event provides the option to prevent the popup opening.
activeViewChange	`EventEmitter<string>`	Fires each time the view is about to change. Used to provide a two-way binding for the `activeView` property.
cancel	`EventEmitter<ColorPickerCancelEvent>`	Fires when the user cancels the current color selection. Fires on preview pane or 'Cancel' button click.
close	`EventEmitter<ColorPickerCloseEvent>`	Fires each time the popup is about to close. This event is preventable. If you cancel it, the popup will remain open.
blur	`EventEmitter<any>`	Fires each time the ColorPicker is blurred.
focus	`EventEmitter<any>`	Fires each time ColorPicker is focused.
open	`EventEmitter<ColorPickerOpenEvent>`	Fires each time the popup is about to open. This event is preventable. If you cancel it, the popup will remain closed.
valueChange	`EventEmitter<any>`	Fires each time the value is changed.

Methods

blur
Blurs the ColorPicker.

focus
Focuses the wrapper of the ColorPicker.

reset
Clears the value of the ColorPicker.

toggle

Toggles the popup of the ColorPicker. Does not trigger the open and close events of the component.

Parameters
open?	`boolean`	An optional parameter. Specifies whether the popup will be opened or closed.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Resources

Productivity and Design Tools

ColorPickerComponent

In this article

Not finding the help you need?

Is this article helpful?

Thank you for your feedback!