Updated: June 17, 2022

Colors

Intro

Color plays a significant role in SAP Fiori for iOS apps. It communicates the importance of and associations between content and provides users direction to help them complete their tasks.

Core Palette

By introducing a new color palette, we are bringing our brand and products together
to achieve a cohesive experience across all touchpoints with the unified core colors.

Fiori Horizon Reference Colors

The current color schemes derive from the main control parameters from the new Fiori Horizon themes. Here are the main reference colors.

Fiori Horizon Color Palette
Fiori Horizon Color Palette

UI Colors

UI Colors are added to create an intermediate layer of colors prepared for usage in UI components and page types. Each color has a semantical name which reflects its purpose. The colors are divided into 8 categories:

  • Background Colors
  • Tint Colors
  • Label Colors
  • Fill Colors
  • UI Material Colors
  • Semantic Colors
  • Separator Colors
  • Shadow Colors

 

Background Colors

Background Colors are defined based on the information container hierarchy. There are 2 variants of pages and each variant has 3 layers of backgrounds.

Perspective display of background layers in light mode
Perspective display of background layers in light mode
Perspective display of background layers in dark mode
Perspective display of background layers in dark mode

Grouped Background Colors

Most pages with a card layout utilize grouped background colors.

Elevated grouped background colors are used similarly to regular grouped background ones. Elevated variants are applied automatically to the UI in modal sheets and other overlay panels.

Light Mode Dark Mode Name
Grey / Grey 1
#F5F6F7
Base / Black
#000000
Primary Grouped Background
Base / White
#FFFFFF
Grey 6, 24% on Black
#161C21
Secondary Grouped Background
Grey / Grey 1
#F5F6F7
Grey 6, 16% on Black
#0F1216
Tertiary Grouped Background
Grey 6, 28% on Black
#192027
Primary Grouped Background (elevated)
Grey 6, 40% on Black
#242E38
Secondary Grouped Background (elevated)
Grey 6, 34% on Black
#1F272F
Tertiary Grouped Background (elevated)

Background Colors

Background color variants are used when the page structure is flat and most information is in the same level, such as onboarding screens.

Similarly, an elevated variant of the background colors is automatically used in overlay views.

Light Mode Dark Mode Name
Base / White
#FFFFFF
Base / Black
#000000
Primary Background
Grey / Grey 1
#F5F6F7
Grey 6, 16% on Black
#0F1216
Secondary Background
Base / White
#FFFFFF
Grey 6, 24% on Black
#161C21
Tertiary Background
Grey 6, 28% on Black
#192027
Primary Background (elevated)
Grey 6, 34% on Black
#1F272F
Secondary Background (elevated)
Grey 6, 40% on Black
#242E38
Tertiary Background (elevated)

 

Tint Colors

Tint colors indicate to the user that certain elements are interactive—for example, text and icons. For the light mode, there are 3 variants of tint colors: Tint, Tint 2, and Tint Tap State colors.

Light Mode Dark Mode Name
Blue / Blue 7
#0070F2
Blue / Blue 5
#4DB1FF
Tint
Blue / Blue 8
#0057D2
Blue / Blue 5
#4DB1FF
Tint 2
Blue / Blue 9
#0040B0
Blue / Blue 6
#1B90FF
Tint Tap State

 

Label Colors

Label colors may only be applied to non-interactive content elements.

Light Mode Dark Mode Name Usage
Grey / Grey 9
#223548
Grey / Grey 1
#F5F6F7
Primary Label Primary text content (Titles)
Grey / Grey 7
#475E75
Grey / Grey 3
#D5DADD 85%
Secondary Label Secondary text content (Subtitles, Section Headers)
Grey / Grey 7, 90%
#475E75 90%
Grey / Grey 4
#A9B4BE
Tertiary Label Tertiary text content (Footnotes, Statuses)
Grey / Grey 6, 83%
#5B738B 55%
Grey / Grey 5
#8396A8
Quaternary Label Non-interactive icons

 

Fill Colors

Fill colors can be used for several different purposes. The main use in our system is for putting a boundary for areas or giving feedback to our users during tapping.

Light Mode Dark Mode Name Usage
Base / White
FFFFFF
Grey / Grey 5, 6%
#8396A8 6%
Primary Fill Input field, active area
Grey / Grey 6, 8%
#5B738B 8%
Grey / Grey 5, 20%
#8396A8 20%
Secondary Fill Secondary button, content area
Grey / Grey 6, 4%
#5B738B 4%
Grey / Grey 5, 10%
#8396A8 10%
Tertiary Fill Disabled area, content area
Grey / Grey 6, 10%
#5B738B 10%
Grey / Grey 5, 22%
#8396A8 22%
Quaternary Fill Tap state

 

UI Material Colors

UI Material colors are for representing specific components and materials in UI. Generally, they are applied to the backgrounds of the container.

Light Mode Dark Mode Name Usage
Base / White
#FFFFFF
Grey 5, 24% on Black
#161C21
Header Header / Navigation Bar
Grey 5, 40% on Black
#242E38
Header (Elevated) Header / Navigation Bar on elevated layers
Base / White, 85%
#FFFFFF 85%
Grey 5, 24% on Black, 85%
#161C21 85%
Blended Header Header / Navigation Bar that blends with the background
Grey 5, 40% on Black, 85%
#242E38 85%
Blended Header (Elevated) Header / Navigation Bar that blends with the background on elevated layers
#111D29 85%
#111D29 85% Transparent Bar Overlay layer background
Base / White
#FFFFFF
Grey 5, 28% on Black
#161C21
Footer Toolbar, Tab Bar, Floating Bar
Grey 5, 42% on Black
#26303A
Footer (Elevated) Toolbar, Tab Bar, Floating Bar on elevated layers
Transparent
Transparent Cell Background background of all cells
Grey / Grey 6
#5B738B
Grey / Grey 5
#8396A8
Contrast Element UI elements that need to stand out

 

Semantic Colors

Semantic colors are for calling attention to important information and convey a positive, negative, or critical meaning in the process.

Light Mode Dark Mode Name Usage
Red / Red 7
#D20A0A
Red / Red 4
#FF8CB2
Negative Label High priority elements / Negative actions
Mango / Mango 7
#C35500
Mango / Mango 4
#FFC933
Critical Label Medium priority elements / Attention needed elements
Green / Green 7
#256F3A
Green / Green 4
#97DD40
Positive Label Positive elements
#FF80BC 16%
#FF5252 16% Negative Background Background of the area for presenting negative content
#FFD500 16%
#FFC933 16% Critical Background Background of the area to present critical information
#BDDE54 16%
#66FF90 16% Positive Background Background of the area for presenting positive content
#85D4FF 16%
#366CFE 16% Informative Background Background of the area for presenting general information

 

Separator Colors

Separator colors are used for outlining or dividing areas into separate entities. There are 2 main separators: one with transparency and one without.

Light Mode Dark Mode Name
Grey / Grey 6, 37%
#5B738B 37%
Grey / Grey 5, 37%
#8396A8 37%
Separator
Grey / Grey 6, 83%
#5B738B, 83%
Grey / Grey 5, 83%
#8396A8 83%
Separator (opaque)

 

Shadow Colors

Shadow colors are the shadow colors which are used to separate layers in the page layout.

Light Mode Dark Mode Name
Grey / Grey 6, 8%
#5B738B 37%
Base / Black, 30%
#8396A8 37%
Card Shadow
Grey / Grey 6, 24%
#5B738B, 83%
Base / Black, 37%
#8396A8 83%
Section Shadow

 

Accent Colors

We are introducing new accents with a color logic that complies with the accessibility standard.

Accent color palette
Accent color palette

Core Colors

The core colors are provided for flexible uses on UI elements.

Core color palette
Core color palette

Core Color Logic

The core colors offer color mapping logic that is easy to understand. In addition, they provide enough flexibility to create specific color combinations for any UI elements and still follow color contrast accessibility standards.

Example of core color mapping (3:1 for 6th and white; 3:1 for 3th and 8th; 4.5:1 for 3th and 9th)
Example of core color mapping (3:1 for 6th and white; 3:1 for 3th and 8th; 4.5:1 for 3th and 9th)

Text Content and Background

The colors, from the second column to the fourth column, can be used in a pair as foreground and background color. The color pair will ensure at least 4.5:1 color contrast ratio with the same and different color groups

Vertical mapping of the core colors
Vertical mapping of the core colors

Symbols and Large Text

The sixth color and white color, the first and seventh colors, the second and seventh colors, the third and eighth color, the fourth and ninth colors, and the fifth and tenth colors ensure 3:1 color contrast.

Color mapping for symbols and large text
Color mapping for symbols and large text

Chart Colors

Use chart colors for chart plot and legend-related components. There is currently only one color that can be used on the dark background (such as the Object Header). Text semantic colors may also be used for charts and analytical components.

Warning
Using chart colors for backgrounds can affect the contrast ratio of the foreground and background content. Please check the Accessibility guideline to understand how to decide for the most suitable colors to use.
Light Mode Dark Mode Name
#5899DA
#74B3F0 Chart 1
#E8743B
#E8743B Chart 2
#19A979
#19A979 Chart 3
#ED4A7B
#ED4A7B Chart 4
#945ECF
#945ECF Chart 5
#13A4B4
#13A4B4 Chart 6
#525DF4
#5C66F5 Chart 7
#BF399E
#C63FA4 Chart 8
#6C8893
#6C8893 Chart 9
#EE6868
#EE6868 Chart 10
#2F6497
#387BB7 Chart 11

Container Layers

In Fiori for iOS, there are 6 layers of the container views: base, level 0, level 1, level 2, level 3, and level 4. This layer level treatment gives hierarchy to page content.

Light Mode Dark Mode Name Usage
No shadow
No shadow Base Level Base layers, flat headers / footers
Section Shadow (5B738B 24%), blur 2pt
Section Shadow (#000000 37%), blur 2pt
Level 0 Grouped layers, floating headers / bars
Section Shadow (5B738B 24%), blur 2pt
Card Shadow (5B738B 8%), y-axis 1px, blur 4pt
Section Shadow (#000000 37%), blur 2pt
Card Shadow (#000000 30%), y-axis 1px, blur 4pt
Level 1 Cards, grouped layers, floating headers / bars (scrolled) / footers
Section Shadow (5B738B 24%), blur 2pt
Card Shadow (5B738B 8%), y-axis 2px, blur 8pt
Section Shadow (#000000 37%), blur 2pt
Card Shadow (#000000 30%), y-axis 2px, blur 8pt
Level 2 Cards, panels
Section Shadow (5B738B 24%), blur 2pt
Card Shadow (5B738B 8%), y-axis 8px, blur 16pt
Card Shadow (5B738B 8%), y-axis 16px, blur 32pt
Section Shadow (#000000 37%), blur 2pt
Card Shadow (#000000 30%), y-axis 8px, blur 16pt
Card Shadow (#000000 30%), y-axis 16px, blur 32pt
Level 3 Emphasized cards, overlay panels
Opaque Separator (5B738B 83%), blur 2pt
Card Shadow (5B738B 8%), y-axis 8px, blur 16pt
Card Shadow (5B738B 8%), y-axis 16px, blur 32pt
Card Shadow (5B738B 8%), y-axis 32px, blur 64pt
Opaque Separator (#8396A8 83%), blur 2pt
Card Shadow (#000000 30%), y-axis 8px, blur 16pt
Card Shadow (#000000 30%), y-axis 16px, blur 32pt
Card Shadow (#000000 30%), y-axis 32px, blur 64pt
Level 4 Emphasized overlay panels

Resources

Development: FUIColorStyle

Related Foundation: Accessibility

SAP Fiori for Android: Colors