Colors

Intro

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

Color Balance

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.

Primary Colors

The recommended primary colors leverage the uniqueness of SAP Fiori apps. The standard theme colors are chosen to work with the SAP semantic color palettes.

Brand Blue

#009DE0
RGB 0/157/224

Highlight Blue

#007CC0
RGB 0/124/192

Deep Gray

#363E43
RGB 54/62/67

White

#FFFFFF
RGB 255/255/255

Light Gray

#F2F2F2
RGB 242/242/242

Medium Gray

#E5E5E5
RGB 229/229/229

Accent Colors

You can use accent colors to highlight or decorate individual elements. They make a vivid contribution to the overall UI and should be used sparingly.

#F0AB00
RGB 240/171/0

#007CC0
RGB 0/124/192

#AB218E
RGB 171/33/142

#004990
RGB 0/73/144

Grayscale

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

#FFFFFF
RGB 255/255/255

#F7F7F7
RGB 247/247/247

#F2F2F2
RGB 242/242/242

#E5E5E5
RGB 229/229/229

#CCCCCC
RGB 204/204/204

#BFBFBF
RGB 191/191/191

#999999
RGB 153/153/153

#666666
RGB 102/102/102

#333333
RGB 51/51/51

#000000
RGB 0/0/0