Using Semantic and Industry-Specific Colors

Foundations / Best Practices / UI Elements / Using Semantic and 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 warning). 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 indication colors.

Object status with industry-specific colors

Object status with industry-specific colors

Object status with semantic colors

Object status with semantic colors

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

For information about the color values for other themes, see Belize Colors and Quartz Light Colors.

When to Use

Semantic Colors

Use semantic colors if:

You want to highlight an important status.
You want to validate fields using form field validation.
Your app needs message handling.
You want to use the value states for a control.

Don’t use semantic colors if:

The color has no meaning and is used only for decoration.
You want to use colors in an industry-specific context, where the meaning of the colors differs from the standard semantic meaning. Use the industry-specific colors instead.

Industry-Specific Colors

Use industry-specific colors if:

You want to use a color based on industry conventions (for example, when the meaning of a color is defined in an industry standard).

Don’t use industry-specific colors if:

The color has no meaning and is used only for decoration.
No special industry color conventions apply. Use the standard semantic colors instead.

Semantic Colors

SAP Fiori has five semantic colors, which are associated with the following predefined value states:

Regular (neutral)
Good (positive)
Warning (critical)
Bad (error)
Information (highlight)

Semantic checkbox states

Semantic checkbox states

Using Semantic Colors

Only use a semantic color if you need to convey the meaning (value state) defined for that color. For more information, see Value States.

Regular (neutral)

Use this color as the regular, neutral state of all UI elements.

Radio button, step input, and input in regular state

Radio button, step input, and input in regular state

Good / Positive

This color stands for a good, positive situation, or for the successful completion of a task.

Radio button, step input, and input in positive state

Radio button, step input, and input in positive state

Warning / Critical

This color indicates a critical situation or warning.

Radio button, step input and input in warning state

Radio button, step input and input in warning state

Bad / Error

Use this color for errors, or to indicate a bad or negative status or consequence.

Radio button, step input and input in error state

Radio button, step input and input in error state

Information

Use this color for an information state.

Radio button, step input and input in information state

Radio button, step input and input in information state

Semantic Usage

Sometimes components use semantic colors that are not linked to a specific value state. For example, some button components use lighter semantic colors for semantic actions like “Approve” and “Reject”.

Industry-Specific Colors

SAP Fiori has two sets with ten generic indication colors each 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.

Object status with five industry-specific colors

Object status with five industry-specific colors

Object status with three industry-specific colors

Object status with three industry-specific colors

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.

The indication color palette is supported exclusively by tables and the object status.

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 a 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/meaning consistently within your application.

Color Overlap

By default, some colors are the same in 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 a 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.

Color hierarchy