Blazor FlatColorPicker - Overview

T-shirt Design

  • Overview.razor
  • TShirtDesignTemplate.razor
Loading the demo source code...please wait.

Style in ThemeBuilder

  • Custom SASS variables
  • Atomic customizations
  • Sharing projects
Start Theming
blazor ui ninja image

The FlatColorPicker component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.


The Telerik UI for Blazor FlatColorPicker component is a powerful tool for color editing. It supports editing through a palette that renders a predefined set of colors and through a gradient component that renders hsv canvas. The FlatColorPicker component supports resetting values through a ShowClearButton parameter, reverting the value through a dedicated section for preview and current color, and Apply & Cancel buttons for committing the change.

This example demonstrates how you can easily use the Telerik Flat Color Picker in Blazor applications. You need to add the <TelerikFlatColorPicker> tag to your razor page and set its Value attribute to any of the supported HEX/RGB formats. Optionally, you can set the ValueFormat to ColorFormat.Hex or ColorFormat.Rgb if the app expects a specific color format.

The FlatColorPicker for Blazor can display color gradient and a color palette views. The gradient view allows unlimited color selection from an HSV canvas and renders textboxes for typing a color in RGB or HEX format. The palette view allows color selection from a predefined collection of colors. The current example reveals all elements of the FlatColorPicker interface: view selectors (top left), color preview box (top right), current color box (below the color preview), Clear button (top), Palette tiles or HSV canvas with hue and opacity sliders (middle), RGBA or HEX value textboxes with a toggle button (bottom), Apply and Cancel buttons (bottom).

The Telerik FlatColorPicker for Blazor exposes multiple events, such as OnChange, ValueChanged and ViewChanged, that enable easy handling of logic related to user interactions with the component.

This Blazor FlatColorPicker Overview example is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik UI for Blazor components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for Blazor or ThemeBuilder.

Support & Learning Resources

Additional Resources

An error has occurred. This application may no longer respond until reloaded.