Intro

Color sets the tone of the app and is a tool for communication. It helps with defining hierarchy for certain elements within an app and helps direct the users to where they need to go.

For SAP Fiori for Android, we use the same colors as SAP Fiori for Web in order to keep the branding consistent and utilize how they’re applied to create a harmonious UI.

Color Balance

Color balance refers to the recommended mixture of light and dark to achieve an even and proportional use of contrast.

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.

Main Colors

The main colors that are applied in SAP Fiori for Android use the Material Design logic and Fiori branding together to maintain visual consistency and effective communication.

Sample Name Hex Usage
sapUiBaseColor #354A5F App bar background
sapUiBaseBG #FAFAFA Canvas color
sapUiPageFooterBackground #23303E System bar

Text Colors

The colors used for the typography in SAP Fiori for Android are selected to ensure accessibility. For accessibility purposes, it’s best to have high color contrast so that text on a background is still legible. 4.5:1 is the minimum, while 7:1 is preferred.

These text colors will work on the appropriate SAP Fiori for Android background color.

Sample Name Hex Usage
sapUiBaseText #32363A Text on light background
sapUiBaseText #FFFFFF Text on dark background
sapUiContentLabelColor #6A6D70 Labels, bylines, descriptions
sapUiLink #0A6ED1 Hyperlinks

Button Colors

The colors used in buttons depend on the button type as well as the state of the button.

Sample Name Hex Usage
sapLinkColor #0A6ED1 Button background color for contained buttons, text color for text buttons
Pressed Contained Button #3185D8 Generated by adding a 16% white overlay on top of sapUiLink. Color for pressed contained buttons. Ripple color for contained buttons
Pressed Text Button #E1EDF9 Generated by using 12% of sapUiLink on top of white. Color for pressed text buttons and outlined buttons. Ripple color for text buttons and outlined buttons

Semantic Colors

Semantic colors can be used to call attention to important information and represent negative, critical, positive, and neutral status.

Light Theme

Sample Name Hex Usage
sapUiNegativeElement #BB0000 Negative color for text, borders, background, etc.
sapUiCriticalElement #E9730C Critical color for text, borders, background, etc.
sapUiPositiveElement #107E3E Positive color for text, borders, background, etc.
sapUiNeutralElement #6A6D70 Neutral color for text, borders, background, etc.

Dark Theme

Sample Name Hex Usage
sapUiNegativeElement #FFEBEB Negative color for text, borders, background, etc.
sapUiCriticalElement #FEF7F1 Critical color for text, borders, background, etc.
sapUiPositiveElement #F1FDF6 Positive color for text, borders, background, etc.
sapUiNeutralElement #F4F4F4 Neutral color for text, borders, background, etc.

Accent Colors

Accent colors are used to work with SAP Fiori for Android’s color scheme for elements that support the content like dividers, bars, and so on. Check the specific component for how the colors should be applied.

Sample Name Hex Usage
sapUiListBorderColor #EEEEEF Divider lines
sapUiContentNonInteractiveIconColor #6A6D70 Color of icons that do not have an action. Not to be confused with the disabled state.