The color palette popover encapsulates the color palette and the color picker within a popover. You can use it to offer color selectors on toolbars (for example, triggered by a button). The popover allows users to select one of up to predefined 15 colors, or define any other color in a second step if none of the predefined colors fit.
The color palette popover is also used inside the rich text editor for changing text and background colors.
Use the color palette popover if:
- Selecting a color from a predefined palette is the typical case.
- Users may sometimes need to define their own colors, but in most cases a predefined color or default color is sufficient.
- Selecting a color is needed as a toolbar action. In this case, use a button or menu button to trigger the color palette popover.
Do not use the color palette popover if:
The color palette popover consists of:
- 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.
Behavior and Interaction
To select a color, users can:
- Click the Default Color link.
- Select a color in the predefined color palette or from the recent colors.
- Click More Colors… to select any other color. This opens the color picker.
- With the
liveChangeevent, the color change can have an immediate effect and allows app developers to be aware of real-time color changes before they close the popover that contains it.
On a keyboard, users can navigate within the color palette popover using the arrow keys. Pressing
ENTER selects a color or triggers a link.
As soon as a color has been selected, the color palette popover closes automatically.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.