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!
Telerik UI for Blazor ColorPicker - Header
  • 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. 
    Telerik UI for Blazor ColorPicker - Overview
  • 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. 

    Telerik UI for Blazor ColorPicker-Views
  • 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.
    Telerik UI for Blazor ColorPicker Configuration
  • 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 

    Blazor RTL Support

All Blazor Components

Next Steps