Colors

Intro

Color sets the visual balance of SAP Fiori for Android apps. On screen, color is used to define the visual hierarchy of UI elements and to direct the user’s attention to complete their tasks.

Horizon Theme Color Palette

The Horizon theme color palette introduces a unified color palette that brings our brand and products together in order to achieve a cohesive experience across all SAP touchpoints.

The Horizon theme color palette is designed to provide bold and vibrant color while remaining accessible in instances with complex UIs.

Fiori Horizon color palette

Accessibility Logic

The Horizon color palette introduces nine tonal values across eight color hues of vibrant and bold color. To ensure that color combinations comply with WCAG accessibility standards, a system has been developed that enables designers and developers to easily create compliant color pairs.

Each color hue is made up of nine tonal values

3:1 Color Contrast

To achieve a minimum of 3:1 color contrast ratio, pairing any color that is four steps apart will achieve this. For example, pairing the fourth color with the eighth color in the spectrum ensures that the minimum color contrast ratio for large text, bold text, graphical objects, and user interface components is met.

Achieving 3:1 color contrast

4.5:1 Color Contrast

To achieve the minimum color contrast ratio of 4.5:1, pairing any color that is five steps apart will achieve this. For example, pairing the fourth color with the ninth color ensures that the minimum color contrast for normal text is met.

Achieving 4.5:1 color contrast

UI Colors

From the Horizon color palette a semantic name layer is added to help designers and developers decide which colors to use. UI colors are grouped according to their usage into the following five categories:

Surface Colors
Text Colors
Borders Colors
Semantic Colors
Accent Colors

Surface Colors

Surface colors are applied to the background of all components. To provide a sense of hierarchy, surface colors are identified by the letter S followed by a number sequence (e.g. S1, S2, S3).

Light Mode		Dark Mode		Name	Usage
	Base White #FFFFFF		Base Dark #14171A	S0-Background	Base Background (0dp)
	Base White #FFFFFF		Base Dark with Overlay Overlay: #7198BF	S1-Primary	Elevated Surfaces (1dp-24dp)
	Blue 5 #0070F2		Blue 4 #1B90FF	S2-Secondary	Call-to-Action Elements
	Grey 9 #111D29		Base White #FFFFFF	S3-Tertiary	Snackbar Background
	Grey 1 #F5F6F7		Grey 5 #5B738B, 20%	S4-Quarternary	Muted Backgrounds
	Blue 1 #EBF8FF		Grey 7 #354A5F	S5-Selected Surface	Selected Backgrounds

Text Colors

Text colors are applied to the text and icons of all components. Text colors are identified by the letter T followed by a number sequence (e.g. T1, T2, T3).

Light Mode		Dark Mode		Name	Usage
	Grey 8 #223548		Grey 1 #F5F6F7	T1-Main on Primary	Titles, Subtitles
	Grey 6 #475E75		Grey 2 #D5DADD	T2-Support on Primary	Body Text, Caption
	Grey 5 #5B738B		Grey 3 #A9B4BE	T3-Minor on Primary	Muted Text, Placeholder Text
	Blue 5 #0070F2		Blue 4 #1B90FF	T4-CTA on Primary	Tinted Text, Links, Interactive Icons
	Base White #FFFFFF		Grey 9 #111D29	T5-Main on Secondary	Text on S2-Secondary
	Blue 4 #1B90FF		Blue 5 #0070F2	T6-Main on Tertiary	Text on S3-Tertiary
	Blue 6 #0057D2		Blue 2 #89D1FF	T7-Selected Text	Selected Text on S5-Selected Surface

Border Colors

Border colors are applied to linear elements such as divider lines and the border line surrounding the text input field. Border colors are identified by the letter B followed by a number sequence (e.g. B1, B2, B3).

Light Mode		Dark Mode		Name	Usage
	Grey 2 #D5DADD		Grey 5 #5B738B 50%	B1-Section Divider	Divider lines
	Grey 4 #8396A8		Grey 4 #8396A8	B2-Default Border	Text field borders
	Blue 5 #0070F2		Blue 4 #1B90FF	B3-Selected Border	Selected text field borders
	Blue 5 #0070F2, 28%		Blue 4 #1B90FF, 36%	B4-Light Selected Border	Idle text field borders

Semantic Colors

Semantic colors are applied to any UI element that conveys an important status, state, or level of priority. Semantic colors can be identified by the following naming (e.g. negative, critical, positive, and neutral status).

Light Mode		Dark Mode		Name	Usage
	Green 5 #188918		Green 3 #5DC122	Positive	Semantic text
	Mango 5 #C35500		Mango 3 #FFB300	Critical	Semantic text
	Red 5 #D20A0A		Red 3 #FF5C77	Negative	Semantic text
	Grey 5 #5B738B		Grey 3 #A9B4BE	Neutral	Semantic text

Accent Colors

Accent colors provide an additional level of color luminance and are used to accent areas of the UI such as avatars, icons, and data visualizations. Accent colors are identified by the word “Accent” followed by a number sequence (e.g. Accent 1, Accent 2, Accent 3).

Light Mode		Dark Mode		Name
	Mango 5 #C35500		Mango 4 #F58B00	Accent 1
	Red 5 #D20A0A		Red 4 #EE3939	Accent 2
	Pink 5 #CC00DC		Pink 4 #F31DED	Accent 3
	Pink 6 #A100C2		Pink 5 #CC00DC	Accent 4
	Indigo 6 #5D36FF		Indigo 5 #7858FF	Accent 5
	Blue 6 #0057D2		Blue 5 #0070F2	Accent 6
	Teal 5 #07838F		Teal 4 #04ACA7	Accent 7
	Green 4 #36A41D		Green 3 #5DC122	Accent 8
	Indigo 5 #7858FF		Indigo 4 #9B76FF	Accent 9
	Grey 5 #5B738B		Grey 4 #8396A8	Accent 10
	Blue 5 #0070F2		Blue 4 #1B90FF	Accent 11
	Blue 4 #1B90FF		Blue 3 #4DB1FF	Accent 12
	Red 4 #EE3939		Red 3 #FF5C77	Accent 13
	Indigo 4 #9B76FF		Indigo 3 #B894FF	Accent 14
	Pink 4 #F31DED		Pink 3 #FF8AF0	Accent 15

Light and Dark Theme Elevation

Elevation plays a key role in our Horizon color palette. In light theme, the drop shadow represents the elevation of the components. However, in dark theme, elevated components are differentiated by changes in tone to mimic a range of depth. At lower elevations, the surface tone is darker while at higher elevations the tone is lighter. Refer to the following table to understand elevation.

Light Mode		Dark Mode		Default Elevation (dp)	Component
	S0-Background		S0-Background	0dp	Standard surface color
	S1-Primary		S1-Primary, 1dp Overlay Color: #7198BF 5% Base Color: #14171A	1dp	Card, Search Bar, Switch
	S1-Primary		S1-Primary, 2dp Overlay Color: #7198BF 7% Base Color: #14171A	2dp	Contained Button
	S1-Primary		S1-Primary, 3dp Overlay Color: #7198BF 8% Base Color: #14171A	3dp	Refresh Indicator
	S1-Primary		S1-Primary, 4dp Overlay Color: #7198BF 9% Base Color: #14171A	4dp	App Bar, Object Header
	S1-Primary		S1-Primary, 6dp Overlay Color: #7198BF 11% Base Color: #14171A	6dp	Floating Action Button (FAB - resting), Map Toolbar, Snackbar
	S1-Primary		S1-Primary, 8dp Overlay Color: #7198BF 12% Base Color: #14171A	8dp	Menu, Side Sheet, Bottom Sheet, Bottom Navigation Bar
	S1-Primary		S1-Primary, 12dp Overlay Color: #7198BF 14% Base Color: #14171A	12dp	Floating Action Button (FAB - pressed)
	S1-Primary		S1-Primary, 16dp Overlay Color: #7198BF 15% Base Color: #14171A	16dp	Modal Bottom Sheet, Modal Side Sheet, Navigation Drawer
	S1-Primary		S1-Primary, 24dp Overlay Color: #7198BF 16% Base Color: #14171A	24dp	Dialog

Resources

Development: Theming and Styling

Fiori for iOS: Colors