Intro
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:
- Users need to be able to select any color. Use the color picker or color picker popover instead.
- Selecting a color from a predefined palette is the typical case, but users should still be able to define their own colors. Use the color palette popover instead.
Components
- A link to select the default color (optional).
- The color palette, consisting of 2 to 15 color buttons.
- A link that opens a color picker in a dialog (optional).
- 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 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.
With the liveChange event, 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.
Hovering over a color provides a visual feedback.
To navigate between different colors on a keyboard, use the arrow keys.
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
Elements and Controls
- Color Palette Popover (guidelines)
- Color Picker (guidelines)
- Color Picker Popover (guidelines)
Implementation
- Color Palette (SAPUI5 samples)
- Color Palette (SAPUI5 API reference)
Visual Design
- Color Palette (visual design specification)
Elements and Controls
- Color Palette Popover (guidelines)
- Color Picker (guidelines)
- Color Picker Popover (guidelines)
Implementation
- Color Palette (SAPUI5 samples)
- Color Palette (SAPUI5 API reference)