Updated: November 23, 2023

Colors

FUIColorStyle

Intro

Color plays a significant role and sets the visual balance for iOS apps. It defines the visual hierarchy of UI elements and directs the user’s attention to the most important tasks.

Horizon Theme

Our color system builds on a core color palette that aligns with our brand and helps us create consistent experiences across products. The Horizon theme colors bring flexibility to our design system while remaining accessible in instances of complex UIs. The palette consists of a set of vibrant colors providing a flexible yet consistent color system and distinct look to all SAP products.

Horizon theme UI reference colors
Horizon theme UI reference colors

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 semantic name that reflects its purpose. The colors are divided into 10 categories:

  • Tint Colors
  • Background Colors
  • Label Colors
  • Fill Colors
  • UI Materials Colors
  • Semantic Colors
  • Separator Colors
  • Shadow Colors
  • Accent Colors
  • Chart Colors

 

Tint Colors

Tint colors are used to indicate that certain elements are interactive, for example, interactive text and icons. For the light mode, there are three 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

Background Colors

The iOS design system includes two variants of background colors: Background and Grouped Background. They are made up of neutral colors including shades of grey, all the way from white to black.

Background and Grouped Background contain primary, secondary, and tertiary variants that help to convey a hierarchy of information. Use these variants to indicate hierarchy in the following ways:

  • Primary for the overall view
  • Secondary for grouping content or elements within the overall view
  • Tertiary for grouping content or elements within secondary elements

In dark mode, Elevated Background and Elevated Group Background colors are applied automatically to the UI in modal sheets and other overlay panels.

See also Surface Colors on Android *Link to Surface*.

Background Colors

When the page structure is flat and most information is on the same level, use background colors (e.g. onboarding screens).

Light Mode Dark Mode Name
Base / White
#FFFFFF
Base / Black
#000000
Primary Background
Grey / Grey 1
#F5F6F7
Grey 6, 16% on Black
#5B738B29 (16%=29)
Secondary Background
Base / White
#FFFFFF
Grey 6, 32% on Black
#8396A852 (32%=52)
Tertiary Background
Grey 6, 28% on Black
#5B738B47 (28%=47)
Primary Background (elevated)
Grey 6, 34% on Black
#5B738B57 (34%=57)
Secondary Background (elevated)
Grey 6, 40% on Black
#5B738B66 (40%=66)
Tertiary Background (elevated)

Grouped Background Colors

Most pages with a card layout or grouped table view utilize grouped background colors.

Light Mode Dark Mode Name
Grey / Grey 1
#F5F6F7
Base / Black
#000000
Primary Grouped Background
Base / White
#FFFFFF
Grey 5, 24% on Black
#8394A83D (24%=3D)
Secondary Grouped Background
Grey / Grey 1
#F5F6F7
Grey 5, 16% on Black
#8396A829 (16%=29)
Tertiary Grouped Background
Grey 6, 28% on Black
#5B738B47 (28%=47)
Primary Grouped Background (elevated)
Grey 6, 40% on Black
#5B738B66 (40%=66)
Secondary Grouped Background (elevated)
Grey 6, 34% on Black
#5B738B57 (34%=57)
Tertiary Grouped Background (elevated)

 

Label Colors

Label colors may only be applied to non-interactive content elements such as non-interactive text and icons. They are made up of neutral colors including shades of grey.

Light Mode Dark Mode Name Usage
Grey / Grey 9
#223548
Grey / Grey 1
#F5F6F7
Primary Label Primary text content (e.g.titles) 
Grey / Grey 7
#475E75
Grey / Grey 3
#D5DADD
Secondary Label Secondary text content (subtitles, section headers) 
Grey / Grey 7, 90%
#475E75E6; (90%=E6)
Grey / Grey 4
#A9B4BE
Tertiary Label

Tertiary text content (footnotes, statuses)

Grey / Grey 6, 83%
#5B738BD4; (83%=D4)
Grey / Grey 5
#8396A8
Quaternary Label Non-interactive icons and symbols

 

Fill Colors

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

Light Mode Dark Mode Name Usage
Base / White
FFFFFF
Grey / Grey 5, 6%
#8396A80F (6%=0F)
Primary Fill Input field, active area
Grey / Grey 6, 8%
#5B738B14 (8%=14)
Grey / Grey 5, 20%
#8396A833 (20%=33)
Secondary Fill Secondary button, content area
Grey / Grey 6, 4%
#5B738B0A (4%=0A)
Grey / Grey 5, 10%
#8396A81A (10%=1A)
Tertiary Fill Disabled area, content area
Grey / Grey 6, 10%
#5B738B1A (10%=1A)
Grey / Grey 5, 22%
#8396A838 (22%=38)
Quaternary Fill Tap state

 

UI Materials Colors

UI Materials colors are used with specific components and materials in the UI. Generally, they are applied to the backgrounds of a container. They are made up of neutral colors including shades of grey and white.

Light Mode Dark Mode Name Usage
Base / White
#FFFFFF
Grey 6, 24% on Black
#5B738B3D (24%=3D)
Header Header / navigation bar
Grey 6, 40% on Black
#5B738B66 (40%=66)
Header (Elevated) Header / navigation bar on elevated layers
Base / White, 85%
#FFFFFFD9 (85%=D9)
Grey 6, 21% on Black
#5B738B36 (21%=36)
Blended Header Header / navigation bar that blends with the background
Grey 6, 34% on Black
#5B738B57 (34%=57)
Blended Header (Elevated) Header / navigation bar that blends with the background on elevated layers
Grey 11, 85%
#12171CD9 (85%=D9)
Grey 11
#12171C
Transparent Bar Overlay layer background
Base / White
#FFFFFF
Grey 6, 28% on Black
#5B738B47 (28%=47)
Footer Toolbar, tab bar, floating bar
Grey 6, 42% on Black
#5B738B6B (42%_6B)
Footer (Elevated) Toolbar, tab bar, floating bar on elevated layers
Base / White , 0%       
#FFFFFF00 (0%=00)
Grey 9, 0% on Black
#22354800 (0%=00)
Cell Background Background of all cells
Grey 6
#5B738B
Grey 5
#8396A8
Contrast Element UI elements that need to stand out

 

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, or informative status).

Light Mode Dark Mode Name Usage
Red / Red 7
#D20A0A
Red / Red 5
#FF5C77
Negative Label High priority elements / negative actions
Mango / Mango 7
#C35500
Mango / Mango 5
#FFB300
Critical Label Medium priority elements / attention needed elements
Green / Green 7
#188918
Green / Green 5
#5DC122
Positive Label Positive elements
Red / Red 6, 8%
#EE393914 (8%=14)
Red / Red 6, 16%
#EE393929 (16% =29)
Negative Background Background of the area for presenting negative content
Mango / Mango 6, 8%
#E7650014 (8% =14)
Mango / Mango 6, 16%
#E7650029 (16% =29)
Critical Background Background of the area to present critical information
Green / Green 6
#BDDE5414 (8% =14)
Green / Green 6, 16%
#36A41D29 (16% =29)
Positive Background Background of the area for presenting positive content
Blue / Blue 6
#85D4FF14 (8% =14%)
Blue / Blue 6, 16%
#1B90FF29 (16% =29)
Informative Background Background of the area for presenting general information

 

Separator Colors

Separator colors are applied to linear elements such as divider lines used for adding visual breaks to content areas and border lines used for defining interactive areas like the text input field. There are two main separators: one with transparency and one without.

Light Mode Dark Mode Name
Grey / Grey 6, 37%
#5B738B5E (37%=5E)
Grey / Grey 5, 37%
#8396A85E (37%=5E)
Separator
Grey / Grey 6, 83%
#5B738BD4 (83%=D4)
Grey / Grey 5, 83%
#8396A8D4 (83%=D4)
Separator (opaque)

 

Shadow Colors

Shadow colors are colors that are applied to shadows used to elevate container elements such as for cards in the page layout.

Light Mode Dark Mode Name
Grey / Grey 6, 8%
#5B738B14 (8%=14)
Base / Black, 30%
#0000004D (30%=4D)
Card Shadow
Grey / Grey 6, 24%
#5B738B3D (24%=3D)
Base / Black, 37%
#0000005E (37%=5E)
Section Shadow

 

Accent Colors

Accent colors provide an additional level of color luminance and are used to enhance areas of the UI such as avatars, icons, and data visualizations. These color pairs comply with the accessibility standard.

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

Accessibility

The Horizon theme color palette offers color mapping logic that is easy to understand. It introduces eleven tonal values across nine color hues of vibrant and bold color. To ensure that color combinations comply with WCAG accessibility standards, we have developed a “pairing” system that enables you to easily create WCAG-compliant UIs and products.

For more information, see Accessibility.

Color contrast ratio scale
Color contrast ratio scale

Elevation

In iOS apps, elevation plays a key role in both light and dark modes. A drop shadow represents the elevation of a component, giving hierarchy to page content. There are six layers of container views, each with its own elevation level: base, level 0, level 1, level 2, level 3, and level 4. This layer-level treatment gives a 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

Light & Dark Mode

The iOS design system includes systemwide appearance settings for light and dark modes which use color consistently and sparingly.

Light Mode

Light mode is the default theme for the iOS design system. Touches of color are used to call attention to important information or show the relationship between parts of the interface.

Light mode example
Light mode example

Dark Mode

The dark color palette was created to provide a comfortable viewing experience tailored for low-light environments, which includes dimmer background colors and brighter foreground colors.

In dark mode, the system uses a dark color palette for all screens, views, menus, and controls, and may also use greater perceptual contrast to make foreground content stand out against the darker backgrounds.

iOS uses two sets of background colors — base and elevated — to enhance the perception of depth when one dark interface is layered above another. The base colors are dimmer, making background interfaces appear to recede, and the elevated colors are brighter, making foreground interfaces appear to advance. Dark mode also helps preserve battery life which is very useful for use cases where the user is mobile and needs to preserve battery life.

Dark mode example
Dark mode example

Resources

Development: FUIColorStyle

SAP Fiori for Android: Colors

Related Foundation: Accessibility