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 100+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

In this article:

• Basics
• Example
• Features
• Using Multiple Input Formats
• Supported Value Formats

Basics

To use a Telerik ColorGradient for Blazor:

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 attrbutes to the desired color format.

Example

Here is a ColorGradient declaration and the resulting UI.

@* Blazor ColorGradient *@

<TelerikColorGradient @bind-Value="@Value" />

@code {
    string Value { get; set; } = "rgb(40, 47, 137)";
}

The snippet will produce the following result:

Features

The ColorGradient exposes the following features via its attributes:

• Value - string - sets the ColorGradient value in a few different color formats. Supports two-way binding.
• Formats - IEnumerable<ColorFormat> - defines 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.
• Format - ColorFormat - specifies the value format, which the users sees initially (ColorFormat.Rgb by default). Supports two-way binding. The Rgb input format allows changing the textbox values with the Up/Down arrow keys.
• ValueFormat - ColorFormat - sets the color format, which the component will return in the application code (ColorFormat.Rgb by default).
• ShowOpacityEditor - bool - specifies if the user can add opacity (transparency) to the color value (true by default).

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.

See Also

• ColorGradient Events
• ColorGradient Live Demo