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.
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
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 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 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)
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
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
Light Mode | Dark Mode | Name | ||
#1B90FF | #4DB1FF | Chart 1 | ||
#E76500 | #FFB300 | Chart 2 | ||
#36A41D | #5DC122 | Chart 3 | ||
#FA4F96 | #FE83AE | Chart 4 | ||
#7858FF | #9B76FF | Chart 5 | ||
#049F9A | #00CEAC | Chart 6 | ||
#F31DED | #F65AF2 | Chart 7 | ||
#5B738B | #8396A8 | Chart 8 | ||
#EE3939 | #FF5C77 | Chart 9 |
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 |