Blazor ColorPicker Overview

The Telerik UI ColorPicker for Blazor is an interactive component that allows users to select colors from a popup palette or a Hue, Saturation, Value (HSV) canvas, and also manually type a specific RGB or HEX color value.

Practically, the ColorPicker is identical to the Telerik UI for Blazor FlatColorPicker component with the only difference that the ColorPicker takes up less space and displays the color selection UI in a popup.

Telerik UI for Blazor Ninja image

The ColorPicker 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 ColorPicker

  1. Add the TelerikColorPicker tag.
  2. Set its string Value parameter to any of the supported HEX or RGB formats. The parameter supports two-way binding or one-way binding with a ValueChanged handler.
  3. (optional) If your app expects a specific color format, set the ValueFormat to ColorFormat.Hex or ColorFormat.Rgb.

A basic ColorPicker with two-way value binding

<TelerikColorPicker @bind-Value="@MyColor" ValueFormat="ColorFormat.Hex"/>

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

@code {
    string MyColor { get; set; }


The Blazor ColorPicker component comes with the Palette and Gradient views which allow users to select a color from an interface that matches their preferences.


The image below shows the supported Blazor ColorPicker interface elements, including:

  • (Outside the popup) Main component button with the current value and a drop-down arrow.
  • (Top left) View selectors.
  • (Top right) Color preview box.
  • (Below the color preview) Current color box.
  • (Top) Clear button.
  • (Middle) Palette tiles or HSV canvas with hue and opacity sliders.
  • (Bottom) RGBA or HEX value textboxes with a Toggle button.
  • (Bottom) Apply and Cancel buttons.

Clicking outside the ColorPicker popup applies an Apply button behavior.

ColorPicker component


The Blazor ColorPicker fires a set of events that you can handle to further customize its behavior. Read more about the Telerik UI for Blazor ColorPicker events.

Supported Value Formats

The Blazor ColorPicker accepts values by the application code in the following formats:

  • Hexadecimal
    • 3 digits - #f00
    • 6 digits - #ff0000
    • 8 digits, including alpha opacity - #ff000080
  • RGB or RGBA
    • integer color values - rgb(255, 0, 0)
    • percentage color values - rgb(100%, 0%, 0%)
    • the alpha opacity must always be a decimal number between 0 and 1 - rgba(100%, 0%, 0%, 0.5). Note the rgba() notation, compared to rgb() above.

Users can type values in the following formats:

  • All hexadecimal
  • RGB and RGBA with integer color values

The ColorPicker does not support color keywords.

ColorPicker Parameters

The Blazor ColorPicker provides various parameters to configure the component. For more configuration options, see the public Telerik UI for Blazor ColorPicker API.

The ColorPicker tag exposes the following features through its attributes:

Parameter Type and Default Value Description
Value string The ColorPicker value in a few different color formats. Supports two-way binding.
ValueFormat ColorFormat enum
Sets the color format, which the component will return in the application code - Rgb or Hex.
ColorPickerViews RenderFragment A nested container to list the ColorPicker views. All views are enabled by default and the user can switch between them with the buttons. Each view tag has its own configuration attributes.
View ColorPickerView enum
The default selected view. Supports two-way binding.
ShowPreview bool
Toggles the visibility of the current color box and the color preview box in the popup.
Class string A custom CSS class for the span.k-colorpicker element.
Enabled bool
Determines if the user can open the popup and change the value.
ShowButtons bool
Controls the visibility of the Apply and Cancel buttons.
ShowClearButton bool
Sets the visibility of the Clear button.
Icon object Adds a font icon inside the main component button. You can find more information on adding a font icon to a Telerik Component in the Telerik Font and Svg Icons article.

Styling and Appearance

The following parameters enable you to customize the appearance of the Blazor ColorPicker:

Parameter Type Description
Size Telerik.Blazor.ThemeConstants.ColorPicker.Size Adjusts the size of the ColorPicker.
Rounded Telerik.Blazor.ThemeConstants.ColorPicker.Rounded Affects the border-radius of the ColorPicker.
FillMode Telerik.Blazor.ThemeConstants.ColorPicker.FillMode Controls how the ColorPicker is filled.

For more information on customizing the ColorPicker styling, see the article about setting the appearance of the ColorPicker.

ColorPicker Reference and Methods

To use the methods of the Blazor ColorPicker, add a reference to the component instance.

Method Description
Close Closes the component popup.
FocusAsync Focuses the main element of the component. Always await this call, as it relies on JSInterop.
Open Opens the component popup.
<TelerikColorPicker @ref="@ColorPickerRef"
                    @bind-Value="@Color" />

<TelerikButton OnClick="@OpenPopup">Open Popup</TelerikButton>

@code {
    private TelerikColorPicker ColorPickerRef { get; set; }

    private string Color { get; set; } = "rgb(40, 47, 137)";

    private void OpenPopup()

Next Steps

See Also

In this article