Skip to main content

ColorPicker

The ui5-color-picker allows users to choose any color and provides different input options for selecting colors.

Usage​

When to use​

Use the color picker if:

  • users need to select any color freely.

When not to use​

  • Users need to select one color from a predefined set of colors. Use the ColorPalette component instead.

ES6 Module Import​

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

Basic Sample​

Properties​

color​

DescriptionDefines the currently selected color of the component.
Note: use HEX, RGB, RGBA, HSV formats or a CSS color name when modifying this property.
Typestring
Default"rgba(255, 255, 255, 1)"

Slots​

No slots available for this component.

Events​

change​

DescriptionFired when the the selected color is changed
TypeCustomEvent

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.