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-child-component	Boolean
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.
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.
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.
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.
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
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".