Blazor ColorPicker Overview

The ColorPicker for Blazor is an interactive component that allows color selection from a popup palette or a HSVA canvas. Users can also type a specific RGB/HEX color value manually. The ColorPicker is practically identical to the 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 100+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

In this article:


To use a Telerik ColorPicker for Blazor:

  1. Add the TelerikColorPicker tag.
  2. Set its Value attribute to any of the supported HEX/RGB formats. Use a string property with one-way or two-way binding.
  3. (optional) Set the ValueFormat to ColorFormat.Hex or ColorFormat.Rgb if the app expects a specific color format.


Here is a simple ColorPicker declaration and the resulting UI.

@* Blazor ColorPicker *@

<TelerikColorPicker @bind-Value="@Color" />

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


The image below reveals all ColorPicker interface elements:

  • Main component button with the current value and a dropdown arrow (outside the popup)
  • View selectors (top left)
  • Color preview box (top right)
  • Current color box (below the color preview)
  • Clear button (top)
  • Palette tiles or HSV canvas with hue and opacity sliders (middle)
  • RGBA or HEX value textboxes with a toggle button (bottom)
  • Apply and Cancel buttons (bottom)

Clicking outside the ColorPicker popup acts as an Apply action.

ColorPicker component


The ColorPicker tag exposes the following features via its attributes:

  • Value - string - sets the ColorPicker value in a few different color formats. Supports two-way binding.
  • ValueFormat - ColorFormat - sets the color format, which the component will return in the application code. By default, the property is not set and the value format will change depending on the used view: Rgb when selecting a color from the GradientView, and Hex when selecting a color from the PaletteView.
  • ColorPickerViews - RenderFragment - a nested container to list the ColorPicker views. All views are enabled by default and the user can switch between them with buttons. Each view tag has its own configuration attributes.
  • View - ColorPickerView - sets the default selected view (ColorPickerView.Gradient by default). Supports two-way binding.
  • ShowPreview - bool - toggles the current color box and the color preview box in the popup (true by default).

  • Class - string - renders a custom CSS class to the span.k-colorpicker element.

  • Enabled - bool - determines if the user can open the popup and change the value (true by default).


  • ShowButtons - bool - sets the visibility of the Apply and Cancel buttons (true by default).
  • ShowClearButton - bool - sets the visibility of the Clear button.

Custom Icon

The ColorPicker provides attributes to render an icon inside the main component button. This icon can be used to visually distinguish different ColorPickers on the page. In such cases, the selected color is displayed below the icon.

Use one attribute at a time:

Supported Value Formats

The 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

Color keywords are not supported.

ColorPicker Reference and Methods

Add a reference to the component instance to use the ColorPicker's methods.

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()

See Also

In this article