The color palette popover encapsulates the color palette and the color picker within a popover.

Color palette popover – live example

When to Use

Use the color palette popover:

• To let users select a color from a predefined palette (typical use case).
• If users typically select a predefined color, but may also need to define their own colors.
• If you need to offer color selection as an action in a toolbar.

Don’t use the color palette popover:

• For selecting a color directly on the page. Use the color palette or the color picker instead.
• If users will nearly always define a color of their own, and rarely use the predefined palette. In this case, use the color picker instead.

Anatomy

1. Color palette container: Contains all activated elements.
2. “Default Color” button (optional): This button allows users to select or revert to a predefined default color.
   For the default color, use one of the predefined colors in the swatch container.
3. Swatch container: A set of predefined colors for easy selection.
   You can define between 2 and 15 colors.
4. Swatch: Single color, part of the palette.
5. “More Colors…” button (optional): Opens the color picker.
6. Recent colors (optional): Section displaying the last 5 colors picked.

Behavior and Interaction

Opening and Closing a Color Palette Popover

The color palette popover opens when the user clicks on a triggering text link or button.

The color palette popover closes when the user clicks outside the popover or selects a color within the popover.

Selecting a Color

The user can select a color in the following ways:

• Click Default Color to select the predefined default color
• Select a color from the predefined color palette
• Click More Colors… to select a color using the color picked
• Select one of the the recent colors

Color palette popover – live example

Responsive Behavior

On a phone, the color palette popover turns into a full screen dialog.

Related Links

The color palette allows users to select a color from a predefined set of colors.

Color palette – live example

When to Use

Use the color palette:

• If typically need to select a color from a given set of colors.

Don’t use the color palette:

• If users typically need to select the color freely. Use the color picker instead.

Anatomy

The color picker consists of the following elements:

1. Swatch: Single color, part of the palette.

Applications can define the available colors.

Related Links

Curious to learn more about SAP Business AI? We’ve got you covered!

• All about SAP Business AI 
  • SAP AI Ethics
  • SAP’s Generative AI Assistant Joule

• All about SAP Design
  • SAP User Research Panel

• Learn & grow your career with SAP
  • SAP TechEd 2023 Replays
  • SAP Learning Hub

We are excited to share our first set of design guidelines for generative AI with the world.

These guidelines are just the beginning though, and we will evolve them quickly as we learn more about generative AI and how to create intuitive, trustworthy user experiences. Generative AI is evolving, and bringing new paradigm shifts in UX. We also recommend the following resource to start diving deeper into our strategy:

• Watch SAP’s Business Application Keynote with our Chief Design Officer at SAP TechEd 2023

Your experience matters to us!

• Join our new SAP User Research Panel.
  We believe that better experiences start with listening. That means we are engaging customers, partners, and end users to ensure all SAP products are beautiful, inclusive, and easy to use. Help optimize SAP’s product UX and development.

• Get in touch with our team via Email.
  The more you know, the more you know you don’t know (Aristotle). We invite everyone from the community of practitioners across the globe to provide us with feedback on our design guidelines for generative AI. Let’s build on each others’ ideas.