Mode and Value in Blazor Color Picker Component

1 Dec 20251 minute to read

Rendering palette at initial load

By default, the Picker view is shown initially. To display the palette view when opening the Color Picker popup, set the Mode property to Palette.

In the following example, the palette is displayed at initial load.

@using Syncfusion.Blazor.Inputs

<h4>Choose a color</h4>
<SfColorPicker Mode="ColorPickerMode.Palette"></SfColorPicker>
Blazor ColorPicker with Palette

Color value

The Value property can be used to specify the color value to the Color Picker. It supports either three or six digit hex codes. To include opacity, set the color value as four or eight digit hex code.

In the following example, a 4-digit hex value is used, where the last digit represents the opacity.

@using Syncfusion.Blazor.Inputs

<h4>Choose a color</h4>
<SfColorPicker Value="035a" ModeSwitcher="false"></SfColorPicker>
Changing Blazor ColorPicker value

NOTE

The Value property supports hex codes with or without the # prefix.