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

ColorPaletteComponent

The ColorPalette component provides a set of predefined palette presets and enables you to implement a custom color palette. The ColorPalette is independently used by kendo-colorpicker and can be directly added to the page.

Selector

kendo-colorpalette

Export Name

Accessible in templates as #kendoColorPaletteInstance="kendoColorPalette"

Inputs

NameTypeDefaultDescription

disabled

boolean

Sets the disabled state of the ColorPalette.

format

OutputFormat

Specifies the output format of the ColorPaletteComponent. The input value may be in a different format. However, it will be parsed into the output format after the component processes it.

The supported values are:

  • (Default) hex
  • rgba
  • name

readonly

boolean

Sets the read-only state of the ColorPalette.

tileSize

number | TileSize

Specifies the size of a color cell.

The possible values are:

  • (Default) tileSize = 24
  • { width: number, height: number }

columns

number

Specifies the number of columns that will be displayed. Defaults to 10.

palette

string | string[]

The color palette that will be displayed.

The supported values are:

  • The name of the predefined palette preset (for example, office, basic, and apex).
  • A string with comma-separated colors.
  • A string array.

tabindex

number

Specifies the tabindex of the component.

value

string

Specifies the value of the initially selected color.

Events

NameTypeDescription

selectionChange

EventEmitter<string>

Fires each time the color selection is changed.

valueChange

EventEmitter<string>

Fires each time the value is changed.

Methods

reset

Clears the color value of the ColorPalette.

In this article

Not finding the help you need?