New to Telerik UI for Blazor? Download free 30-day trial

FlatColorPicker Views

The FlatColorPicker can display different views. They allow users to select a color from an interface that matches their preferences. The supported views are:

By default, both views are enabled and the gradient view is displayed first. Both behaviors can be configured via the FlatColorPicker FlatColorPickerViews container and View attribute.


The GradientView uses a TelerikColorGradient component. The following ColorGradient attributes are exposed in the FlatColorPickerGradientView tag:

  • Format
  • Formats
  • ShowOpacityEditor


The PaletteView uses a TelerikColorPalette component. The following ColorPalette attributes are exposed in the FlatColorPickerPaletteView tag:

  • Columns
  • Colors
  • TileWidth
  • TileHeight


@* Blazor FlatColorPicker Views *@

<TelerikFlatColorPicker @bind-Value="@Color">
        <FlatColorPickerGradientView Format="ColorFormat.Hex"
                                 ShowOpacityEditor="true" />
        <FlatColorPickerPaletteView Colors="ColorPalettePresets.Basic"
                                TileHeight="40px" />

@code {
    string Color { get; set; }

See Also

In this article