Blazorise ColorPicker component

The ColorPicker allow the user to select a color using a variety of input methods.

ColorPicker component is based on a Pickr library and as such is not a native color input element. That means that unlike ColorInput which will render <input type="color">, ColorPicker will render span element.

Examples

Basic

In this Blazorise example, a ColorPicker component is bound to a colorValue variable using the @bind-Value directive. Initially set to red (#ff0000), the colorValue updates automatically when a user selects a new color through the ColorPicker, demonstrating an interactive color selection tool in a Blazor application. 
<ColorPicker @bind-Value="@colorValue" />

@code {
    string colorValue = "#ff0000";
}

Hue slider

In this Blazorise example, the ColorPicker component is enhanced with a hue slider, as indicated by the ShowHueSlider attribute. 
<ColorPicker @bind-Value="@colorValue" ShowHueSlider />

@code {
    string colorValue = "#ff00ff";
}

Best Practices

Support Precise Choices

Use a clear label and show the resulting color value when precision or reuse matters. Offer a sensible initial color and, when appropriate, a way to return to the product default.

Color Contrast

Validate the contrast of user-selected foreground and background colors before applying them to text or controls. When the full picker interface is unnecessary, use the more compact ColorInput component.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page