Blazor ColorPicker - 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 ColorPicker 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 ColorPicker component is a powerful tool for picking and editing colors. In its closed state, it looks like a standard dropdown button, but when clicked, the user sees a robust color picker. Allow your users to pick from a color gradient, color palette or both. When using the color gradient tool, users can drag the selector across an HSV canvas, use sliders to set base colors, set opacity and view/edit color values. When using the color palette, users select colors by clicking on a tile from a predefined set of colors.

Other supported features include:

  • Clear button: Reset colors back to default.
  • Toggle preview: Show or hide color selection preview.
  • Toggle buttons: Show or hide Cancel and Apply (commit) buttons in the popup footer.
  • Toggle icon: On the button, either show a generic icon or a tile displaying the currently selected color.
  • Views: Show the color gradient, color palette or both.
  • Button appearance: Configure the button’s fill mode, corner radius and size.

The Blazor ColorPicker combines two other components from the Telerik UI for Blazor librarythe ColorGradient and ColorPalette—into the popup that appears when the button is clicked or tapped.

The demo above is an example of the ColorPicker with all its features enabled. If you take a look at the “View Source” tab, you will see the component is initialized with a single line of code and the default color is set with another.

This Blazor ColorPicker 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.