Components
    • Barcodes
    • Buttons
    • Charts
    • Conversational UIupdated
    • Data Query
    • Date Inputs
    • Date Math
    • Dialogsupdated
    • Drawing
    • Dropdowns
    • Editorupdated
    • Excel Export
    • File Saver
    • Filterupdated
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputs
    • Labels
    • Layoutupdated
    • ListBoxnew
    • ListView
    • Mapbeta
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PivotGridbeta
    • Popup
    • ProgressBarsupdated
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • ToolBar
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Typography
    • Uploads
    Styling & Themes
    Common Features
    Project Setup
    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.

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

opacity

boolean

true

Defines whether the alpha slider will be displayed.

readonly

boolean

false

Sets the read-only state of the ColorGradient.

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.

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?