Colors

FUIColorStyle

Foundations / Colors

Intro

Color plays a significant role by setting the visual balance for iOS apps. Color is used to define the visual hierarchy of UI elements and to direct the user’s attention to the most important tasks.

Horizon Theme Color Palette

Our color system builds on a unified color palette that aligns with our brand and helps to create cohesive experiences across SAP touchpoints. The Horizon theme color palette is designed to provide flexibility to our design system while remaining accessible in instances of complex UIs. Its vibrant hues enable a flexible yet consistent color system for all SAP products.

Horizon theme UI reference colors

Horizon theme UI reference colors

UI Colors

UI colors serve as an intermediate layer within the user interface, categorized by their specific roles or purposes. SAP Fiori for iOS follows the iOS standard from the Human Interface Guidelines (HIG) to ensure a structured approach to maintain consistency and accessibility across different contexts and interfaces. These dynamic colors adapt seamlessly to system appearance changes, such as light and dark modes.

Background Colors

The iOS design system defines two sets of dynamic background colors — Background and Grouped Background — each of which contains primary, secondary, and tertiary variants that help to convey a hierarchy of information. They are made up of neutral colors including shades of grey, all the way from white to black, depending on the color mode. Use these variants to indicate hierarchy in the following ways:

In Dark mode, the system adds an additional set of background colors — Elevated and Grouped Elevated — to enhance the perception of depth when one dark interface is layered above another. Elevated colors are brighter than Background and Grouped Background colors, making foreground interfaces appear to advance. These colors are applied automatically to the UI in modal sheets, form sheets, and other overlay panels.

See also Surface Colors on Android.

Background

When the page structure is flat and most information is on the same level, Background colors should be used (e.g. standard table views and designs that have a white primary background in a light mode).

<div> <div>Light Mode</div> <div></div> <div>Dark Mode</div> <div></div> <div>Name</div> <div>Usage</div> </div> <div> <div>#FFFFFF</div> <div>Base White</div> <div>#000000</div> <div>Base / Black</div> <div><strong>Primary Background</strong></div> <div>For the overall view such as table views, collection views, and general content areas</div> </div> <div> <div>#F5F6F7</div> <div>Grey 1</div> <div>#161C21</div> <div>Grey 6, 24% on Black</div> <div><strong>Secondary Background</strong></div> <div>For grouping elements within the overall view / to provide a subtle visual distinction from the primary background</div> </div> <div> <div>#FFFFFF</div> <div>Base White</div> <div>#242E38</div> <div>Grey 6, 40% on Black</div> <div><strong>Tertiary Background</strong></div> <div>For grouping content within secondary elements or less prominent background areas, such as minor interface elements or subtle dividers</div> </div> <div> <div></div> <div>N/A</div> <div>#171D23</div> <div>Grey 6, 25% on Black</div> <div><strong>Primary Background (Elevated)</strong></div> <div>For the overall view in modal sheets, form sheets, or overlay panels to enhance the perception of depth when one dark interface is layered above another</div> </div> <div> <div></div> <div>N/A</div> <div>#242D37</div> <div>Grey 6, 39.5% on Black</div> <div><strong>Secondary Background (Elevated)</strong></div> <div>For grouping elements within the overall view of modal sheets, form sheets, and overlay panels / to provide a subtle visual distinction from the primary background</div> </div> <div> <div></div> <div>N/A</div> <div>#2F3C48</div> <div>Grey 6, 52% on Black</div> <div><strong>Tertiary Background (Elevated)</strong></div> <div>For grouping content within secondary elements or less prominent background areas in modal sheets, form sheets, or overlay panels</div> </div>
Grouped Background

When the view has grouped content, including grouped table views and platter-based designs, Grouped Background colors should be used.

<div> <div>Light Mode</div> <div></div> <div>Dark Mode</div> <div></div> <div>Name</div> <div>Usage</div> </div> <div> <div>#F5F6F7</div> <div>Grey 1</div> <div>#000000</div> <div>Base Black</div> <div><strong>Primary Grouped Background</strong></div> <div>For the main background of a grouped interface</div> </div> <div> <div>#FFFFFF</div> <div>Base White</div> <div>#161C21</div> <div>Grey 6, 24% on Black</div> <div><strong>Secondary Grouped Background</strong></div> <div>For content layered on top of the main background of a grouped interface</div> </div> <div> <div>#F5F6F7</div> <div>Grey 1</div> <div>#242E38</div> <div>Grey 6, 40% on Black</div> <div><strong>Tertiary Grouped Background</strong></div> <div>For content layered on top of secondary backgrounds of a grouped interface / less prominent background elements, where appropriate</div> </div> <div> <div></div> <div>N/A</div> <div>#171D23</div> <div>Grey 6, 25% on Black</div> <div><strong>Primary Grouped Background (Elevated)</strong></div> <div>For the main background of a grouped interface in modal sheets, form sheets, or overlay panels</div> </div> <div> <div></div> <div>N/A</div> <div>#242D37</div> <div>Grey 6, 39.5% on Black</div> <div><strong>Secondary Grouped Background (Elevated)</strong></div> <div>For content layered on top of the main background of a grouped interface in modal sheets, form sheets, or overlay panels</div> </div> <div> <div></div> <div>N/A</div> <div>#2F3C48</div> <div>Grey 6, 52% on Black</div> <div><strong>Tertiary Grouped Background (Elevated)</strong></div> <div>For content layered on top of secondary backgrounds of a grouped interface / less prominent background elements, where appropriate, in in modal sheets, form sheets, or overlay panels</div> </div>

Tint Colors

Tint colors are used to indicate that certain elements are interactive, for example, interactive text, icons and primary buttons. Also used for branded areas of the UI. There are four variants: Tint, Tint 2, Tint 3 and Tint Tap State colors.

<div> <div>Light Mode</div> <div></div> <div>Dark Mode</div> <div></div> <div>Name</div> <div>Usage</div> </div> <div> <div>#0070F2</div> <div>Blue 7</div> <div>#4DB1FF</div> <div>Blue 5</div> <div><strong>Tint</strong></div> <div>Tappable elements (e.g. primary button, icon & text buttons, text links)</div> </div> <div> <div>#0057D2</div> <div>Blue 8</div> <div>#4DB1FF</div> <div>Blue 5</div> <div><strong>Tint 2</strong></div> <div>Tappable elements on less contrast backgrounds (e.g. secondary tint button label)</div> </div> <div> <div>#0070F2</div> <div>Blue 7,<br>8%</div> <div>#4DB1FF</div> <div>Blue 5,<br>16%</div> <div><strong>Tint 3</strong></div> <div>Tappable elements (e.g. secondary tint button background)</div> </div> <div> <div>#0040B0</div> <div>Blue 9</div> <div>#1B90FF</div> <div>Blue 6</div> <div><strong>Tint Tap State</strong></div> <div>Tap state of tappable elements using Tint or Tint 2</div> </div>

Label Colors

Label colors are used for all text elements in a view, available in five variants to provide a hierarchy of information. They are made up of neutral colors including white, black and shades of grey.

<div> <div>Light Mode</div> <div></div> <div>Dark Mode</div> <div></div> <div>Name</div> <div>Usage</div> </div> <div> <div>#223548</div> <div>Grey 9</div> <div>#F5F6F7</div> <div>Grey 1</div> <div><strong>Primary Label</strong></div> <div>Text labels that contain primary content (e.g. titles / primary texts / tertiary button label)</div> </div> <div> <div>#475E75</div> <div>Grey 7</div> <div>#D5DADD</div> <div>Grey 3</div> <div><strong>Secondary Label</strong></div> <div>Text labels that contain secondary content (e.g. subtitles / secondary texts / section header texts, secondary button label)</div> </div> <div> <div>#5B738B</div> <div>Grey 6</div> <div>#A9B4BE</div> <div>Grey 4</div> <div><strong>Tertiary Label</strong></div> <div>Text labels that contain tertiary content (e.g. footnotes / statuses / tertiary texts / placeholder texts)</div> </div> <div> <div>#8396A8</div> <div>Grey 5, 46%</div> <div>#A9B4BE</div> <div>Grey 4, 30%</div> <div><strong>Quaternary Label</strong></div> <div>Disabled state text elements</div> </div> <div> <div>#FFFFFF</div> <div>Base White</div> <div>#000000</div> <div>Base Black</div> <div><strong>Quinary Label</strong></div> <div>Primary button labels & icons</div> </div>

Fill Colors

Fill colors incorporate transparency to allow the background color to show through. They are used for items situated on top of an existing background color. Available in four variants to provide a hierarchy of information.

<div> <div>Light Mode</div> <div></div> <div>Dark Mode</div> <div></div> <div>Name</div> <div>Usage</div> </div> <div> <div>#8396A8</div> <div>Grey 5, 24%</div> <div>#8396A8</div> <div>Grey 5, 30%</div> <div><strong>Primary Fill</strong></div> <div>Use as an overlay for fill thin or small shapes on top of an existing background color</div> </div> <div> <div>#8396A8</div> <div>Grey 5, 20%</div> <div>#8396A8</div> <div>Grey 5, 28%</div> <div><strong>Secondary Fill</strong></div> <div>Use as an overlay fill for medium-size shapes on top of an existing background color, (e.g. button tap states)</div> </div> <div> <div>#8396A8</div> <div>Grey 5, 15%</div> <div>#8396A8</div> <div>Grey 5, 20%</div> <div><strong>Tertiary Fill</strong></div> <div>Use as an overlay fill for large shapes on top of an existing background color (e.g. secondary button)</div> </div> <div> <div>#8396A8</div> <div>Grey 5, 9%</div> <div>#8396A8</div> <div>Grey 5, 16%</div> <div><strong>Quaternary Fill</strong></div> <div>Use as an overlay fill for large shapes on top of an existing background color (e.g. disabled state fills / search bar)</div> </div>

Separator Colors

Separator colors are applied to thin borders or divider lines used for adding visual breaks to content areas and for defining interactive areas like the text input field. They are available in two variants: partially transparent and opaque.

<div> <div>Light Mode</div> <div></div> <div>Dark Mode</div> <div></div> <div>Name</div> <div>Usage</div> </div> <div> <div>#5B738B</div> <div>Grey 6, 37%</div> <div>#8396A8</div> <div>Grey 5, 37%</div> <div><strong>Separator</strong></div> <div>Non-interactive elements allowing some underlying content to be visible (e.g. decorative elements / separators / hairlines)</div> </div> <div> <div>#5B738B</div> <div>Grey 6, 83%</div> <div>#8396A8</div> <div>Grey 5, 83%</div> <div><strong>Separator (Opaque)</strong></div> <div>Non-interactive elements hiding any underlying content (e.g. higher contrast borders that are more opaque)</div> </div>

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: negative, critical, positive, informative, and neutral.

<div> <div>Light Mode</div> <div></div> <div>Dark Mode</div> <div></div> <div>Name</div> <div>Usage</div> </div> <div> <div>#AA0808</div> <div>Red 8</div> <div>#FF5C77</div> <div>Red 5</div> <div><strong>Negative Label</strong></div> <div>High priority elements / negative actions</div> </div> <div> <div>#A93E00</div> <div>Mango 8</div> <div>#FFB300</div> <div>Mango 5</div> <div><strong>Critical Label</strong></div> <div>Medium priority elements / attention needed elements</div> </div> <div> <div>#188918</div> <div>Green 8</div> <div>#5DC122</div> <div>Green 5</div> <div><strong>Positive Label</strong></div> <div>Positive elements</div> </div> <div> <div>#0057D2</div> <div>Blue 8</div> <div>#4DB1FF</div> <div>Blue 5</div> <div><strong>Informative Label</strong></div> <div>Informative priority elements</div> </div> <div> <div>#354A5F</div> <div>Grey 8</div> <div>#8396A8</div> <div>Grey 5</div> <div><strong>Neutral Label</strong></div> <div>Neutral priority elements</div> </div> <div> <div>#EE3939</div> <div>Red 6, 8%</div> <div>#EE3939</div> <div>Red 6, 12%</div> <div><strong>Negative Background</strong></div> <div>Background of the area for presenting negative content</div> </div> <div> <div>#E76500</div> <div>Mango 6, 8%</div> <div>#E76500</div> <div>Mango 6, 12%</div> <div><strong>Critical Background</strong></div> <div>Background of the area for presenting critical information</div> </div> <div> <div>#BDDE54</div> <div>Green 6, 8%</div> <div>#36A41D</div> <div>Green 6, 12%</div> <div><strong>Positive Background</strong></div> <div>Background of the area for presenting positive information</div> </div> <div> <div>#85D4FF</div> <div>Blue 6, 8%</div> <div>#1B90FF</div> <div>Blue 6, 12%</div> <div><strong>Informative Background</strong></div> <div>Background of the area for presenting general information</div> </div> <div> <div>#5B738B</div> <div>Grey 6, 8%</div> <div>#5B738B</div> <div>Grey 6, 12%</div> <div><strong>Neutral Background</strong></div> <div>Background of the area for presenting neutral information</div> </div>

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 colors are bright in hue and provide visual variety to the UI. Accent colors are identified by the word “Accent” followed by a number sequence (e.g., Accent 1, Accent 2, Accent 3). These color pairs comply with the accessibility standard.

<div> <div>Light Mode</div> <div></div> <div>Dark Mode</div> <div></div> <div>Name</div> </div> <div> <div>#A93E00</div> <div>Mango 8</div> <div>#FFDF72</div> <div>Mango 3</div> <div><strong>Accent Label 1</strong></div> </div> <div> <div>#AA0808</div> <div>Red 8</div> <div>#FFB2D2</div> <div>Red 3</div> <div><strong>Accent Label 2</strong></div> </div> <div> <div>#BA066C</div> <div>Raspberry 8</div> <div>#FECBDA</div> <div>Raspberry 3</div> <div><strong>Accent Label 3</strong></div> </div> <div> <div>#A100C2</div> <div>Pink 8</div> <div>#FFAFED</div> <div>Pink 3</div> <div><strong>Accent Label 4</strong></div> </div> <div> <div>#470CED</div> <div>Indigo 8</div> <div>#D3B6FF</div> <div>Indigo 3</div> <div><strong>Accent Label 5</strong></div> </div> <div> <div>#0057D2</div> <div>Blue 8</div> <div>#A6E0FF</div> <div>Blue 3</div> <div><strong>Accent Label 6</strong></div> </div> <div> <div>#046C7A</div> <div>Teal 8</div> <div>#64EDD2</div> <div>Teal 3</div> <div><strong>Accent Label 7</strong></div> </div> <div> <div>#256F3A</div> <div>Green 8</div> <div>#BDE986</div> <div>Green 3</div> <div><strong>Accent Label 8</strong></div> </div> <div> <div>#354A5F</div> <div>Grey 8</div> <div>#D5DADD</div> <div>Grey 3</div> <div><strong>Accent Label 9</strong></div> </div> <div> <div>#FFF3B8</div> <div>Mango 2</div> <div>#8D2A00</div> <div>Mango 9</div> <div><strong>Accent Background 1</strong></div> </div> <div> <div>#FFD5EA</div> <div>Red 2</div> <div>#840606</div> <div>Red 9</div> <div><strong>Accent Background 2</strong></div> </div> <div> <div>#FFDCE8</div> <div>Raspberry 2</div> <div>#9B015D</div> <div>Raspberry 9</div> <div><strong>Accent Background 3</strong></div> </div> <div> <div>#FFDCF3</div> <div>Pink 2</div> <div>#7800A4</div> <div>Pink 9</div> <div><strong>Accent Background 4</strong></div> </div> <div> <div>#E2D8FF</div> <div>Indigo 2</div> <div>#2C13AD</div> <div>Indigo 9</div> <div><strong>Accent Background 5</strong></div> </div> <div> <div>#D1EFFF</div> <div>Blue 2</div> <div>#0040B0</div> <div>Blue 9</div> <div><strong>Accent Background 6</strong></div> </div> <div> <div>#C2FCEE</div> <div>Teal 2</div> <div>#035663</div> <div>Teal 9</div> <div><strong>Accent Background 7</strong></div> </div> <div> <div>#EBF5CB</div> <div>Green 2</div> <div>#1E592F</div> <div>Green 9</div> <div><strong>Accent Background 8</strong></div> </div> <div> <div>#EAECEE</div> <div>Grey 2</div> <div>#223548</div> <div>Grey 9</div> <div><strong>Accent Background 9</strong></div> </div>

Chart Colors

Chart colors have been designed to meet the requirements for data visualization, such as communicating meaning, providing contrast between data points, and visualizing high-to-low values. They can be used as a qualitative palette or sequential palette depending on product needs.

For more guidance, see Chart Colors Palettes – Values and Names.

Qualitative Palette

The qualitative palette is intended to be used across all SAP technologies. “Chart 1” is the default starting color and subsequent ordered colors should be used in numbered sequence; however, ordering of the chart colors may vary between chart libraries depending on the context.

<div> <div>Light Mode</div> <div>Dark Mode</div> <div>Name</div> <div></div> </div> <div> <div>#168EFF</div> <div>#3278BE</div> <div><strong>Chart 1</strong></div> <div></div> </div> <div> <div>#C87B00</div> <div>#F2A634</div> <div><strong>Chart 2</strong></div> <div></div> </div> <div> <div>#75980B</div> <div>#B4CE35</div> <div><strong>Chart 3</strong></div> <div></div> </div> <div> <div>#DF1278</div> <div>#FA4F96</div> <div><strong>Chart 4</strong></div> <div></div> </div> <div> <div>#8B47D7</div> <div>#8B47D7</div> <div><strong>Chart 5</strong></div> <div></div> </div> <div> <div>#049F9A</div> <div>#049F9A</div> <div><strong>Chart 6</strong></div> <div></div> </div> <div> <div>#0070F2</div> <div>#0070F2</div> <div><strong>Chart 7</strong></div> <div></div> </div> <div> <div>#CC00DC</div> <div>#F31DED</div> <div><strong>Chart 8</strong></div> <div></div> </div> <div> <div>#798C77</div> <div>#8EA18C</div> <div><strong>Chart 9</strong></div> <div></div> </div> <div> <div>#DA6C6C</div> <div>#F28585</div> <div><strong>Chart 10</strong></div> <div></div> </div> <div> <div>#5D36FF</div> <div>#7858FF</div> <div><strong>Chart 11</strong></div> <div></div> </div> <div> <div>#A68A5B</div> <div>#A68A5B</div> <div><strong>Chart 12</strong></div> <div></div> </div>

Semantic Palette

The semantic palette is intended to be used alongside the qualitative palette to denote any meaning regarding status, state, or level of priority. However, the contextual usage of chart colors can be determined as needed.

<div> <div>Light Mode</div> <div>Dark Mode</div> <div>Name</div> <div></div> </div> <div> <div>#F53232</div> <div>#F83030</div> <div><strong>Chart Bad</strong></div> <div></div> </div> <div> <div>#E26300</div> <div>#DD6100</div> <div><strong>Chart Critical</strong></div> <div></div> </div> <div> <div>#30914C</div> <div>#30914C</div> <div><strong>Chart Good</strong></div> <div></div> </div> <div> <div>#758CA4</div> <div>#6F89A1</div> <div><strong>Chart Neutral</strong></div> <div></div> </div>

Material Colors

Apple Materials are a set of colors and effects that impart translucency by blurring and modifying the color values of the underlying visual content. They are used to convey a sense of depth and hierarchical structure without distracting from content. This approach helps integrate key interface elements, such as navigation bars, modals, contextual menus, and toolbars, delivering a visually immersive experience that balances functionality with harmony.

As of release 24.4 of the SAP BTP SDK for SAP Fiori for iOS, Materials Chrome is introduced. Materials Chrome is an adaptable blur effect that creates the appearance of the system chrome, available in two variants to provide flexibility on various view and modal based surfaces.

<div> <div>Light Mode</div> <div></div> <div>Dark Mode</div> <div></div> <div>Dark Elevated Mode</div> <div></div> <div>Name</div> <div>Usage</div> </div> <div> <div>#FFFFFF</div> <div>Base White, 85%</div> <div>#000000</div> <div>Base Black, 75%</div> <div>#171D23</div> <div>Primary Elevated Background, 75%, 75%</div> <div><strong>Chrome</strong></div> <div>Chrome is paired with a Materials blur effect to provide translucency when scrolling content under navigation bar, toolbar, tab bar, or sibling navigation</div> </div> <div> <div>#FFFFFF</div> <div>Base White, 85%</div> <div>#161C21</div> <div>Secondary Background, 75%</div> <div>#171D23</div> <div>Secondary Elevated Background, 75%, 75%</div> <div><strong>Chrome Secondary</strong></div> <div>Chrome Secondary is paired with a Materials blur effect to provide translucency when scrolling content under navigation bar, toolbar, tab bar, or sibling navigation for page or modal views with secondary backgrounds</div> </div>

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

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