Color Picker

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

Pick color

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

Overview

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

Usage

When to use:

  • 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";

    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
    CSSColor
    Defines the currently selected color of the component.

    Note: use HEX, RGB, RGBA, HSV formats 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 Horizon
    Content Density: Cozy Compact
    Text Direction: LTR RTL
    Apply Cancel