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
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
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
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
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 / Blue 5
#0070F2
Blue / Blue 3
#4DB1FF
S2-Secondary Call-to-Action Elements
Grey / Grey 9
#111D29
Base / White
#FFFFFF
S3-Tertiary Snackbar Background
Grey / Grey 1
#F5F6F7
Grey / Grey 5, 20%
#5B738B 20%
S4-Quarternary Muted Backgrounds
Blue / Blue 1
#EBF8FF
Grey / Grey 7
#34495D
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 / Grey 8
#223548
Grey / Grey 1
#F5F6F7
T1-Main on Primary Titles, Subtitles
Grey / Grey 6
#475E75
Grey / Grey 2
#D5DADD
T2-Support on Primary Body Text, Caption
Grey / Grey 5
#5B738B
Grey / Grey 3
#A9B4BE
T3-Minor on Primary Muted Text, Placeholder Text
Blue / Blue 5
#0070F2
Blue / Blue 3
#4DB1FF
T4-CTA on Primary Tinted Text, Links, Interactive Icons
Base / White
#FFFFFF
Grey / Grey 9
#0B141E
T5-Main on Secondary Text on S2-Secondary
Blue / Blue 3
#4DB1FF
Blue / Blue 5
#0070F2
T6-Main on Tertiary Text on S3-Tertiary
Blue / Blue 6
#0057D2
Blue / 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 / Grey 2
#D5DADD
Grey / Grey 5, 50%
#5B738B 50%
B1-Section Divider Divider lines
Grey / Grey 4
#8396A8
Grey / Grey 4
#8396A8
B2-Default Border Text field borders
Blue / Blue 5
#0070F2
Blue / Blue 3
#4DB1FF
B3-Selected Border Selected text field borders
Blue / Blue 5, 50%
#0070F2 50%
Blue / Blue 3, 50%
#4DB1FF 50%
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 / Green 5
#188918
Green / Green 3
#5DC122
Positive Semantic text
Mango / Mango 5
#C35500
Mango / Mango 3
#FFB300
Critical Semantic text
Red / Red 5
#D20A0A
Red / Red 3
#FF5C77
Negative Semantic text
Grey / Grey 5
#5B738B
Grey / 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 / Mango 4
#F58B00
Mango / Mango 2
#FFDF72
Accent 1
Red / Red 4
#EE3939
Red / Red 3
#FF5C77
Accent 2
Pink / Pink 5
#CC00DC
Pink / Pink 3
#FF8AF0
Accent 3
Pink / Pink 6
#A100C2
Pink / Pink 4
#F31DED
Accent 4
Indigo / Indigo 6
#5D36FF
Indigo / Indigo 4
#9B76FF
Accent 5
Blue / Blue 7
#0040B0
Blue / Blue 4
#1B90FF
Accent 6
Teal / Teal 4
#04ACA7
Teal / Teal 3
#00CEAC
Accent 7
Green / Green 4
#36A41D
Green / Green 2
#97DD40
Accent 8
Indigo / Indigo 5
#7858FF
Indigo / Indigo 3
#B894FF
Accent 9
Grey / Grey 5
#5B738B
Grey / Grey 3
#A9B4BE
Accent 10
Blue / Blue 5
#0070F2
Blue / Blue 3
#4DB1FF
Accent 11
Blue / Blue 4
#1B90FF
Blue / Blue 2
#89D1FF
Accent 12
Red / Red 3
#FF5C77
Red / Red 2
#FF8CB2
Accent 13
Indigo / Indigo 3
#B894FF
Indigo / Indigo 2
#D3B6FF
Accent 14
Pink / Pink 3
#FF8AF0
Pink / Pink 2
#FFAFED
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