How To Use Semantic Colors / Industry-Specific Colors

Intro

You can use semantic colors and industry-specific colors to visualize the status or state of business data:

Semantic colors denote standard value states (such as good, bad, or neutral). Each color has the same basic meaning in all contexts.

Industry-specific colors reflect the color conventions in a line of business or industry. The meaning of each color depends on the business context.
In SAPUI5, industry-specific colors are called generic indication colors.

Nearly all input controls support semantic colors, while industry-specific colors are only supported by a few UI elements.

Overview

Semantic Colors

Bad / error value state

Warning / critical value state

Good / positive value state

Neutral value state

Information value state

Industry-Specific Colors

SAP Fiori has five generic indication colors that are intended only for industry-specific use cases. You can associate these colors with a specific meaning in a given industry context (for example, to reflect industry standards).

Each application must clearly communicate the meaning of each color. In addition to using a color, you must also provide a text, such as an object status. All colors require a corresponding descriptive text for accessibility purposes.

Examples

You want the user to acknowledge a message, but no further action is required. Use the neutral information message box.

Information message

Information

This color is used for an information state.

Use the information semantic color if:

You want to draw attention to a control for an important purpose, such as visualizing the recommendations from intelligent systems in input fields.

You want to highlight newly added items, such as a new table row.

Do not use the information semantic color if:

The user input was validated and a problem occurred. Depending on the severity, use the warning or error state instead.

You want to highlight something positive. Use the good/positive color instead.

You want to highlight an information text. The blue text color is explicitly reserved for links.

Examples

The first row has just been added to the table. This is highlighted using the information color.

Row for a newly added item is highlighted for information

The input field is highlighted to draw attention to a system recommendation.

Input field with information state

Using Industry-Specific Colors

There is no predefined meaning for the individual colors in the generic palette. If you want to use one or several colors from the industry-specific color palette in your application, proceed as follows:

Define the meaning for each color you want to use.

Whenever you use an color, provide an additional text indicator (such as an object status) to ensure that the text is clear and accessible.

Once you have defined the meaning for a color, use the color/meaningconsistently within your application.

Color Overlap

By default, some colors are the same in the both the semantic palette and the industry-specific color palette (such as red, orange, green, and blue). This is intended. However, the two color palettes can be themed independently, which means that end users might not see the same colors in both.

No Palette Mix

Some UI elements support both the semantic color palette and the industry-specific color palette. However, you can only use one color palette at a time. It is not possible to mix different colors from both palettes.

Color Hierarchy

If an UI element would have multiple semantic or industry-specific color statuses at the same time, the control may need to determine an “overall color” at first.
In this case, the overall color is based on the color hierarchy: colors higher up in the hierarchy take precedence over those lower down. Note that there is only one hierarchy for both semantic colors and industry-specific colors.