Updated: November 24, 2020

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.

Color Palette

Color schemes have been chosen for SAP Fiori for iOS to bring on-screen content to the fore. Please review the light and dark color schemes and select options that provide a sense of cohesiveness to your app.

Fiori 3 Reference Colors

The current color schemes derive from the main control parameters from Quartz Light and Quartz Dark themes in Fiori 3. Here are the main reference colors.

Quartz Light Quartz Dark Name
#354A5F
#354A5F Shell Color
#F7F7F7
#1C2228 Application Background Color
#0A6ED1
#91C8F6 Link Color
#FFFFFF
#29313A Base Color
#EDEFF0
#232A31 Shell Background Color
#89919A
#8696A9 Foreground Border Color
#32363A
#FAFAFA Text Color
#6A6D70
#D3D7D9 Label Color

Main Colors

The main colors set the unique tone of SAP Fiori for iOS. The colors bring the benefit of Fiori 3 themes to Fiori for iOS and ensure sufficient visual contrast to information presented to users.

Information
New Quartz Dark color palette for the dark mode
Light Mode Dark Mode Name
#354A5F
Shell Color
#2C3D4F
darken( Shell Color , 5%)
Shell
#EDEFF0
Shell Background Color
#1C2228
Background Color
Background 1
#F7F7F7
#232A31 Background 2
#89919A
#8696A9 Line
#32363A
#FAFAFA Primary 1
#515456
#EEF0F1 Primary 2
#6A6D70
#D3D7D9 Primary 3
#CCCCCC
#687D94 Primary 4
#FAFAFA
#23303E Primary 5
#FFFFFF
#29313A Primary 6
#74777A
#B8BEC1 Primary 7
#2F3943
#2F3943 Primary 8
#E5E5E5
#3A4552 Primary 9
#89919A
#8696A9 Primary 10
#89919A 8%
#8696A9 11% Cell Background Tap State
#000000
#000000 Shadow
#BB0000
#FF8888 Negative
#107E3E
#ABE2AB Positive
#E9730C
#FABD64 Critical
#0A6ED1
#91C8F6 Informative

Accent Colors

The recommended accent colors work harmoniously with SAP Fiori for iOS default color scheme and are typically applied to backgrounds, alines. Avoid using accent colors for text content.

Warning
Using Accent colors for backgrounds can affect the contrast ratio of the foreground and background content. Please check our Accessibility guideline to understand how to assess the suitable colors to use.
Accent 1
#E38B16
Accent 1B
#D17F15
Accent 2
#DC7474
Accent 2B
#D04343
Accent 3
#DB1F77
Accent 4
#C0399F
Accent 5
#6367DE
Accent 6
#5899DA
Accent 6B
#2B78C5
Accent 7
#5899DA
Accent 7B
#0F828F
Accent 8
#7CA10C
Accent 9
#925ACE
Accent 10
#8497A4
Accent 10B
#647887

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 our Accessibility guideline to understand how to assess the 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

Semantic UI Colors

Semantic UI Colors are added to create an intermediate layer of colors prepared for usage in UI components and page types. The colors have more semantical names than ones in the color palette. Semantic UI Colors are separated into 7 categories:

  • Background Colors
  • Tint Colors
  • Label Colors
  • Fill Colors
  • UI Material Colors
  • Semantic Colors
  • Separator 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.

Grouped Background Colors

Grouped Background colors are generally for page types that have separate sections and table views. Form Page is the most common example that utilizes Grouped Background colors

Elevated Grouped Background colors are used similarly to Grouped Background Colors. Elevated variants are applied automatically to the UI in only specific cases, such as Modal Sheet and iPadOS Slide Over.

Light Mode Dark Mode Name
Background 1
#EDEFF0
Background 1
#1c2228
Primary Grouped Background
Primary 6
#FFFFFF
Background 2
#232A31
Secondary Grouped Background
Primary 6
#FFFFFF
Primary 6
#29313A
Tertiary Grouped Background
Background 1
#EDEFF0
Background 2
#232A31
Primary Grouped Background (elevated)
Primary 6
#FFFFFF
Primary 6
#29313A
Secondary Grouped Background (elevated)
Primary 6
#FFFFFF
Primary 8
#2F3943
Tertiary Grouped Background (elevated)

Background Colors

Background Colors are the default color treatment for most of the screens.

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

Light Mode Dark Mode Name
Primary 6
#FFFFFF
Background 2
#232A31
Primary Background
Background 2
#F7F7F7
Background 1
#1C2228
Secondary Background
Primary 6
#FFFFFF
Primary 6
#29313A
Tertiary Background
Primary 6
#FFFFFF
Background 2
#29313A
Primary Background (elevated)
Background 2
#F7F7F7
Background 1
#232A31
Secondary Background (elevated)
Primary 6
#FFFFFF
Primary 6
#2F3943
Tertiary Background (elevated)

Tint Colors

Tint colors indicate to the user that certain app elements are interactive—for example, text and icons. For the light mode, there are 2 variants of Tint colors: Tint and Contrast Tint colors. The Contrast Tint color is used for interactive UI elements on the dark background (e.g. Navigation Bar).

Light Mode Dark Mode Name
Informative
#0A6ED1
Informative
#91C8F6
Tint
Informative (Dark)
#91C8F6
Informative
#91C8F6
Tint (contrast)

Label Colors

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

Light Mode Dark Mode Name Usage
Primary 1
#32363A
Primary 1
#FAFAFA
Primary Label Primary text content (Titles)
Primary 1, 85%
#32363A 85%
Primary 1, 85%
#FAFAFA 85%
Secondary Label Secondary text content (Subtitles, Section Headers)
Primary 1, 72%
#32363A 72%
Primary 1, 72%
#FAFAFA 72%
Tertiary Label Tertiary text content (Footnotes, Statuses)
Primary 1, 55%
#32363A 55%
Primary 1, 55%
#FAFAFA 55%
Quarternary Label Non-interactive icons
Primary 1 (Dark)
#FAFAFA
Primary 1
#FAFAFA
Primary Label (contrast) Primary text content on contrast backgrounds (Titles in Header area)
Primary 1 (Dark), 85%
#FAFAFA 85%
Primary 1, 85%
#FAFAFA 85%
Secondary Label (contrast) Secondary text content on contrast backgrounds (Subtitles, Section Headers in Header area)
Primary 1 (Dark), 72%
#FAFAFA 72%
Primary 1, 72%
#FAFAFA 72%
Tertiary Label (contrast) Tertiary text content on contrast backgrounds (Footnotes, Statuses in Header area)
Primary 1 (Dark), 55%
#FAFAFA 55%
Primary 1, 55%
#FAFAFA 55%
Quarternary Label (contrast) Non-interactive icons on contrast backgrounds

Fill Colors

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

Light Mode Dark Mode Name Usage
Line, 20%
#89919A 20%
Line, 35%
#8696A9 35%
Primary Fill Inactive area (e.g. inactive page control dots)
Line, 16%
#89919A 16%
Line, 27%
#8696A9 27%
Secondary Fill Input area (e.g. search field background)
Line, 12%
#89919A 12%
Line, 19%
#8696A9 19%
Tertiary Fill Placeholder area (e.g. illustration areas)
Line, 8%
#89919A 8%
Line, 11%
#8696A9 11%
Quarternary Fill Cell state change (e.g. touch feedback)
Line (Dark), 35%
#8696A9 35%
Line, 35%
#8696A9 35%
Primary Fill (contrast) Inactive area on contrast backgrounds (e.g. inactive page control dots)
Line (Dark), 27%
#8696A9 27%
Line, 27%
#8696A9 27%
Secondary Fill (contrast) Input area on contrast backgrounds (e.g. search field background)
Line (Dark), 19%
#8696A9 19%
Line, 19%
#8696A9 19%
Tertiary Fill (contrast) Placeholder area on contrast backgrounds (e.g. illustration areas)
Line (Dark), 11%
#8696A9 11%
Line, 11%
#8696A9 11%
Quarternary Fill (contrast) Cell state change on contrast background (e.g. touch feedback)

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
Shell
#354A5F
Shell
#2C3D4F
Header Default header area background
Primary Background, 80%
#FFFFFF 80%
Primary Background, 80%
#232A31 80%
Blended Header Header area (e.g. navigation bars on onboading/logon screens)
Primary Background, 80%
#FFFFFF 80%
Primary Background (elevated), 80%
#29313A 80%
Blended Header (elevated) Header area on elevated modals (e.g. modal sheets)
Primary 5, 80%
#23303E 80%
Primary 5, 80%
#23303E 80%
Transparent Bar Default header areas for camera-acivated screens
Primary 5, 92%
#FAFAFA 92%
Primary 5, 92%
#23303E 92%
Footer Default footer areas (e.g. toolbars, tab bars)/td>
Transparent
Transparent Cell Background background of all cells/td>
Quarternary Fill
#89919A 8%
Quarternary Fill
#8696A9 11%
Cell Background Tap State background of all cells

Semantic Colors

Semantic Colors are for calling attention to important information and provide positive, negative, or critical meanings in the process.

Light Mode Dark Mode Name Usage
Negative
#BB0000
Negative
#FF8888
Negative Label Content that needs urgent attention or delivers negative results
Positive
#107E3E
Positive
#ABE2AB
Positive Label Content that or delivers positive results
Critical
#E9730C
Critical
#FABD64
Critical Label Content that calls for attention or has a medium prioity
Negative (Dark)
#FF8888
Negative
#FF8888
Negative Label (contrast) Content that needs urgent attention or delivers negative results
Positive (Dark)
#ABE2AB
Positive
#ABE2AB
Positive Label (contrast) Content that or delivers positive results
Critical (Dark)
#FABD64
Critical
#FABD64
Critical Label (contrast) Content that calls for attention or has a medium prioity
Negative
#BB0000 8%
Negative
#FF8888 14%
Negative Background Background of the area for presenting negative content
Positive
#107E3E 8%
Positive
#ABE2AB
Positive Background Background of the area to present positive content
Critical
#E9730C 8%
Critical
#FABD64 14%
Critical Background Background of the area for presenting critical information
Critical
#0A6ED1 8%
Critical
#91C8F6 14%
Informative Background Background of the area for presenting general information
Negative (Dark)
#FF8888 14%
Negative
#FF8888 14%
Negative Background (contrast) Background of the area for presenting negative content
Positive (Dark)
#ABE2AB 14%
Positive
#ABE2AB 14%
Positive Background (contrast) Background of the area for presenting positive content
Critical (Dark)
#FABD64 14%
Critical
#FABD64 14%
Critical Background (contrast) Background of the area for presenting critical information
Critical (Dark)
#91C8F6 14%
Critical
#91C8F6 14%
Informative Background (contrast) Background of the area for presenting general information

Separator Colors

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

Light Mode Dark Mode Name
Line, 41%
#89919A 41%
Line, 27%
#8696A9 27%
Separator
Line
#89919A
Line
#8696A9
Separator (opaque)
Line (Dark), 27%
#8696A9 27%
Line, 27%
#8696A9 27%
Separator (contrast)
Line (Dark)
#8696A9
Line
#8696A9
Separator (contrast, opaque)

Container Layers

In Fiori for iOS, there are 3 main layers of the container views: primary, secondary, and tertiary layers, and material layers: Transparent Bar and Overlay Containers.

Light Mode Dark Mode Name Usage
No shadow
No shadow Primary Layer This is the base layer of any UI.
Line, 23%, spread 0.5pt
#89919A 23%
Line, 19%, spread 0.5pt
#8696A9 19%
Secondary Layer This is the secondary layer mainly used for groups
Line, 41%, 0.5pt

Shadow, 15%, y-axis 1pt, blur 4pt

#89919A 41%, #000000 15%
Line, 19%, 0.5pt

Shadow, 15%, y-axis 1pt, blur 4pt

#8696A9 19%, #000000 15%
Tertiary Layer This is the tertiary layer mainly used for cards