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 95+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
In this article:
Basics
To use a Telerik ColorPicker for Blazor:
- Add the
TelerikColorPicker
tag. - Set its
Value
attribute to any of the supported HEX/RGB formats. Use astring
property with one-way or two-way binding. - (optional) Set the
ValueFormat
toColorFormat.Hex
orColorFormat.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, andHex
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 thespan.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
- 3 digits -
- 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 thergba()
notation, compared torgb()
above.
- integer color values -
Users can type values in the following formats:
- All hexadecimal
- RGB and RGBA with integer color values
Color keywords are not supported.