Color plays a significant role in SAP Fiori. Color communicates importance and association, and provides direction to users.

Color Balance

Color balance refers to the recommended mixture of light and dark, colored and non-colored areas of any SAP Fiori app interface.

Approaching the ideal color balance for each page creates a visual rhythm throughout the application. It also helps to draw the user’s attention to the most important information and functions. Furthermore, it promotes a distinct and consistent look and feel throughout all SAP Fiori apps.

Primary Colors

The recommended primary colors leverage the uniqueness of SAP Fiori apps. The primary colors represent the overall look and feel.

SAP Fiori Standard Theme Primary Colors

SAP Fiori Launchpad Gradients

Semantic Colors

Semantic colors can be used to represent negative, critical, positive and neutral status. For more information, see How to Use Semantic Colors.

Light Theme Flavor

Dark Theme Flavor

Accent Colors

Accent colors can be applied to accentuate important elements. They make a vivid contribution to the overall UI and should be used sparingly.

Grayscale

Grayscale areas play an important role in any SAP Fiori user interface. They minimize the risk of over-stimulation and foster simplicity. White and the light grays are mainly used for areas in the background or for borders. While darker gray shades are primarily used for texts.