Updated: February 13, 2020

Belize Colors


Belize is a visual theme we provide for SAP Fiori applications, in addition to the standard Quartz Light theme. 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, and 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 across all SAP Fiori apps.

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

Color Usage

Each theme is based on a set of individual base reference values. These are:

  • Primary (main user interface colors)
  • Secondary (accent colors)
  • Grayscale (neutral values)
  • Semantic (value state colors)

The reference colors listed on this page give a helpful indication as to where they are used in the UI controls and layouts. However, it is extremely important that reference values are not used directly in the control styling. The Belize reference color values are specific to this particular theme, but are assigned to control parameters.

The reference colors are used as base values, which are then distributed into the UI controls via a stable set of theme control parameters that are available in each theme. Theme control parameters represent semantically named parts of the controls. They are decoupled from the actual color values so that the color values can be easily replaced. The theming guideline explains how these reference values are mapped to the user interface controls.

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

Primary 1
Global Contrast Base

RGB 63/81/97

Primary 2
Brand / Highlight

RGB 66/124/172

Based on Primary 2
Contrast Highlight

RGB 145/200/246

Primary 3
Global Light Base

RGB 239/244/249

Primary 4

RGB 255/255/255

Primary 5
Application Content Background

RGB 250/250/250

Primary 6
Borders and Derived Controls

RGB 191/191/191

Primary 7
Titles and Texts

RGB 51/51/51

SAP Fiori Launchpad Gradient


 Contrast Theme
RGB 44/78/108


 Contrast Theme
RGB 158/199/216


 Light Theme
RGB 169/198/222


Light Theme
RGB 231/236/240

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

RGB 146/90/206

RGB 100/121/135


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. 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

Semantic Colors

Semantic colors can be used to represent a negative, critical, positive, neutral, or information status. For more information, see How To Use Semantic Colors / Industry-Specific Colors.

Semantic Colors – Light Flavor Values


RGB 187/0/0


RGB 231/140/7


RGB 43/125/43


RGB 94/105/110


RGB 66/124/172

Semantic Colors – Dark Flavor Values


RGB 255/136/136


RGB 250/189/100


RGB 171/226/171


RGB 211/215/217


RGB 145/200/246