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.