• 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 / ColorPaletteComponent / 
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

columns

number

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

disabled

boolean

Sets the disabled state of the ColorPalette. 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 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

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.

readonly

boolean

false

Sets the read-only state of the ColorPalette.

tabindex

number

Specifies the tabindex of the component.

tileSize

number | TileSize

Specifies the size of a color cell.

The possible values are:

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

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?

Contact Support