Blazor Color Palette Overview

The Blazor Color Palette component provides a list of color tiles for the user to pick a color by clicking or tapping. You can choose a predefined list of colors, or create your own. Two-way binding and events let you react to the user choice.

The ColorPalette component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.Start Free Trial

If unlimited choice of colors is preferred, consider the ColorGradient component instead.

Creating Blazor ColorPalette

Add the <TelerikColorPalette> tag to a Razor file.
Set the Value parameter to a string object. It supports one-way and two-way binding.

Basic color palette with two-way value binding and a default predefined palette.

<TelerikColorPalette @bind-Value="@MyColor" />

<p>Selected color: <span style="color: @MyColor">@MyColor</span></p>

@code {
    string MyColor { get; set; }
}

Predefined Colors

The ColorPalette component comes with multiple sets of predefined colors that are shown to the users. Read more about the available predefined ColorPallete colors.

Custom Colors

The ColorPallete can work with your own set of colors. Read more about the Blazor ColorPallete custom colors setup.

Events

The Blazor ColorPalette fires value change and blur events that you can handle and further customize its behavior. Read more about the Blazor ColorPalette events.

ColorPalette Parameters

The Blazor ColorPalette provides various parameters to configure the component. Also check the ColorPalette public API.

Parameter	Type and Default Value	Description
`Class`	`string`	Renders a custom CSS class to the `<div class="k-colorpalette">` element.
`Colors`	`IEnumerable<string>` (`Office`)	The collection of colors for the user to choose from. Can be one of the built-in preset palettes, or a custom list of colors.
`Columns`	`int` (`10`)	The number of columns to use when rendering the Colors list. Determines the size of the component together with the `TileHeight` and `TileWidth`.
`Enabled`	`bool` (`true`)	Whether the component is enabled.
`Id`	`string`	Renders as an `id` attribute of the `<div class="k-colorpalette">` element.
`TabIndex`	`Nullable<int>`	Maps to the `tabindex` attribute of the `<div class="k-colorpalette">` element. Use it to customize the tabbing focus order on the page.
`TileHeight`	`string`	The height of each individual color item. Determines the size of the component together with the `Columns` and `TileWidth`. Accepts CSS dimension strings.
`TileWidth`	`string`	The width of each individual color item. Determines the size of the component together with the `Columns` and `TileHeight`. Accepts CSS dimension strings.
`Value`	`string`	Sets the value of the input, can be used for binding. Accepts any valid CSS `background-color` string. The preset palettes use HEX format (`#123abc`).

See the Input Validation article.

Example

The Blazor ColorPallete provides appearance settings. Control the size of the component through the Columns, TileWidth and TileHeight parameters.

Make a large color palette with few columns

@SelectedColor
<TelerikColorPalette Colors="@ColorPalettePresets.Basic" @bind-Value="@SelectedColor"
                     Columns="5" TileHeight="3em" TileWidth="3em">
</TelerikColorPalette>
@code{
    string SelectedColor { get; set; }
}