The DevExpress Blazor Color Palette UI component allows users to select color values within your DevExpress-powered Blazor app (the palette can display multiple color groups - predefined sets or custom colors).

Our Color Palette UI component supports different size mode options. To specify component size in code, use the SizeMode property. To apply different size modes to this demo, use the dropdown list in the demo card header.

The Color Palette also supports keyboard navigation (list of supported keyboard shortcuts), allowing users to navigate within the palette and select individual colors.

This demo uses our default Color Palette configuration (includes three color groups: Universal, Universal Gradient, and Standard).

The Color Palette component allows you to use predefined sets of colors (presets). The following presets are available:

• Universal
• Universal Gradient
• Fluent Theme
• Fluent Theme Gradient
• Pastel
• Pastel Gradient
• Warm
• Warm Gradient
• Cold
• Cold Gradient
• Standard

This demo displays the Color Palette with all available presets.

To add multiple color groups to the palette, you must:

1. Add <Groups>...</Groups> to the component's markup to define the Groups collection.
2. Add DxColorPaletteGroup objects to the collection. Use the Colors property to specify a palette preset or add custom colors to the palette.

To add a group of custom colors to the Color Palette, you must:

1. Add <Groups>...</Groups> to the component's markup to define the Groups collection.
2. Add DxColorPaletteGroup objects to the collection. Use the Colors property to specify a color collection.

Use the ColumnCount property to modify palette column count.

Click the No Color tile to reset a selected color.

To hide the No Color tile, set the [ShowNoColorTile]((https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxColorPalette.ShowNoColorTile) property to false.

Use the TileCssClass property to customize tile appearance.

In this demo, the Color Palette component is integrated into our Blazor DropDownBox UI component.

In this demo, the Color Palette component is integrated into our Blazor Split Button UI component.