Custom List of Colors

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.

EditPreviewOpen In Dojo

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

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

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

EditPreviewOpen In Dojo

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

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

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 component:

EditPreviewOpen In Dojo

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