Mode and Value in Blazor Color Picker Component

28 Dec 20231 minute to read

Rendering palette at initial load

By default, the Picker area will be rendered at initial load. To render the Palette area while opening the Color Picker pop-up, specify the Mode property as Palette.

In the following sample, it will render the Palette 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 sample, the color value is set as four digit hex code, the last digit represents the opacity value.

@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 code with or without # prefix.