Blazorise ColorPicker component

ColorPicker helps users choose precise colors and transparency for themes, drawing tools, and other visual settings.

Use the color surface to explore shades, choose a familiar color from the palette, or enter an exact color code. For the browser's built-in color selection dialog, use ColorInput.

Examples

Basic

Bind Value to update the color as users select it. Save confirms the current color and closes the picker, Cancel restores the color from when the picker opened, and Clear removes the color. Use ShowSaveButton, ShowCancelButton, and ShowClearButton to control which actions are available.

<Field>
    <ColorPicker @bind-Value="@colorValue" />
</Field>

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

InlineAdded in v2.4

Set Inline to keep the picker visible directly in the page without the popup toggle. The HEXA/RGBA input remains available unless ShowInputField="false" is set. Selecting a color updates the bound value immediately. Save sets the color that Cancel restores, and the picker stays visible after all actions.

Color

Selected color: #3366ff

<Field>
    <FieldLabel>Color</FieldLabel>
    <FieldBody>
        <ColorPicker Inline @bind-Value="@colorValue" />
    </FieldBody>
    <FieldHelp>Selected color: @colorValue</FieldHelp>
</Field>

@code {
    private string colorValue = "#3366ff";
}

Hue slider

In this Blazorise example, the ColorPicker component is enhanced with a hue slider, as indicated by the ShowHueSlider attribute.

<Field>
    <ColorPicker @bind-Value="@colorValue" ShowHueSlider />
</Field>

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

Value visibility

Set ShowValue="false" to hide the selected color value and display only the swatch, while preserving the picker's width and swatch alignment.

<Field>
    <ColorPicker @bind-Value="@colorValue" ShowValue="false" Width="Width.Auto" />
</Field>

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

Custom preview

Use PreviewContent to replace the swatch with an icon or other non-interactive content. Clicking the preview opens the picker. ShowValue independently controls the selected color text. Supply an accessible name when the preview has no visible label.

<Field>
    <ColorPicker @bind-Value="@colorValue" ShowValue="false" Width="Width.Auto" aria-label="Highlight color" title="Highlight color">
        <PreviewContent>
            <Icon Name="IconName.Highlighter" />
        </PreviewContent>
    </ColorPicker>
</Field>

@code {
    private string colorValue = "#ffff00";
}

AnimationAdded in v2.4

The picker menu fades in when opened and closes immediately. Set Animated="false" to open immediately, or use AnimationDuration to adjust the opening duration in milliseconds. A null duration preserves the provider's default; zero or a negative value disables the animation. The user's reduced-motion preference is respected automatically.

Animate opening

Animation duration

Color

<Field>
    <Switch @bind-Value="animated">Animate opening</Switch>
</Field>
<Field>
    <FieldLabel>Animation duration</FieldLabel>
    <FieldBody>
        <Select TValue="int?" @bind-Value="animationDuration">
            <SelectItem TValue="int?" Value="@((int?)null)">Provider default</SelectItem>
            <SelectItem TValue="int?" Value="0">Immediate</SelectItem>
            <SelectItem TValue="int?" Value="100">100 ms</SelectItem>
            <SelectItem TValue="int?" Value="200">200 ms</SelectItem>
            <SelectItem TValue="int?" Value="400">400 ms</SelectItem>
            <SelectItem TValue="int?" Value="1000">1000 ms</SelectItem>
        </Select>
    </FieldBody>
</Field>
<Field>
    <FieldLabel>Color</FieldLabel>
    <FieldBody>
        <ColorPicker @bind-Value="@colorValue" Animated="@animated" AnimationDuration="@animationDuration" />
    </FieldBody>
</Field>

@code {
    private bool animated = true;

    private int? animationDuration;

    private string colorValue = "#ff0000";
}

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.

<ColorPicker />