---
title: Overview
position: 1
seo_title: Overview of the ColorGradient Component
seo_description: Learn about the basic features of the Telerik and Kendo UI
  ColorGradient component, its various states and types, explore the extensive
  set of available options in its live demo.
---
## 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

<LiveDemo data='{"links":[{"text":"Angular","url":"https://www.telerik.com/kendo-angular-ui/components/inputs/colorgradient"},{"text":"Blazor","url":"https://demos.telerik.com/blazor-ui/colorgradient/overview"},{"text":"jQuery","url":"https://demos.telerik.com/kendo-ui/colorgradient/index"},{"text":"React","url":"https://www.telerik.com/kendo-react-ui/components/inputs/colorgradient"},{"text":"Vue","url":"https://www.telerik.com/kendo-vue-ui/components/inputs/colorgradient"},{"text":"ASP.NET Core","url":"https://demos.telerik.com/aspnet-core/colorgradient"},{"text":"ASP.NET MVC","url":"https://demos.telerik.com/aspnet-mvc/colorgradient"}],"demo":"components/colorgradient/overview"}'></LiveDemo>

### 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`&mdash;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`&mdash;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: 

<BlueprintImage data='{"description":"","labels":[{"text":"Canvas handle"},{"text":"Canvas"},{"text":"Slider handle"},{"text":"Hue slider"},{"text":"Alpha slider"},{"text":"Color mode button"},{"text":"Color mode inputs"},{"text":"Color mode hint text"}]}'>![A Telerik and Kendo UI ColorGradient component with the canvas, alpha slider, vertical hue, hex input, and color format value elements.](images/components-colorgradient-overview-anatomy-v2.png "Anatomy and elements of a Telerik and Kendo UI ColorGradient component with the canvas, alpha slider, vertical hue, hex input, and color format value elements.")</BlueprintImage>

#### 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

<BlueprintImage data='{"description":"","labels":[{"text":"ColorGradient with an RGBA color mode (default)"},{"text":"ColorGradient with an RGB color mode"},{"text":"ColorGradient with a HEX color mode"}]}'>![The three variants of the Telerik and Kendo UI ColorGradient, including ColorGradients with RGBA, RGB, and HEX modes](images/components-colorgradient-overview-variants_v2.png "The three variants of the Telerik and Kendo UI ColorGradient")</BlueprintImage>

### Framework-Specific Documentation

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

<Wrap>
<ExternalResource data='{"title":"Kendo UI for Angular ColorGradient","description":"Find more information about the Kendo UI for Angular ColorGradient in the official product documentation of the component.","url":"https://www.telerik.com/kendo-angular-ui/components/inputs/colorgradient/"}'>![Kendo UI for Angular logo.](/images/angular-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for Blazor ColorGradient","description":"Find more information about the Telerik UI for Blazor ColorGradient in the official product documentation of the component.","url":"https://docs.telerik.com/blazor-ui/components/colorgradient/overview"}'>![Telerik UI for Blazor logo.](/images/blazor-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for jQuery ColorGradient","description":"Find more information about the Kendo UI for jQuery ColorGradient in the official product documentation of the component.","url":"https://docs.telerik.com/kendo-ui/controls/colorgradient/overview"}'>![Kendo UI for jQuery logo](/images/jquery-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"KendoReact ColorGradient","description":"Find more information about the KendoReact ColorGradient in the official product documentation of the component.","url":"https://www.telerik.com/kendo-react-ui/components/inputs/colorgradient/"}'>![Kendo UI for React logo.](/images/react-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for Vue ColorGradient","description":"Find more information about the Kendo UI for Vue ColorGradient in the official product documentation of the component.","url":"https://www.telerik.com/kendo-vue-ui/components/inputs/colorgradient/"}'>![Kendo UI for Vue logo](/images/vue-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET Core ColorGradient","description":"Find more information about the Telerik UI for ASP.NET Core ColorGradient component.","url":"https://docs.telerik.com/aspnet-core/html-helpers/editors/colorgradient/overview"}'>![Telerik UI for ASP.NET Core logo](/images/core-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET MVC ColorGradient","description":"Find more information about the Telerik UI for ASP.NET MVC ColorGradient component.","url":"https://docs.telerik.com/aspnet-mvc/html-helpers/editors/colorgradient/overview"}'>![Telerik UI for ASP.NET MVC logo](/images/mvc-logo.svg)</ExternalResource>

</Wrap>