Blazor ColorGradient Overview

The ColorGradient for Blazor enables users to select a color from an HSVA canvas, or to type a specific RGB/HEX color value. Compared to our ColorPalette component, the ColorGradient allows selection from unlimited number of colors. It may also be preferred by advanced users.

Telerik UI for Blazor Ninja image

The ColorGradient 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.

Creating Blazor ColorGradient

  1. Add the TelerikColorGradient tag.
  2. Set its Value attribute to a HEX/RGB string variable via one-way or two-way binding.
  3. (optional) Set the ValueFormat and Format attributes to the desired color format.

Blazor ColorGradient with initially selected color.

@* Blazor ColorGradient *@

<TelerikColorGradient @bind-Value="@ColorGradientValue"

@code {
   private string ColorGradientValue { get; set; } = "#282f89";


The Blazor ColorGradient fires value change and format change events that you can handle and further customize its behavior. Read more about the Blazor ColorGradient events.

Supported Value Formats

The ColorGradient accepts values by the application code in the following formats:

  • Hexadecimal
    • 3 digits - #f00
    • 6 digits - #ff0000
    • 8 digits, including alpha opacity - #ff000080
  • RGB or RGBA
    • integer color values - rgb(255, 0, 0)
    • percentage color values - rgb(100%, 0%, 0%)
    • the alpha opacity must always be a decimal number between 0 and 1 - rgba(100%, 0%, 0%, 0.5). Note the rgba() notation, compared to rgb() above.

Users can type values in the following formats:

  • All hexadecimal
  • RGB and RGBA with integer color values

Color keywords are not supported. If this is the preferred use case scenario, consider the ColorPalette component.

ColorGradient Parameters

The Blazor ColorGradient provides various parameters to configure the component. Also check the ColorGradient public API.

Parameter Type and Default Value Description
Class string The class that will be rendered on the main wrapping elemnet of the component (<div class="k-colorgradient">).
Enabled bool Whether the ColorGradient is enabled.
Format ColorFormat enum
The value format which the users sees initially. Supports two-way binding. The Rgb input format allows changing the textbox values with the Up/Down arrow keys.
Formats IEnumerable<ColorFormat> The available color formats which the user can see, toggle, and edit by typing. Both Hex and Rgb formats are enabled by default, and the user can switch between them with a button.
ShowOpacityEditor bool
Whether the opacity (transparency) slider will be rendered.
Value string The ColorGradient value. Accepts several different color formats. Supports two-way binding.
ValueFormat ColorFormat enum
The color format which the component will return in the application code.

Next Steps

See Also

In this article