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.

Kendo UI for jQuery Kendoka image

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>

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.

See Also

In this article