New to Kendo UI for jQuery? Start a free 30-day trial
Getting Started with the FlatColorPicker
Updated on Sep 8, 2026
This guide demonstrates how to get up and running with the Kendo UI for jQuery FlatColorPicker.
After the completion of this guide, you will achieve the following end result:
Loading ...
1. Create a Div Element
First, create a <div> element on the page that will be used to initialize the component. The content of the <div> will be the content of the FlatColorPicker.
html
<div id="flatcolorpicker"></div>2. Initialize the FlatColorPicker
In this step, you will initialize the FlatColorPicker from the <div> element.
<div id="flatcolorpicker"></div>
<script>
$(document).ready(function(){
$("#flatcolorpicker").kendoFlatColorPicker();
});
</script>3. Apply Configuration Settings
Here, you will apply some settings such as clearButton, buttons, and opacity.
<div id="flatcolorpicker"></div>
<script>
$(document).ready(function(){
$("#flatcolorpicker").kendoFlatColorPicker({
buttons: true, // Display the Apply / Cancel buttons.
clearButton: true, // Display the 'Clear color' button.
opacity: true // Render the opacity slider to allow selection of transparency.
});
});
</script>