ColorGradient

ColorGradient Overview

The ColorGradient component is a versatile UI component for selecting colors in a gradual and visually intuitive manner. It allows users to pick and adjust colors or input specific HEX or RGBA values. ColorGradients are ideal for scenarios where precise color blending and customization are essential, such as graphic design or creative applications.

Live Demo

Appearance

ColorGradients provide built-in styling options that grant visually appealing and flexible rendering experience. 

Apart from the default vision of the Telerik and Kendo UI ColorGradient, the component supports alternative styling options that enable you to configure the individual aspects of its appearance.

States

Depending on the action you want to imply through its appearance, the Telerik and Kendo UI ColorGradient can acquire the following states which you can set by using the following classes:

• A ColorGradient in its normal state appears usable and clickable.
• k-focus—The focus state is triggered after the ColorGradient has been spotlighted with the mouse or the keyboard, meaning that the ColorGradient is active and the user is interacting with it.
• k-disabled—The disabled state of the ColorGradient indicates that the user cannot interact with the component. When disabled, the component has no interactive behavior, it is faded out and slightly out of focus, which helps the user to distinguish it from the active elements on the page.

Anatomy

The anatomy of the ColorGradient summarizes the elements of the component and includes: 

1. Canvas handle
2. Canvas
3. Slider handle
4. Hue slider
5. Alpha slider
6. Color mode button
7. Color mode inputs
8. Color mode hint text

Variants

Depending on the elements they display, the Telerik and Kendo UI ColorGradient can be any of the following types:

• ColorGradient with an RGBA color mode (default)
• ColorGradient with an RGB color mode
• ColorGradient with a HEX color mode

1. ColorGradient with an RGBA color mode (default)
2. ColorGradient with an RGB color mode
3. ColorGradient with a HEX color mode

Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

Kendo UI for Angular ColorGradientFind more information about the Kendo UI for Angular ColorGradient in the official product documentation of the component.

Telerik UI for Blazor ColorGradientFind more information about the Telerik UI for Blazor ColorGradient in the official product documentation of the component.

Kendo UI for jQuery ColorGradientFind more information about the Kendo UI for jQuery ColorGradient in the official product documentation of the component.

KendoReact ColorGradientFind more information about the KendoReact ColorGradient in the official product documentation of the component.

Kendo UI for Vue ColorGradientFind more information about the Kendo UI for Vue ColorGradient in the official product documentation of the component.

Telerik UI for ASP.NET Core ColorGradientFind more information about the Telerik UI for ASP.NET Core ColorGradient component.

Telerik UI for ASP.NET MVC ColorGradientFind more information about the Telerik UI for ASP.NET MVC ColorGradient component.