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.
In this article:
Basics
To use a Telerik ColorGradient for Blazor:
- Add the
TelerikColorGradient
tag. - Set its
Value
attribute to a HEX/RGBstring
variable via one-way or two-way binding. - (optional) Set the
ValueFormat
andFormat
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. BothHex
andRgb
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. TheRgb
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
- 3 digits -
- 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 thergba()
notation, compared torgb()
above.
- integer color values -
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.