Kendo UI for jQuery ColorPicker Overview

The ColorPicker is a drop-down list for selecting colors.

It is designed to replace the HTML5 <input type="color"> tag which is not widely supported in browsers.

Kendo UI for jQuery Kendoka image

The ColorPicker 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 ColorPicker, use a jQuery ID selector. The original input element is kept in the DOM. The value attribute element gets updated while the user selects a color which allows form submission.

    <input type="color" id="myColorField" />

    <script>
        $(document).ready(function(){
            $("#myColorField").kendoColorPicker();
        });
    </script>

The default popup contains a gradient with HEX input.

Kendo UI for jQuery HEX ColorPicker

The following example demonstrates how to create a simple ColorPicker and render 20 colors.

    <input type="color" id="myColorField" />

    <script>
        $(document).ready(function(){
            $("#myColorField").kendoColorPicker({ 
                views:["palette"],
                preview:false,
                palette: "basic" 
            });
        });
    </script>

Kendo UI for jQuery ColorPicker with a basic palette

The following example demonstrates how to create a web-safe color palette with 216 colors.

    <input type="color" id="myColorField" />

    <script>
        $(document).ready(function(){
            $("#myColorField").kendoColorPicker({ 
                views:["palette"],
                preview:false,
                palette: "websafe" 
            });
        });
    </script>

Kendo UI for jQuery ColorPicker with a web-safe palette

To display a custom list of colors in the ColorPicker, pass them in the palette argument. The following example demonstrates how to display the white, black, and red colors. You can render any other color by using its short (3 digits) or long (6 digits) hex notation and by omitting the # sign.

    <input type="color" id="myColorField" />

    <script>
        $(document).ready(function(){
            $("#myColorField").kendoColorPicker({
                views:["palette"],
                preview:false,
                palette: "#fff,#000,#f00"
            });
        });
    </script>

Legacy ColorPicker Design

As of the end of 2021, the ColorPicker has a new design. The configuration from the example below shows how to revert to the old design of the widget:

    <input id="picker" />
    <script>
        $("#picker").kendoColorPicker({
            input: false,
            preview:false,
            views: ["gradient"]
        });
    </script>

See Also

In this article