|
| 1 | +--- |
| 2 | +title: Palettes |
| 3 | +page_title: Palettes |
| 4 | +description: "Learn more about the color palettes of the Telerik UI for {{ site.framework }} ColorPicker." |
| 5 | +slug: palettes_colorpicker |
| 6 | +position: 6 |
| 7 | +--- |
| 8 | + |
| 9 | +# Palettes |
| 10 | + |
| 11 | +The ColorPicker supports color palettes that are displayed in the `Palette` view. |
| 12 | + |
| 13 | +The default palette consists of 20 basic colors. You can specify the desired collection of colors through the [`Palette()`](/api/kendo.mvc.ui.fluent/colorpickerbuilder#palettesystemcollectionsgenericienumerable) option. |
| 14 | + |
| 15 | +The example below demonstrates how to define a color palette that will be displayed in the `Palette` view. |
| 16 | + |
| 17 | +```HtmlHelper |
| 18 | + @(Html.Kendo().ColorPicker() |
| 19 | + .Name("colorPicker") |
| 20 | + .Palette(new string[] { "#ddd1c3", "#d2d2d2", "#746153", "#3a4c8b", "#ffcc33", "#fb455f", "#ac120f" }) |
| 21 | + ) |
| 22 | +``` |
| 23 | +{% if site.core %} |
| 24 | +```TagHelper |
| 25 | + @addTagHelper *, Kendo.Mvc |
| 26 | + @{ |
| 27 | + string[] colors = new string[] { "#ddd1c3", "#d2d2d2", "#746153", "#3a4c8b", "#ffcc33", "#fb455f", "#ac120f" }; |
| 28 | + } |
| 29 | +
|
| 30 | + <kendo-colorpicker name="colorPicker" palette-colors="colors"> |
| 31 | + </kendo-colorpicker> |
| 32 | +``` |
| 33 | +{% endif %} |
| 34 | + |
| 35 | +## Defining Web-Safe Colors |
| 36 | + |
| 37 | +The ColorPicker provides a color palette of [Web-safe colors](https://en.wikipedia.org/wiki/Web_colors#Web-safe_colors). Use the [`ColorPickerPalette.WebSafe`](https://docs.telerik.com/aspnet-core/api/kendo.mvc.ui/colorpickerpalette) enum to define it. |
| 38 | + |
| 39 | +```HtmlHelper |
| 40 | + @(Html.Kendo().ColorPicker() |
| 41 | + .Name("colorPicker") |
| 42 | + .Palette(ColorPickerPalette.WebSafe) |
| 43 | + ) |
| 44 | +``` |
| 45 | +{% if site.core %} |
| 46 | +```TagHelper |
| 47 | + @addTagHelper *, Kendo.Mvc |
| 48 | +
|
| 49 | + <kendo-colorpicker name="colorPicker" palette="ColorPickerPalette.WebSafe"> |
| 50 | + </kendo-colorpicker> |
| 51 | +``` |
| 52 | +{% endif %} |
| 53 | + |
| 54 | +## Specifying the Number of Columns |
| 55 | + |
| 56 | +To specify the number of columns of the palette, set up the [`Columns()`](/api/kendo.mvc.ui.fluent/colorpickerbuilder#columnssystemdouble) option. The number of columns is automatically configured when using the default or the `WebSafe` palettes. |
| 57 | + |
| 58 | +```HtmlHelper |
| 59 | + @(Html.Kendo().ColorPicker() |
| 60 | + .Name("colorPicker") |
| 61 | + .Columns(3) |
| 62 | + .Palette(new string[] { "#ddd1c3", "#d2d2d2", "#746153", "#3a4c8b", "#ffcc33", "#fb455f", "#ac120f" }) |
| 63 | + ) |
| 64 | +``` |
| 65 | +{% if site.core %} |
| 66 | +```TagHelper |
| 67 | + @addTagHelper *, Kendo.Mvc |
| 68 | + @{ |
| 69 | + string[] colors = new string[] { "#ddd1c3", "#d2d2d2", "#746153", "#3a4c8b", "#ffcc33", "#fb455f", "#ac120f" }; |
| 70 | + } |
| 71 | +
|
| 72 | + <kendo-colorpicker name="colorPicker" palette-colors="colors" columns="3"> |
| 73 | + </kendo-colorpicker> |
| 74 | +``` |
| 75 | +{% endif %} |
| 76 | + |
| 77 | + |
| 78 | +## See Also |
| 79 | + |
| 80 | +* [Server-Side API of the ColorPicker HtmlHelper](/api/colorpicker) |
| 81 | +{% if site.core %} |
| 82 | +* [Server-Side API of the ColorPicker TagHelper](/api/taghelpers/colorpicker) |
| 83 | +{% endif %} |
| 84 | +* [Client-Side API of the ColorPicker](https://docs.telerik.com/kendo-ui/api/javascript/ui/colorpicker) |
0 commit comments