• Components
    • Barcodes
    • Buttons
    • Charts
    • Conversational UI
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogsupdated
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filterupdated
    • Ganttupdated
    • Gauges
    • Gridupdated
    • Icons
    • Indicatorsupdated
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Mapbeta
    • Menus
    • Navigationupdated
    • Notification
    • Pager
    • PDF Export
    • PivotGridupdated
    • Popup
    • ProgressBarsupdated
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • ToolBar
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Typography
    • Uploads
    • Utilitiesnew
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
New to Kendo UI for Angular? Start a free 30-day trial

ColorGradientComponent

The ColorGradient component enables smooth color transitions and provides options for selecting specific colors over the drag handle. The ColorGradient is independently used by kendo-colorpicker and can be directly added to the page.

Selector

kendo-colorgradient

Export Name

Accessible in templates as #kendoColorGradientInstance="kendoColorGradient"

Inputs

NameTypeDefaultDescription

clearButton

boolean

false

Specifies whether the ColorGradient should display a 'Clear color' button.

contrastTool

string

Enables the color contrast tool. Accepts the background color that will be compared to the selected value. The tool will calculate the contrast ratio between the two colors.

delay

number

0

Determines the delay time (in milliseconds) before the value is changed on handle drag. A value of 0 indicates no delay.

disabled

boolean

false

Sets the disabled state of the ColorGradient.

format

OutputFormat

Specifies the output format of the ColorGradientComponent. The input value may be in a different format, but it will be parsed into the output format after the component processes it.

The supported values are:

  • (Default) rgba
  • hex

gradientSliderSmallStep

number

2

Determines the step (in pixels) when moving the gradient drag handle using the keyboard arrow keys while holding the shift key.

gradientSliderStep

number

5

Determines the step (in pixels) when moving the gradient drag handle using the keyboard arrow keys.

opacity

boolean

true

Defines whether the alpha slider will be displayed.

readonly

boolean

false

Sets the read-only state of the ColorGradient.

tabindex

number

0

Specifies the tabindex of the component.

value

string

Specifies the value of the initially selected color.

Fields

NameTypeDefaultDescription

isFocused

boolean

Indicates whether the ColorGradient or any of its content is focused.

Events

NameTypeDescription

valueChange

EventEmitter<string>

Fires each time the user selects a new color.

Methods

focus

Focuses the component.

In this article

Not finding the help you need?