ASP.NET Core ColorPicker Overview
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
gradientorpaletteview 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
- Getting Started with the ColorPicker
Basic Usage of the ColorPicker HtmlHelper for ASP.NET Core (Demo)
Basic Usage of the ColorPicker TagHelper for ASP.NET Core (Demo)