This guideline now covers both SAPUI5 and SAP Web Components. Learn more.
Information
Icon
false

Intro

The color palette popover is a UI component that contains the color palette and the color picker within a popover. Use it to provide color selection in toolbars (for example, triggered by a button). The popover supports selecting from up to 15 predefined colors or defining a custom color if needed.

The color palette popover is also used inside the rich text editor for changing text and background colors.

Color palette popover

Component availability

The color palette popover component is available in the following libraries:

<div> <div data-valign="middle">Library</div> <div data-valign="middle">Technical Name</div> <div data-valign="middle">Identifier</div> </div> <div> <div data-valign="middle">SAPUI5 Demo Kit</div> <div><a href="https%3A%2F%2Fui5.sap.com%2F%23%2Fentity%2Fsap.m.ColorPalette">sap.m.ColorPalette</a></div> <div data-valign="middle">:badge, info, large, _, SAPUI5:</div> </div> <div> <div data-valign="middle">SAP Web Components</div> <div data-valign="middle"><a href="https%3A%2F%2Fui5.github.io%2Fwebcomponents%2Fcomponents%2FColorPalettePopover%2F">ui5-color-palette-popover</a></div> <div data-valign="middle">:badge, info, large, _, SAP Web Components:</div> </div> <div> <div data-valign="middle">SAP Web UI Kit (Figma)</div> <div data-valign="middle"><a href="https%3A%2F%2Fwww.figma.com%2Fdesign%2FSILcWzK5uFghKun9jx6D7c%2FSAP-Web-UI-Kit%3Fnode-id%3D405845-14872%26t%3DPYNfHFxqzW01fkSn-4">Color Palette Popover</a></div> <div data-valign="middle">:badge, info, large, _, Figma:</div> </div>
<div> <div data-valign="middle">Library</div> <div data-valign="middle">Technical Name</div> <div data-valign="middle">Identifier</div> </div> <div> <div data-valign="middle">SAPUI5 Demo Kit</div> <div><a href="https%3A%2F%2Fui5.sap.com%2F%23%2Fentity%2Fsap.m.ColorPalette">sap.m.ColorPalette</a></div> <div data-valign="middle">:badge, info, large, _, SAPUI5:</div> </div> <div> <div data-valign="middle">SAP Web Components</div> <div data-valign="middle"><a href="https%3A%2F%2Fui5.github.io%2Fwebcomponents%2Fcomponents%2FColorPalettePopover%2F">ui5-color-palette-popover</a></div> <div data-valign="middle">:badge, info, large, _, SAP Web Components:</div> </div> <div> <div data-valign="middle">SAP Fiori for Web UI Kit (Figma)</div> <div data-valign="middle"><a href="https%3A%2F%2Fwww.figma.com%2Fcommunity%2Ffile%2F1494295794601744471">Color Palette Popover</a></div> <div data-valign="middle">:badge, info, large, _, Figma:</div> </div>

When to Use

2
do
false

Use the color palette popover to:

  • Let users select a color from a predefined palette and define their own colors.
  • Enable color selection as part of a toolbar action. Use a button or menu button to trigger the color palette popover.
dont
false

Don’t use the color palette popover to:

  • Enable users to select colors directly on the page (for example, inside a form). Use the color palette or the color picker instead.
  • Address scenarios where users rarely use colors from a predefined palette and almost always define custom colors instead. In this case, use the color picker popover.
toptip
  • Use a button, link, or a value help icon from an input field to trigger the color palette popover.
  • Display the selected color in another location (for example, as a color value inside the triggering input field).
  • Selecting the default color applies the predefined application color. Default color availability and behavior are application-specific and optional.
  • The color picker displays the last 5 selected colors to support quick reselection.
  • Adding more than five colors overrides existing ones from left to right.
  • The color picker dialog uses white as a default color if no color is selected.
  • Display tooltips with the swatch name on hover.
  • Place the color palette popover in a responsive container to support different screen sizes.

Anatomy

  1. Color palette container: Contains all elements within the popover.
  2. Default Color button (optional): Supports selecting or reverting to a predefined default color. Use one of the predefined colors in the swatch container as the default color.
  3. Swatch container: A set of predefined colors for easy selection. Supports defining between 2 and 15 colors.
  4. Swatch: Single color, part of the palette.
  5. Recent colors (optional): Displays the last 5 selected colors.
  6. More Colors... button (optional): A link that opens a color picker in a dialog.

Color palette popover anatomy

Types

The color palette popover has five different types based on which anatomy elements are included:

А. Color palette popover with all anatomy elements
B. Color palette popover with Default Color button and recent colors section
C. Color palette popover with More Colors... button and recent colors section
D. Color palette popover with recent colors section
E. Color palette with color swatches for the predefined colors

Color palette popover types

States

Component states

The color palette popover has only one component state: enabled.

Enabled state: The swatches are interactive and can be used for color selection.

Enabled component state

For more information, see Component states.

Interaction states

The swatches have two interaction states: regular and hover.

A. Regular: The default state of the swatch.
B. Hover: Displays the hover state when the cursor is over an enabled swatch.

Regular and hover swatch states

The buttons have three interaction states: regular, hover, and down.

A. Regular: The default state of the button.
B. Hover: A state when the cursor of a pointing device is placed over an enabled button.

Regular and hover button states

C. Down: Displays the pressed state while the button is pressed.

Down button state

For more information, see Interaction States.

Selection states

The color palette popover has two selection states: unselected and selected.

A. Unselected: Displays the default state.
B. Selected: Indicates the selected element with a gray border.

Selection states

For more information, see Selection States.

Focus state

The focus state indicates which element is currently active. Keyboard and assistive technology users rely on the focus state to follow the interaction.

Focus: Appears as an additional blue border around the swatch.

Focus state

For more information, see Focus States.

Behavior and Interaction

Mouse interaction

Opening a color palette popover

The color palette popover supports triggering from elements such as a button or a link. The example below demonstrates a button as the triggering element.

A: The color palette popover is closed by default.
B: Hovering over a button or link shows the hover state.
C: Left-clicking the button applies down and focus states.
D: Releasing the button or link opens the color palette popover and moves focus to the Default Color button.

Opening a color palette popover

Selecting a default color

Selecting the default color applies the application's predefined color. The availability, behavior, and configuration of this default are application-specific and may not always be set.

A: When the user left-clicks the Default Color button, it receives a down state and keeps its focus.
B: After the user releases the click, the color palette popover closes, and the selected color applies.

Selecting the “Default Color” button

C: When the cursor is over the link or button, it receives hover state.
D: When the user reopens the color palette popover, the lately used default color goes in the list with recently used colors.

The selected default color appears in recent colors section upon reopening the color palette popover

Selecting a color from the predefined color palette

A: When the user moves the cursor over a color swatch, it receives a hover state.
B: When the user left-clicks the color swatch, it receives selected and focus states. After releasing the click, the color palette popover closes and the selected color applies.

Selecting a color swatch from the predefined color palette

After reopening the color palette popover, focus will return to the swatch that was last selected. Additionally, this color will be added to the recently used colors list.

Selecting a recent color

If colors have been selected previously, they appear below the main palette for reuse.

A: Clicking a swatch from the recently used colors list displays the selected state on that swatch and moves focus to it.
B: Releasing the click closes the color palette popover and applies the selected color.

Selecting a recent color from the color palette popover

If the user hasn't selected any colors, the recent colors section remains empty and cannot be interacted with.

Adding more colors

To add a color different from the predefined set, the user can use the More Colors... button which opens a color picker dialog. The additional colors will appear in the list with recent colors at the bottom of the color palette popover. The available color slots are limited to five and if the user adds more than five colors, the new colors override the existing ones from left to right.

A: When the user left-clicks the More Colors... button, it receives a down and focus states. The previously selected swatch remains in selected state but looses its focus.
B: After choosing the More Colors... button, the color picker dialog opens.

In both cases, all sliders and input fields display the corresponding values, and focus is automatically set to the hue slider handle.

Opening the color picker dialog

C: Moving the color picker circle updates the hue slider, hex code, color preview, and HSL(A) or RGB(A) values.
D: Clicking the OK button shows the pressed and focus states. Releasing the click closes the color picker dialog and applies the new color.

Changing color via the color picker

E: Reopening the color palette popover sets initial focus to the previously selected swatch. The recent colors list updates with the latest selection, replacing the oldest color from left to right.

Reopening the color palette sets initial focus to the previously selected swatch

Touch interaction

On touch devices, the behavior is similar to the mouse interaction, without the hover state.

For more information, see Gestures.

Tooltips

Display tooltips with the corresponding swatch name when users hover over swatches.

Color swatch tooltip

For more information, see Using Tooltips.

guideline

Predefined swatch colors are not themeable, but use their web-standard color names for tool-tipping. For custom colors, use one of the 140 standard web CSS colors. For non-standard colors, use hexadecimal color codes.

For more information, see Colors.

Responsiveness

The color palette popover supports cozy and compact content densities.

Compact (A) and cozy (B) content densities

The color palette popover is not responsive. Place it in a responsive container so it adapts to screen size.

For more information, see Content Density.

On mobile devices, the color palette popover expands to a full-screen dialog.

Color palette popover on mobile screen

Accessibility

SAP follows international standards, such as WCAG and WAI-ARIA, and strives to make our business solutions accessible and inclusive.

For more information, see Accessibility in SAP Fiori and the Accessibility Design Tools Handbook.

Keyboard navigation

The following keyboard combinations are supported by the color palette popover component.

<div> <div>Key Combination</div> <div>What it Does</div> </div> <div> <div><strong>Tab</strong></div> <div>Focus is on a swatch item, confirms the selection and closes the popup.<br>Focus is on <em>Default Color</em>, confirms the default color and closes the popup.<br>Focus is on <em>More Colors...</em>, closes the popup, <em>More colors</em> is not triggered, this action requires a dedicated <strong>Enter</strong> or <strong>Space</strong>. The previous color value is still valid, as a new color was not explicitly confirmed by the user via <strong>Enter</strong> or <strong>Space</strong>.</div> </div> <div> <div><strong>Shift + Tab</strong></div> <div>Same as <strong>Tab</strong> - confirms, and navigates the focus back to the UI element which triggered the color palette popover.</div> </div> <div> <div><strong>Space</strong> or <strong>Enter</strong></div> <div>Selects a color palette swatch item, confirms and closes the color palette popover. If focus is on the item <em>More Colors...</em> it triggers the link.</div> </div> <div> <div><strong>Esc</strong></div> <div>Cancels the task to select a color palette item, closes the popup and returns focus to the UI element which triggered the color palette popover.</div> </div> <div> <div><strong>Left Arrow</strong><br><strong>Up Arrow</strong><br><strong>Right Arrow</strong><br><strong>Down Arrow</strong></div> <div>Arrow keys navigate focus into the according direction of the key. The buttons <em>Default Color</em> and <em>More colors...</em> are handled as color palette items, these are also part of the arrow key navigation.</div> </div> <div> <div><strong>Home</strong></div> <div>Moves focus to the first item of the current row.<br>If the focus is already on the first item of the current row, move the focus onto the very first swatch of the popup, typically the <em>Default Color</em> item.</div> </div> <div> <div><strong>End</strong></div> <div>Moves focus to the last item of the current row.<br>If the focus is already on the last item, and the key is pressed again, move focus onto the last swatch item in the popup, typically the <em>More Colors</em> item.</div> </div>

Screen reader support

For additional details on screen reader support and Accessible Rich Internet Applications (ARIA), see UI5 Screen Reader Support and WAI-ARIA Authoring.

Framework Comparison

There are no differences between SAPUI5 and SAP Web Components regarding the component’s behaviors and framework-specific patterns.

Guidelines

Components
Color Palette
Color Picker
Color Picker Popover
Rich Text Editor

Implementation

SAPUI5
Color Palette Popover (samples)
Color Palette Popover (API reference)

UI5 Web Components
Color Palette Popover

Specifications

Color Palette Popover (visual design)

SAP Web UI Kit

Color Palette Popover (Figma)

Guidelines

Components
Color Palette
Color Picker
Color Picker Popover
Rich Text Editor

Implementation

SAPUI5
Color Palette Popover (samples)
Color Palette Popover (API reference)

UI5 Web Components
Color Palette Popover

UI Kit (Figma)

SAP Fiori for Web UI Kit / Color Palette Popover