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.

Telerik UI for Blazor Ninja image

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

Creating Blazor ColorPalette

  1. Add the <TelerikColorPalette> tag to a Razor file.
  2. 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 Dialog 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; }
}

Next Steps

See Also

In this article