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.
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
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 |
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.
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 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
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.
