ColorPalette

@ui5/webcomponents
<ui5-color-palette>

Color Palette Popover with recent colors, default color and more colors features

Open ColorPalettePopover
<ui5-button id="colorPaletteBtn" >Open ColorPalettePopover</ui5-button>
<ui5-color-palette-popover id="colorPalettePopover" show-recent-colors show-more-colors show-default-color default-color="green">
	<ui5-color-palette-item value="pink"></ui5-color-palette-item>
	<ui5-color-palette-item value="darkblue"></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-popover>
<script>
	colorPaletteBtn.addEventListener("click", (event) => {
		colorPalettePopover.openPopover(this);
	});
</script>

Color Palette Popover without any additional features

Open ColorPalettePopover
<ui5-button id="colorPaletteBtn1" >Open ColorPalettePopover</ui5-button>
<ui5-color-palette-popover id="colorPalettePopover1">
	<ui5-color-palette-item value="pink"></ui5-color-palette-item>
	<ui5-color-palette-item value="darkblue"></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-popover>
<script>
	colorPaletteBtn1.addEventListener("click", (event) => {
		colorPalettePopover1.openPopover(this);
	});
</script>

Overview

Represents a predefined range of colors for easier selection. Overview The ColorPalettePopover provides the users with a slot to predefine colors. You can customize them with the use of the colors property. You can specify a defaultColor and display a "Default color" button for the user to choose directly. You can display a "More colors..." button that opens an additional color picker for the user to choose specific colors that are not present in the predefined range.

Usage

The palette is intended for users, who don't want to check and remember the different values of the colors and spend large amount of time to configure the right color through the color picker. For the ui5-color-palette-popover

ES6 Module Import

import @ui5/webcomponents/dist/ColorPalettePopover.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
defaultColor
default-color
CSSColor
Defines the default color of the component. Note: The default color should be a part of the ColorPalette colors
showDefaultColor
show-default-color
boolean
false
Defines whether the user can choose the default color from a button.
showMoreColors
show-more-colors
boolean
false
Defines whether the user can choose a custom color from a component. Note: In order to use this property you need to import the following module: "@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js"
showRecentColors
show-recent-colors
boolean
false
Defines whether the user can see the last used colors in the bottom of the component

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 content of the component.

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