ASP.NET Core ColorPicker Overview

Telerik UI for ASP.NET Core Ninja image

The ColorPicker 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 ColorPicker TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI ColorPicker widget.

The ColorPicker is a drop-down list for selecting colors.

Initializing the ColorPicker

The following example demonstrates how to define the ColorPicker.

    @(Html.Kendo().ColorPicker()
          .Name("colorpicker") // The name of the ColorPicker is mandatory. It specifies the "id" attribute of the widget.
          .Value("#ff0000") // Set the value of the ColorPicker.
    )
        <kendo-colorpicker name="colorpicker" value="#ff0000">
            <messages apply="Change" cancel="Close" />
        </kendo-colorpicker>

Basic Configuration

The following example demonstrates how to configure the tile size, columns, change event, and palette colors.


        @(Html.Kendo().ColorPalette()
            .Name("palette")
            .Columns(4)
            .TileSize(s => s.Width(34).Height(19))
            .Palette(new string[] {
                "#f0d0c9", "#e2a293", "#d4735e", "#65281a",
                "#eddfda", "#dcc0b6", "#cba092", "#7b4b3a",
                "#fcecd5", "#f9d9ab", "#f6c781", "#c87d0e",
                "#e1dca5", "#d0c974", "#a29a36", "#514d1b",
                "#c6d9f0", "#8db3e2", "#548dd4", "#17365d"
            })
            .Events(events => events.Change("preview"))
        )

        @{
            string[] colorPickerPalette = new string[] {
                                        "#f0d0c9", "#e2a293", "#d4735e", "#65281a",
                                        "#eddfda", "#dcc0b6", "#cba092", "#7b4b3a",
                                        "#fcecd5", "#f9d9ab", "#f6c781", "#c87d0e",
                                        "#e1dca5", "#d0c974", "#a29a36", "#514d1b",
                                        "#c6d9f0", "#8db3e2", "#548dd4", "#17365d"
                                    };
        }
        <kendo-colorpalette name="palette" columns="4" on-change="preview" palette-colors="colorPickerPalette">
            <tile-size height="19" width="34" />
        </kendo-colorpalette>

Functionality and Features

  • Views—The ColorPicker enables you to choose between gradient or palette view types.
  • Appearance—The ColorPicker provides you with the option to customize its appearance based on your requirements.
  • Contrast Tool—The ColorPicker enables you to configure the contrast tool.
  • Formats—The ColorPicker provides support for both HEX and RGB coloring formats.

Next Steps

See Also

In this article