UI Elements User Input Color Palette

Updated: May 5, 2021
SAPUI5 Version 1.84

Color Palette

sap.m.ColorPalette

Intro

You can use the color palette to let users choose a color from a predefined set of colors. The colors are fixed and do not change with the theme.

Color palette
Color palette

Usage

Use the color palette if:

  • The user needs to select one color from a predefined set of colors.
  • The color set contains between 2 and 15 predefined colors.
  • There is no need to offer additional colors.

Do not use the color palette if:

Responsiveness

The color palette supports cozy and compact content densities.

Size S
Size S
Size M
Size M
Size L
Size L

Components

  • A link to select the default color (optional).
  • The color palette, consisting of 2 to 15 color buttons.
  • Recent colors (optional). Users can see the last 5 colors they have recently picked. This function helps users to select colors that they have already chosen from the color picker. By default, this feature is visible.
Color palette with all optional features
Color palette with all optional features
Color palette with 15 colors and just one recent color
Color palette with 15 colors and just one recent color

Behavior and Interaction

Users can select a color with the left mouse button, the tap gesture, or by pressing SPACE or ENTER on a keyboard. The selected color is not indicated in the control itself.

Hovering over a color provides a visual feedback.

To navigate between different colors on a keyboard, use the arrow keys.

Visual feedback on hover
Visual feedback on hover

Guidelines

  • Show the selected color in another place. The color palette does not visualize the selected color.
  • Label the color palette.
  • If you do not want to show the color palette in-place, consider the color palette popover instead.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation