- SAPUI Version 1.124
- SAPUI5 Version 1.122
- SAPUI5 Version 1.120
- SAPUI5 Version 1.118
- SAPUI5 Version 1.116
- SAPUI5 Version 1.114
- SAPUI5 Version 1.112
- SAPUI5 Version 1.110
- SAPUI5 Version 1.108
- SAPUI5 Version 1.106
- SAPUI5 Version 1.104
- SAPUI5 Version 1.102
- SAPUI5 Version 1.100
- SAPUI5 Version 1.98
- SAPUI5 Version 1.96
- SAPUI5 Version 1.94
- SAPUI5 Version 1.92
- SAPUI5 Version 1.90
- SAPUI5 Version 1.88
- SAPUI5 Version 1.86
- SAPUI5 Version 1.84
- SAPUI5 Version 1.82
- SAPUI5 Version 1.80
- SAPUI5 Version 1.78
- SAPUI5 Version 1.76
- SAPUI5 Version 1.74
- SAPUI5 Version 1.72
- SAPUI5 Version 1.70
- SAPUI5 Version 1.68
- SAPUI5 Version 1.66
- SAPUI5 Version 1.64
- SAPUI5 Version 1.62
- SAPUI5 Version 1.60
- SAPUI5 Version 1.58
- SAPUI5 Version 1.56
- SAPUI5 Version 1.54
- SAPUI5 Version 1.52
- SAPUI5 Version 1.50
- SAPUI5 Version 1.48
- SAPUI5 Version 1.46
- SAPUI5 Version 1.44
- SAPUI5 Version 1.42
- SAPUI5 Version 1.40
- SAPUI5 Version 1.38
- SAPUI5 Version 1.36
- SAPUI5 Version 1.34
- SAPUI5 Version 1.32
- SAPUI5 Version 1.30
- SAPUI5 Version 1.28
- SAPUI5 Version 1.26
- Latest Version 1.126
- SAPUI Version 1.124
- SAPUI5 Version 1.122
- SAPUI5 Version 1.120
- SAPUI5 Version 1.118
- SAPUI5 Version 1.116
- SAPUI5 Version 1.114
- SAPUI5 Version 1.112
- SAPUI5 Version 1.110
- SAPUI5 Version 1.108
- SAPUI5 Version 1.106
- SAPUI5 Version 1.104
- SAPUI5 Version 1.102
- SAPUI5 Version 1.100
- SAPUI5 Version 1.98
- SAPUI5 Version 1.96
- SAPUI5 Version 1.94
- SAPUI5 Version 1.92
- SAPUI5 Version 1.90
- SAPUI5 Version 1.88
- SAPUI5 Version 1.86
- SAPUI5 Version 1.84
- SAPUI5 Version 1.82
- SAPUI5 Version 1.80
- SAPUI5 Version 1.78
- SAPUI5 Version 1.76
- SAPUI5 Version 1.74
- SAPUI5 Version 1.72
- SAPUI5 Version 1.70
- SAPUI5 Version 1.68
- SAPUI5 Version 1.66
- SAPUI5 Version 1.64
- SAPUI5 Version 1.62
- SAPUI5 Version 1.60
- SAPUI5 Version 1.58
- SAPUI5 Version 1.56
- SAPUI5 Version 1.54
- SAPUI5 Version 1.52
- SAPUI5 Version 1.50
- SAPUI5 Version 1.48
- SAPUI5 Version 1.46
- SAPUI5 Version 1.44
- SAPUI5 Version 1.42
- SAPUI5 Version 1.40
- SAPUI5 Version 1.38
- SAPUI5 Version 1.36
- SAPUI5 Version 1.34
- SAPUI5 Version 1.32
- SAPUI5 Version 1.30
- SAPUI5 Version 1.28
- SAPUI5 Version 1.26
Belize Colors
Intro
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 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.
Belize Theme Primary Colors
Primary 1
Global Contrast Base
#3F5161
RGB 63/81/97
Primary 2
Brand / Highlight
#427CAC
RGB 66/124/172
Based on Primary 2
Contrast Highlight
#91C8F6
RGB 145/200/246
Primary 3
Global Light Base
#EFF4F9
RGB 239/244/249
Primary 4
Containers
#FFFFFF
RGB 255/255/255
Primary 5
Application Content Background
#FAFAFA
RGB 250/250/250
Primary 6
Borders and Derived Controls
#BFBFBF
RGB 191/191/191
Primary 7
Titles and Texts
#333333
RGB 51/51/51
SAP Fiori Launchpad Gradient
Top
Contrast Theme
#2C4E6C
RGB 44/78/108
Bottom
Contrast Theme
#9EC7D8
RGB 158/199/216
Top
Light Theme
#A9C6DE
RGB 169/198/222
Bottom
Light Theme
#E7ECF0
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.
Accent Color 1
Accent Colors
#E09D00
RGB 224/157/0
Accent Color 2
Accent Colors
#E6600D
RGB 230/96/13
Accent Color 3
Accent Colors
#C14646
RGB 193/70/70
Accent Color 4
Accent Colors
#AB218E
RGB 171/33/142
Accent Color 5
Accent Colors
#678BC7
RGB 103/139/199
Accent Color 6
Accent Colors
#0092D1
RGB 0/146/209
Accent Color 7
Accent Colors
#1A9898
RGB 26 152 152
Accent Color 8
Accent Colors
#759421
RGB 117/148/33
Accent Color 9
Accent Colors
#925ACE
RGB 146/90/206
Accent Color 10
Accent Colors
#647987
RGB 100/121/135
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. Darker gray shades are primarily used for texts.
#333333
RGB 51/51/51
#666666
RGB 102/102/102
#BFBFBF
RGB 191/191/191
#CCCCCC
RGB 204/204/204
#E5E5E5
RGB 229/229/229
#FFFFFF
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
Negative
Light Semantic Colors
#BB0000
RGB 187/0/0
Critical
Light Semantic Colors
#E78C07
RGB 231/140/7
Positive
Light Semantic Colors
#2B7D2B
RGB 43/125/43
Neutral
Light Semantic Colors
#5E696E
RGB 94/105/110
Information
Light Semantic Colors
#427cac
RGB 66/124/172
Semantic Colors – Dark Flavor Values
Negative
Dark Semantic Colors
#FF8888
RGB 255/136/136
Critical
Dark Semantic Colors
#FABD64
RGB 250/189/100
Positive
Dark Semantic Colors
#ABE2AB
RGB 171/226/171
Neutral
Dark Semantic Colors
#D3D7D9
RGB 211/215/217
Information
Dark Semantic Colors
#91c8f6
RGB 145/200/246
Indication Colors
The indication color palette is used to follow the color conventions in a line of business or industry. All values are themeable and the meaning of each color depends on the business context. For more information, see How To Use Semantic Colors / Industry-Specific Colors.
Light Flavor Values
UI Indication 1
Light Indication Colors
#880000
RGB 136/0/0
UI Indication 2
Light Indication Colors
#bb0000
RGB 171/34/23
UI Indication 3
Light Indication Colors
#E78C07
RGB 219/144/52
UI Indication 4
Light Indication Colors
#2B7C2B
RGB 67/122/54
UI Indication 5
Light Indication Colors
#427CAC
RGB 80/123/168
UI Indication 6
Light Indication Colors
#1a9898
RGB 26/152/152
UI Indication 7
Light Indication Colors
#925ace
RGB 146/90/206
UI Indication 8
Light Indication Colors
#ab218e
RGB 171/33/142
Dark Flavor Values
UI Indication 1
Dark Indication Colors
#FF8888
RGB 255/136/136
UI Indication 2
Dark Indication Colors
#FFBBBB
RGB 255/187/187
UI Indication 3
Dark Indication Colors
#FABD64
RGB 250/189/100
UI Indication 4
Dark Indication Colors
#ABE2AB
RGB 171/226/171
UI Indication 5
Dark Indication Colors
#91c8f6
RGB 145/200/246
UI Indication 6
Dark Indication Colors
#7fc6c6
RGB 26/152/152
UI Indication 7
Dark Indication Colors
#b995e0
RGB 146/90/206
UI Indication 8
Dark Indication Colors
#e269c9
RGB 171/33/142
Related Links
SAP Fiori uses a variety of colors. They are mapped to control parameters, thus allowing you to overwrite them easily in the UI Theme Designer.
WCAG target versions for SAP’s visual themes.