ColorPalette

@ui5/webcomponents
<ui5-color-palette>

ColorPalette

<ui5-color-palette>
	<ui5-color-palette-item value="darkblue"></ui5-color-palette-item>
	<ui5-color-palette-item value="pink"></ui5-color-palette-item>
	<ui5-color-palette-item value="#444444"></ui5-color-palette-item>
	<ui5-color-palette-item value="rgb(0,200,0)"></ui5-color-palette-item>
	<ui5-color-palette-item value="green"></ui5-color-palette-item>
	<ui5-color-palette-item value="darkred"></ui5-color-palette-item>
	<ui5-color-palette-item value="yellow"></ui5-color-palette-item>
	<ui5-color-palette-item value="blue"></ui5-color-palette-item>
	<ui5-color-palette-item value="cyan"></ui5-color-palette-item>
	<ui5-color-palette-item value="orange"></ui5-color-palette-item>
	<ui5-color-palette-item value="#5480e7"></ui5-color-palette-item>
	<ui5-color-palette-item value="#ff6699"></ui5-color-palette-item>
</ui5-color-palette>

ColorPalette in Popover

<section>
	<ui5-button id="btnOpenPopover" icon="text-color"></ui5-button>
	<ui5-input id="inpSelectedColor" placeholder="Selected color..."></ui5-input>
</section>

<ui5-popover id="palettePopover" header-text="Pick a color" placement-type="Bottom">
		<ui5-color-palette id="colorPaletteInPopover" more-colors>
			<ui5-color-palette-item value="darkblue"></ui5-color-palette-item>
			<ui5-color-palette-item value="pink"></ui5-color-palette-item>
			<ui5-color-palette-item value="#444444"></ui5-color-palette-item>
			...
		</ui5-color-palette>
</ui5-popover>

<script>
	colorPaletteInPopover.addEventListener("change", event => {
		inpSelectedColor.value = event.detail.color;
	});

	btnOpenPopover.addEventListener("click", event => {
		palettePopover.openBy(btnOpenPopover);
	});
</script>

Overview

The ColorPalette provides the users with a range of predefined colors. You can set them by using the ColorPaletteItem items as slots.

Usage

The palette is intended for users, who don't want to check and remember the different values of the colors . For the ui5-color-palette

ES6 Module Import

import @ui5/webcomponents/dist/ColorPalette.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
moreColors
more-colors
boolean
Defines whether the user can choose a custom color from a color picker Note: In order to use this property you need to import the following module: "@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js"
since v1.0.0-rc.12
value
CSSColor
The selected color.

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
default
HTMLElement [0..n]
Defines the ui5-color-palette-item items.

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 user selects a color.
color
type: String
description: the selected color

ColorPaletteItem

Overview

The ui5-color-palette-item component represents a color in the the ui5-color-palette.

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
stableDomRef
stable-dom-ref
String
Defines the stable selector that you can use via getStableDomRef method.
value
CSSColor
Defines the value of the ui5-color-palette-item color.

Note: The value should be a valid CSS color.
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