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