Blazor FlatColorPicker - Overview

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.