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 90+ 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 an HSV (Hue, Saturation, Value) selector.

An HSV 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({ palette: "basic" });
    });
</script>

A simple 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({ palette: "websafe" });
    });
</script>

A simple 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({
            palette: "#fff,#000,#f00"
        });
    });
</script>

See Also

In this article
Not finding the help you need? Improve this article