Skip to main content

ColorPicker

<ui5-color-picker> | Since 1.0.0-rc.12

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​

value​

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)"

name​

DescriptionDetermines the name by which the component will be identified upon submission in an HTML form.
Note: This property is only applicable within the context of an HTML Form element.
Typestring | undefined
Defaultundefined
Since2.0.0

simplified​

DescriptionWhen set to true, the alpha slider and inputs for RGB values will not be displayed.
Typeboolean
Defaultfalse
Since2.5.0

Slots​

No slots available for this component.

Events​

change​

DescriptionFired when the the selected color is changed
TypeCustomEvent
BubblesYes
CancelableNo

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.

More Samples​

Simplified Picker​