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.

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

In this article:

• Basics
• Example
• Interface
• Features
• Supported Value Formats

Basics

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.

Example

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)";
}

Interface

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.

Features

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

Buttons

• 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 or image 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:

• Icon - string - specifies a built-in font icon class.
• ImageUrl - string - specifies an URL for an image.
• IconClass - string - sets a custom icon class.

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()
    {
        ColorPickerRef.Open();
    }
}

See Also

• ColorPicker Views
• ColorPicker Events
• ColorPicker Live Demo