Color Palette Popover

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

Color palette popover – live example

When to Use

Do

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

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.
Anatomy of a color palette popover
Anatomy of a color palette popover

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 picker.
  • Select one of the the recent colors.
Information
When the user selects More Colors…, the color preselected in the color picker is the last color that was chosen or used in the color palette. If no color is selected in the color palette popover, white is preselected in the color picker.
Color palette popover – live example

Responsive Behavior

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

Color palette popover on a phone
Color palette popover on a phone

Related Links

Implementation

Color Palette

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

Color palette – live example

When to Use

Do

Use the color palette:

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

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.

Anatomy of a color palette
Anatomy of a color palette

Related Links

Components

  • No links.

Implementation

AI Design – Get in Touch With Us

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:


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.

System Information Bar

With SAP S/4HANA Cloud, customers and partners receive a three-system landscape: a development system, a test system, and a production system.

The system information bar in the development and test systems allows users to quickly identify the system they are using. The system information bar is located above the shell bar. By default, the system information bar is turned on in all non-production systems.

The administrators can change the default icons and color of the system information bar, see “Icons and Colors“, in the SAP Fiori launchpad settings. They can also switch off the system information bar.

Components

The system information bar contains the following components:

  1. System type in the form of an icon, such as development system
  2. Tenant type, such as development or customizing tenant
  3. System ID/Client ID

Responsiveness

The system information bar is responsive.

System information bar on desktop
System information bar on desktop
System information bar on phone
System information bar on phone

Icons and Colors

The following table shows all system types and tenant types with their default icons and colors. The system information bar is supported in all themes.

Systems with their default icon and color
Systems with their default icon and color

Resources

Want to dive deeper? Follow the links below to find out more about related controls.