Blazor ColorPicker

Overview

The Telerik UI for Blazor ColorPicker is a color editing tool that renders in a popup. It allows users to select a color using one of the two available views: color palette or a gradient (HSV canvas). The component supports resetting and reverting values and Apply & Cancel buttons for full control over the changes. You can customize its header, footer and displayed icon.
Views
The component combines the FlatColorPicker and ColorGradient UI controls and allows switching between the two. It allows customization of colors through either a palette or gradient view.
- ColorPicker Palette View enables you to choose a preferred color from a grid.
- ColorPicker Gradient View allows you to precisely find and select the color of your choice either by picking it with the mouse or by entering its RGB values.
ColorPicker Popup Settings

The Blazor ColorPicker component allows you to easily configure popups from a single dedicated tag. In addition to that, the Open and Close methods allow you to toggle the popup visibility without triggering the OnOpen/OnClose events.
Customization

The ColorPicker component allows customization of its header, footer and split button icon. You can choose whether to display a Clear, Preview, Apply and Cancel buttons, as well as customize the icon it shows, or remove it.

Check put the ColorPicker customization demo.
Theming

The Telerik UI for Blazor ColorPicker has three built-in themes and various swatches, including Default (Main Dark, Nordic, Purple), Material (Arctic, Lime Dark, Nova), Bootstrap (Urban, Vintage, etc.) and Fluent. You can easily customize any out-of-the-box themes with a few lines of CSS or create new themes to match your colors and branding by using the Progress Sass ThemeBuilder application.
Right-to-Left (RTL) Support

The Telerik UI for Blazor ColorPicker component supports right-to-left configuration. The RTL functionality is supported by most of our components to accommodate users who communicate in a right-to-left language script, such as Arabic and Hebrew.
Learn more in our Blazor Right-to-Left Support documentation