• 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
    • 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 / FlatColorPickerComponent / 
New to Kendo UI for Angular? Start a free 30-day trial

FlatColorPickerComponent

Represents the Kendo UI FlatColorPicker component for Angular.

The FlatColorPicker is a powerful tool which allows the user to choose colors through palettes with predefined sets of colors and through a gradient that renders an hsv canvas. It supports previewing the selected color, reverting it to its previous state or clearing it completely.

Selector

kendo-flatcolorpicker

Export Name

Accessible in templates as #kendoFlatColorPickerInstance="kendoFlatColorPicker"

Inputs

NameTypeDefaultDescription

actionsLayout

ColorPickerActionsLayout

Configures the layout of the Apply and Cancel action buttons.

  • start
  • center
  • end (default)
  • stretch

activeView

ColorPickerView

Sets the initially active view in the FlatColorPicker. The property supports two-way binding.

  • gradient (default)
  • palette

clearButton

boolean

true

Specifies whether the FlatColorPicker should display a 'Clear color' button.

disabled

boolean

false

Sets the disabled state of the FlatColorPicker. To learn how to disable the component in reactive forms, refer to the article on Forms Support.

format

OutputFormat

Specifies the output format of the FlatColorPicker.

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 view.

paletteSettings

PaletteSettings

Configures the palette view.

preview

boolean

true

Displays Apply and Cancel action buttons and a color preview pane.

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 initial state i.e. to the current value.

readonly

boolean

false

Sets the read-only state of the FlatColorPicker.

tabindex

number

0

Specifies the tabindex of the component.

value

string

Specifies the initially selected color.

views

ColorPickerView[]

Specifies the views that will be rendered. Default value is gradient and palette.

Events

NameTypeDescription

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.

The event is emitted on preview pane or on 'Cancel' button click.

valueChange

EventEmitter<any>

Fires each time the component value is changed.

Methods

blur

Blurs the wrapper of the FlatColorPicker.

focus

Focuses the wrapper of the FlatColorPicker.

reset

Clears the value of the FlatColorPicker.

In this article

Not finding the help you need?

Contact Support