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.

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.

Download Free 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; }
}

Views

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.

Interface

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.

Events

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 (Rgb)	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 (Gradient)	The default selected view. Supports two-way binding.
ShowPreview	bool (true)	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 (true)	Determines if the user can open the popup and change the value.
ShowButtons	bool (true)	Controls the visibility of the Apply and Cancel buttons.
ShowClearButton	bool (true)	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()
    {
        ColorPickerRef.Open();
    }
}

Next Steps

• Explore the Telerik UI for Blazor ColorPicker Views
• Handle the Blazor ColorPicker Events

See Also

• Blazor ColorPicker Overview (Live Demo)
• Blazor ColorPicker API Reference