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.

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