Updated: June 6, 2019



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.

Color balance (considering dark and light UIs)
Color balance (considering dark and light UIs)

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

Global Dark Base

RGB 63/81/97

Brand / Highlight

RGB 66/124/172

Brand / Highlight

Dark Theme
RGB 145/200/246

Global Light Base

RGB 239/244/249


RGB 250/250/250

SAP Fiori Launchpad Gradients


 Dark Theme
RGB 44/78/108


 Dark Theme
RGB 158/199/216


 Light Theme
RGB 169/198/222


Light Theme
RGB 231/236/240

Semantic Colors

Semantic colors can be used to represent negative, critical, positive and neutral status.

Light Theme Flavor


RGB 187/0/0


RGB 231/140/7


RGB 43/125/43


RGB 94/105/110

Dark Theme Flavor


RGB 255/136/136


RGB 250/189/100


RGB 171/226/171


RGB 211/215/217

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.

RGB 224/157/0

RGB 230/96/13

RGB 193/70/70

RGB 171/33/142

RGB 103/139/199

RGB 0/146/209

RGB 26 152 152

RGB 117/148/33


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.

RGB 51/51/51

RGB 102/102/102

RGB 191/191/191

RGB 204/204/204

RGB 229/229/229

RGB 255/255/255