Kendo UI for jQuery FlatColorPicker Overview
The FlatColorPicker component provides a rich interface to choose a color from Palette and Gradient views. It enables the user to preview the selected color before submit and to ensure that a certain contrast requirements are met.
The FlatColorPicker 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 FlatColorPicker, use a div element.
The below example shows a basic initialization of the FlatColorPicker:
<div id="flatcolorpicker"></div>
<script>
$(document).ready(function(){
$("#flatcolorpicker").kendoFlatColorPicker();
});
</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:"FlatColorPicker"
}
]
});
</script>
Functionality and Features
- Views—The widget supports a gradient view and a palette view.
- Formats—The widget supports RGB and HEX input formats.
- Contrast Tool—The widget provides a color contrast tool, which checks the contrast ratio between two colors.
- Accessibility—The FlatColorPicker supports various accessibility standards.