Updated: February 15, 2023

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

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 Colors

Accent colors were created with a color logic that complies with the accessibility standard.

Accent color palette

Core Colors

The core colors are provided for flexible uses on UI elements in Light and Dark modes.

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

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, for example, for 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.

Information

Color Chart 7 is deprecated and should be mapped to color Chart 1. Color Chart 11 is also deprecated and should be mapped to color Chart 8.

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

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