ColorPalette Overview

The Telerik UI ColorPalette TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI ColorPalette widget.

The ColorPalette component provides collections of predefined colors that you can select and apply in various UI components, texts, backgrounds, and other visual elements.

• Demo page for the ColorPalette

Initializing the ColorPalette

The following example demonstrates how to define a ColorPalette.

Razor

    @(Html.Kendo().ColorPalette()
        .Name("colorpalette") // The name of the ColorPalette is mandatory. It specifies the "id" attribute of the component.
        .Value("#ff0000") // Set the value of the ColorPalette.
    )

Razor

    <kendo-colorpalette name="colorpalette" value="#ff0000">
    </kendo-colorpalette>

Basic Configuration

The following example showcases a basic configuration of the ColorPalette with four columns, specified width and height of the color cells, and a predefined color palette.

Razor

    @(Html.Kendo().ColorPalette()
        .Name("color-chooser")
        .Palette(new string[] { "#ddd1c3", "#d2d2d2", "#746153", "#3a4c8b", "#ffcc33", "#fb455f", "#ac120f" })
        .TileSize(ts => ts.Width(50).Height(50))
        .Columns(4)
        .Value("#ffcc33")
    )

Razor

    @{
        string[] colors = new string[] { "#ddd1c3", "#d2d2d2", "#746153", "#3a4c8b", "#ffcc33", "#fb455f", "#ac120f" };
    }

    <kendo-colorpalette name="color-chooser" columns="4"
        palette-colors="colors"
        value="#ffcc33">
         <tile-size width="50" height="50"/>
    </kendo-colorpalette>

Functionality and Features

• Color Presets—Use predefined color palettes or configure a custom set of palettes.
• Events—Subscribe to the ColorPalette Change event and implement the desired custom logic.
• Accessibility—The ColorPalette is accessible for screen readers, supports WAI-ARIA attributes, and delivers keyboard shortcuts for faster navigation.

Next Steps

• Getting Started with the ColorPalette

• Basic Usage of the ColorPalette HtmlHelper for ASP.NET Core (Demo)

• Basic Usage of the ColorPalette TagHelper for ASP.NET Core (Demo)

See Also

• Using the API of the ColorPalette for ASP.NET Core (Demo)
• Knowledge Base Section