ASP.NET MVC ColorGradient Overview

The Telerik UI ColorGradient HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI ColorGradient widget.

The ColorGradient is a component that renders a gradient color palette. It has a hue and an alpha slider and provides an input that allows you to enter a color or copy the selected one.

• Demo page for the ColorGradient

Initializing the ColorGradient

The ColorGradient is usually used as a color editor. The following example demonstrates how to define the ColorGradient.

Razor

    @(Html.Kendo().ColorGradient()
        .Name("colorGradient") // The name of the ColorGradient is mandatory. It specifies the "id" attribute.
        .Value("#ff0000")
    )

Basic Configuration

The ColorGradient provides default configuration options such as input, format, opacity, and so on.

The following example shows a basic implementation of the control.

Razor

    @(Html.Kendo().ColorGradient()
        .Name("colorGradient")
        .Input(true)
        .Format(ColorGradientFormat.Hex)
        .Opacity(true)
        .Value("#f16e0aff")
    )

Functionality and Features

• Formats—The ColorGradient supports both RGB and HEX input formats.
• Contrast Tool—You can use the Color Contrast Tool that is built into the ColorGradient to check the color contrast ratio between two colors.
• Accessibility—The ColorGradient is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.

Next Steps

• Getting Started with the ColorGradient
• Basic Usage of the ColorGradient for ASP.NET MVC (Demo)

See Also

• Using the API of the ColorGradient for ASP.NET MVC (Demo)
• Knowledge Base Section