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 |