ColorPicker

Example

<kendo-colorpicker>
    <contrast-tool />
    <messages />
    <tile-size />
</kendo-colorpicker>

ChildTags

Tag Name Details
contrast-tool ColorPickerContrastToolSettingsTagHelper
messages ColorPickerMessagesSettingsTagHelper
tile-size ColorPickerTileSizeSettingsTagHelper

Attributes

Attribute Type Description
name String Sets the name of the component.
as-module Boolean
buttons Boolean Specifies whether the widget should display the Apply / Cancel buttons.
clear-button Boolean Specifies whether the widget should display the 'Clear color' button.
close-on-select Boolean Specifies whether selection of a color in the palette view closes the popup. Applied only when buttons are set to false and the currently selected view is palette.
columns Double The number of columns to show in the color dropdown when a pallete is specified. This is automatically initialized for the "basic" and "websafe" palettes. If you use a custom palette then you can set this to some value that makes sense for your colors.
fill-mode FillMode Sets a value controlling how the color is applied.
for ModelExpression Defines the available input formats in the gradient input editor. Only "hex" and "rgb" are valid values.
format ColorPickerFormat Defines the available input formats in the gradient input editor. Only "hex" and "rgb" are valid values.
formats String[] Defines the available input formats in the gradient input editor. Only "hex" and "rgb" are valid values.
has-client-component Boolean
input Boolean Whether to render the input in the ColorGradient component.
on-change String Fires when a color was selected, either by clicking on it (in the simple picker), by clicking ENTER or by pressing "Apply" in the HSV picker.
on-select String Fires as a new color is displayed in the drop-down picker. This is not necessarily the "final" value; for example this event triggers when the sliders in the HSV selector are dragged, but then pressing ESC would cancel the selection and the color will revert to the original value.
is-in-client-template Boolean When placing a Tag Helper within a Kendo Template, set the type to text/html and add the is-in-client-template="true" attribute.
deferred Boolean Suppress initialization script rendering. Note that this options should be used in conjunction with DeferredScripts method.
on-close String Fires when the picker popup is closing.
on-open String Fires when the picker popup is opening.
opacity Boolean Only for the HSV selector. If true, the widget will display the opacity slider. Note that currently in HTML5 the <input type="color"> does not support opacity.
palette ColorPickerPalette Defines the palettes that can be used in the color picker.
palette-colors String[] Defines colors of the palette that can be used in the color picker.
preview Boolean Displays the color preview element and the previously selected color for comparison. With buttons set to false, both elements will update at the same time.
rounded Rounded Sets a value controlling the border radius.
sanitize-id Boolean
script-attributes IDictionary<String,Object>
size ComponentSize Sets the size of the component.
tool-icon String A CSS class name to display an icon in the color picker button. If specified, the HTML for the element will look like this:
value String The initially selected color. Note that when initializing the widget from an <input> element, the initial color will be decided by the field instead.
view ColorPickerView Defines the available views in the ColorPicker. Valid values are "gradient" and "palette".
views String[] Defines the available views in the ColorPicker. Valid values are "gradient" and "palette".
In this article
Not finding the help you need?