UI for Blazor
Blazor ColorPicker
- Customize colors with the Blazor ColorPicker UI component. Choose between a predefined palette or a rich gradient view.
- Part of the Telerik UI for Blazor library along with 110+ professionally-designed UI components.
- Includes support, documentation, demos, virtual classrooms, Visual Studio Code Extensions and more!
-
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
