Kendo UI for jQuery ColorGradient Overview
The Kendo UI for jQuery ColorGradient renders a gradient (a hue and an alpha slider) and inputs to manually enter a desired color. You can directly add the widget to the page instead of rendering it in a popup.
The ColorGradient is part of Kendo UI for jQuery, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Basic Configuration
To initialize the ColorGradient, use a div element. The following example shows a basic implementation of the widget.
<div id="colorgradient"></div>
<script>
$(document).ready(function(){
$("#colorgradient").kendoColorGradient();
});
</script>
As of Kendo UI R3 2022, you can initialize the ColorGradient from an input element and use it for value submission. The widget is also supported as an editor in the Kendo Form.
<form id="myForm"></form>
<script>
$("#myForm").kendoForm({
formData: {
ID: 1,
Name: "John Doe",
Address: 3,
Color: "red"
},
items: [
{
field: "Name",
validation: { required: true }
},
{
field: "Address",
editor:"DropDownList",
editorOptions:{
dataTextField:"text",
dataValueField:"id",
dataSource: {
data: [
{text:"Sofia", id:1},
{text:"London", id:2},
{text:"New York", id:3}
]
}
}
},
{
field: "Color",
editor:"ColorGradient"
}
]
});
</script>
Functionality and Features
- Contrast Tool—The widget provides a color contrast tool, which checks the contrast ratio between two colors.
- Formats—The widget supports RGB and HEX input formats.
- Accessibility—The ColorGradient supports various accessibility standards.