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.

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.

Download Free 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"
                      ValueFormat="@ColorFormat.Hex">
</TelerikColorGradient>

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

Events

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 (ColorFormat.Rgb)	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 (true)	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 (ColorFormat.Rgb)	The color format which the component will return in the application code.

Next Steps

• Handle the ColorGradient Events

See Also

• ColorGradient Events
• ColorGradient Live Demo