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.
If unlimited choice of colors is preferred, consider the ColorGradient component instead.
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.
Creating Blazor ColorPalette
- Add the
<TelerikColorPalette>tag to a Razor file. - Set the
Valueparameter to astringobject. 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; }
}