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 color palette introduces a unified color palette that brings our brand and products together to achieve a cohesive experience across all SAP touchpoints.

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

Horizon color palette
Horizon color palette

Accessibility Logic

The Horizon color palette introduces eleven values across nine color hues. To ensure that color combinations comply with WCAG accessibility standards, we have developed a system that enables you to easily pair color combinations.

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 you decide which colors to use. UI colors are grouped according to their usage into the following categories:

  • Surface colors
  • Text colors
  • Borders colors
  • Semantic colors
  • Accent colors


Surface Colors

Surface colors are applied to the background of components, such as cards, sheets, buttons, snackbars, and menus. To provide a sense of hierarchy, surface colors are identified by the first 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 7
#0070F2
Blue 5
#4DB1FF
S2-Secondary Call-to-Action Elements
Grey 11
#12171C
Base White
#FFFFFF
S3-Tertiary Snackbar Background
Grey 1
#F5F6F7
Grey 6
#5B738B, 20%
S4-Quarternary Muted Backgrounds
Blue 7
#0070F2, 8%
Blue 5
#4DB1FF, 20%
S5-Selected Surface Selected Backgrounds
Base White
#FFFFFF
Base Dark with Overlay
Overlay: #7198BF
S6-Header Header Background
Grey 6
#5B738B
Grey 4
#A9B4BE
S7-Switch Idle Switch Backgrounds
Grey 7
#475E75
Grey 3
#D5DADD
S8-Switch Selected Selected Switch Backgrounds


Text Colors

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

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


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 first letter B followed by a number sequence (e.g., B1, B2, B3).

Light Mode Dark Mode Name Usage
Grey 3
#D5DADD
Grey 6
#5B738B 50%
B1-Section Divider Divider Lines
Grey 5
#8396A8
Grey 5
#8396A8
B2-Default Border Text Field Borders
Blue 7
#0070F2
Blue 5
#4DB1FF
B3-Selected Border Selected Text Field Borders
Blue 7
#0070F2, 28%
Blue 5
#4DB1FF, 36%
B4-Light Selected Border Transparent Selected Borders
Grey 6
#5B738B
Grey 4
#A9B4BE
B5-Border Switch Idle Switch 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
Red 7
#D20A0A
Red 5
#FF5C77
Negative Label Semantic Label
Mango 7
#C35500
Mango 5
#FFB300
Critical Label Semantic Label
Green 7
#188918
Green 5
#5DC122
Positive Label Semantic Label
Blue 7
#0070F2
Blue 5
#4DB1FF
Informative Label Semantic Label
Grey 7
#5B738B
Grey 5
#A9B4BE
Neutral Label Semantic Label
Red 1
#FFEAF4
Red 11
#350000
Negative Background Semantic Background
Mango 1
#FFF8D6
Mango 11
#450B00
Critical Background Semantic Background
Green 1
#F5FAE5
Green 11
#0E2B16
Positive Background Semantic Background
Blue 1
#EBF8FF
Blue 11
#00144A
Informational Background Semantic Background
Grey 1
#F5F6F7
Grey 11
#12171C
Neutral Background Semantic Background

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 8
#A93E00
Mango 3
#FFDF72
Accent Label 1
Red 8
#AA0808
Red 3
#FFB2D2
Accent Label 2
Raspberry 8
#BA066C
Raspberry 3
#FECBDA
Accent Label 3
Pink 8
#A100C2
Pink 3
#FFAFED
Accent Label 4
Indigo 8
#470CED
Indigo 3
#D3B6FF
Accent Label 5
Blue 8
#0057D2
Blue 3
#A6E0FF
Accent Label 6
Teal 8
#046C7A
Teal 3
#64EDD2
Accent Label 7
Green 8
#256F3A
Green 3
#BDE986
Accent Label 8
Grey 8
#354A5F
Grey 3
#D5DADD
Accent Label 9
Mango 2
#FFF3B8
Mango 9
#8D2A00
Accent Background 1
Red 2
#FFD5EA
Red 4
#840606
Accent Background 2
Raspberry 2
#FFDCE8
Raspberry 3
#9B015D
Accent Background 3
Pink 2
#FFDCF3
Pink 3
#7800A4
Accent Background 4
Indigo 2
#E2D8FF
Indigo 3
#2C13AD
Accent Background 5
Blue 2
#D1EFFF
Blue 2
#0040B0
Accent Background 6
Teal 2
#C2FCEE
Teal 3
#035663
Accent Background 7
Green 2
#EBF5CB
Green 3
#1E592F
Accent Background 8
Grey 2
#EAECEE
Grey 3
#223548
Accent Background 9

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

SAP Fiori for iOS: Colors