ColorPalette Overview

The Kendo UI for jQuery ColorPalette renders colors by using color presets (sets of predefined colors) or by implementing a custom color palette.

Kendo UI for jQuery Kendoka image

The ColorPalette 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 ColorPalette, use a div element. The following example shows a basic configuration of the ColorPalette widget:

    <div id="colorpalette"></div>

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

As of Kendo UI R3 2022, you can initialize the ColorGradient from an input element and use it for value submission. The widget is also supported as an editor in the Kendo Form.

    <form id="myForm"></form>

    <script>
      $("#myForm").kendoForm({
        formData: {
          ID: 1,
          Name: "John Doe",
          Address: 3,
          Color: "red"
        },
        items: [
          {
            field: "Name",
            validation: { required: true }
          },
          {
            field: "Address",
            editor:"DropDownList",
            editorOptions:{
              dataTextField:"text",
              dataValueField:"id",
              dataSource: {
                data: [
                  {text:"Sofia", id:1},
                  {text:"London", id:2},
                  {text:"New York", id:3}
                ]
              }
            }
          },
          {
            field: "Color",
            editor:"ColorPalette"
          }
        ]
      });
    </script>

Functionality and Features

  • Color Presets—The widget provides a set of predefined color palettes.
  • Accessibility—The ColorPalette supports various accessibility standards.

See Also

In this article