ColorPalette Overview

Telerik UI for ASP.NET Core Ninja image

The ColorPalette is part of Telerik UI for ASP.NET Core, 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.

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.

Initializing the ColorPalette

The following example demonstrates how to define a ColorPalette.

    @(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.
    )
    <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.

    @(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")
    )
    @{
        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

See Also

In this article