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.

Dark Theme

 

With Android Q, dark theme may be enabled through the Android settings. Dark theme reduces the amount of luminescence emitted from the screen which may reduce eye strain and conserve battery power while still meeting the requirements for color contrast ratios. The SAP Fiori for Android SDK uses the dark theme that aligns with Fiori branding so that there is continuity between both light and dark theme.

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.

Light Theme

Sample Name Hex Usage
Primary #354A5F App bar background
Secondary #0A6ED1 Buttons
Tertiary #23303E System bar
Surface #FFFFFF Surface color

Dark Theme

Sample Name Hex Usage
Primary #27313B App bar background
Secondary, Secondary Selected #91C8F6 Buttons, selected controls
Tertiary #1C2228 System bar

Elevation

In light theme, the drop shadow represents the elevation of the components. However, in dark theme, elevated components are illuminated to simulate how materials in higher elevation are lighter in color. Please refer to this table for the elevation colors for dark theme.

Dark Theme

Sample Name Hex Usage
0dp elevation #1C2228 with #91C8F6 at 5% opacity Standard surface color
1dp elevation #1C2228 with #91C8F6 at 5% opacity Card, search bar, switch
2dp elevation #1C2228 with #91C8F6 at 7% opacity Contained button
3dp elevation #1C2228 with #91C8F6 at 8% opacity N/A
4dp elevation #1C2228 with #91C8F6 at 9% opacity App bar
6dp elevation #1C2228 with #91C8F6 at 11% opacity Floating action button
8dp elevation #1C2228 with #91C8F6 at 12% opacity Menus, standard bottom sheet, side sheet
12dp elevation #1C2228 with #91C8F6 at 14% opacity Floating action button (pressed)
16dp elevation #1C2228 with #91C8F6 at 15% opacity Modal bottom sheet, modal side sheet
24dp elevation #1C2228 with #91C8F6 at 16% opacity Dialog

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.

Light Theme

Sample Name Hex Usage
Main on Surface #32363A Title, subtitle, body, input text
Support on Surface #6A6D70 Labels, non-interactive icons
Minor on Surface #74777A Placeholder text in form cells
Secondary #0A6ED1 Hyperlinks
Main on Primary and Secondary #FFFFFF Text on Primary and Secondary

Dark Theme

Sample Name Hex Usage
Main on Surface #FAFAFA Title, subtitle, body, input text
Support on Surface #D3D7D9 Labels, non-interactive icons
Minor on Surface #B8BEC1 Placeholder text in form cells
Secondary #91C8F6 Hyperlinks
Main on Primary #FFFFFF Text on Primary
Main on Secondary #1C2228 Text on Secondary

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
Negative #BB0000 Negative color for text, borders, background, etc.
Critical #E9730C Critical color for text, borders, background, etc.
Positive #107E3E Positive color for text, borders, background, etc.
Neutral #6A6D70 Neutral color for text, borders, background, etc.

Dark Theme

Sample Name Hex Usage
Negative #FFEBEB Negative color for text, borders, background, etc.
Critical #FEF7F1 Critical color for text, borders, background, etc.
Positive #F1FDF6 Positive color for text, borders, background, etc.
Neutral #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.

Light Theme

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

Dark Theme

Sample Name Hex Usage
Divider #668696A9 or #8696A9 at 40% opacity Divider lines
Non-Interactive Icons #D3D7D9 Color of icons that do not have an action. Not to be confused with the disabled state.