Components
    • Barcodes
    • Buttons
    • Charts
    • Conversational UIupdated
    • Data Query
    • Date Inputs
    • Date Math
    • Dialogsupdated
    • Drawing
    • Dropdowns
    • Editorupdated
    • Excel Export
    • File Saver
    • Filterupdated
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputs
    • Labels
    • Layoutupdated
    • ListBoxnew
    • ListView
    • Mapbeta
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PivotGridbeta
    • Popup
    • ProgressBarsupdated
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • ToolBar
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Typography
    • Uploads
    Styling & Themes
    Common Features
    Project Setup
    Troubleshooting
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

NameTypeDefaultDescription

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.

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

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.

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.

views

ColorPickerView[]

Specifies the views that will be rendered in the popup. By default both the gradient and palette views will be rendered.

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

gradientSettings

GradientSettings

Configures the gradient that is displayed in the ColorPicker popup.

paletteSettings

PaletteSettings

Configures the palette that is displayed in the ColorPicker popup.

popupSettings

PopupSettings

Configures the popup 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

tabindex

number

0

Specifies the tabindex of the component.

value

string

Specifies the value of the initially selected color.

Fields

NameTypeDefaultDescription

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

NameTypeDescription

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.