Color Picker

v1.0.0-rc.12
@ui5/webcomponents
<ui5-color-picker>

Pick color

<ui5-color-picker></ui5-color-picker>
	

Overview

Enables the user to select a color & transparency.

Usage

For the ui5-color-picker

ES6 Module Import

import @ui5/webcomponents/dist/ColorPicker.js";

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
color
String
Defines the currently selected color of the ui5-color-picker. *Note*: If you need to have initially set color, or change the color programmatically, use this property *Important*: Use HEX, RGB, RGBA, HSV, or a CSS color name when modifying this property.

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
change
Fired when the the selected color is changed
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel