Colors

Foundations / Colors / Colors

Intro

Color sets the visual balance of SAP Fiori for Android apps. On screen, color is used to define the visual hierarchy of UI elements and to direct the user’s attention to complete their tasks.

Horizon Theme Color Palette

The Horizon color palette introduces a unified color palette that brings our brand and products together to achieve a cohesive experience across all SAP touchpoints. The Horizon color palette is designed to provide bold and vibrant color while remaining accessible in instances with complex UIs.

Horizon color palette

Horizon color palette

UI Colors

UI colors are colors that are grouped based on their role or usage within the UI. This additional level of abstraction allows product teams to swap out the default Horizon theme with their own product colors. UI colors are grouped into the following color groups:

  • Surface colors
  • Text colors
  • Borders colors
  • Semantic colors
  • Accent colors

Surface Colors

Surface colors are colors applied to the background of all components. These colors contrast with all foreground colors and are the basis for the overall theme. Surface colors are identified by the letter S followed by a number sequence (e.g., S1, S2, S3) in our UI Kit.

<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>#14171A</div> <div>Base Dark</div> <div><strong>S0-Background</strong></div> <div>Base Background (0dp)</div> </div> <div> <div>#FFFFFF</div> <div>Base White</div> <div>#7198BF</div> <div>Base Dark with Overlay</div> <div><strong>S1-Primary</strong></div> <div>Elevated Surfaces (1dp-24dp)</div> </div> <div> <div>#0070F2</div> <div>Blue 7</div> <div>#4DB1FF</div> <div>Blue 5</div> <div><strong>S2-Secondary</strong></div> <div>Call-to-Action Elements</div> </div> <div> <div>#12171C</div> <div>Grey 11</div> <div>#FFFFFF</div> <div>Base White</div> <div><strong>S3-Tertiary</strong></div> <div>Snackbar Background</div> </div> <div> <div>#F5F6F7</div> <div>Grey 1</div> <div>#5B738B</div> <div>Grey 6</div> <div><strong>S4-Quarternary</strong></div> <div>Muted Backgrounds</div> </div> <div> <div>#0070F2</div> <div>Blue 7<br>, 8%</div> <div>#4DB1FF</div> <div>Blue 5</div> <div><strong>S5-Selected Surface</strong></div> <div>Selected Backgrounds</div> </div> <div> <div>#FFFFFF</div> <div>Base White</div> <div>#7198BF</div> <div>Base Dark with Overlay</div> <div><strong>S6-Header</strong></div> <div>Header Background</div> </div> <div> <div>#5B738B</div> <div>Grey 6</div> <div>#A9B4BE</div> <div>Grey 4</div> <div><strong>S7-Switch</strong></div> <div>Idle Switch Backgrounds</div> </div> <div> <div>#475E75</div> <div>Grey 7</div> <div>#D5DADD</div> <div>Grey 3</div> <div><strong>S8-Switch Selected</strong></div> <div>Selected Switch Backgrounds</div> </div>

Text Colors

Text colors are colors applied to the text and icons of all components. These colors range from neutral grey colors to interactive brand colors applied to text and icons. Text colors are identified by the letter T followed by a number sequence (e.g., T1, T2, T3).

<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>T1-Main on Primary</strong></div> <div>Titles, Subtitles</div> </div> <div> <div>#475E75</div> <div>Grey 7</div> <div>#D5DADD</div> <div>Grey 3</div> <div><strong>T2-Support on Primary</strong></div> <div>Body Text, Caption</div> </div> <div> <div>#5B738B</div> <div>Grey 6</div> <div>#A9B4BE</div> <div>Grey 4</div> <div><strong>T3-Minor on Primary</strong></div> <div>Muted Text, Placeholder Text</div> </div> <div> <div>#0070F2</div> <div>Blue 7</div> <div>#4DB1FF</div> <div>Blue 5</div> <div><strong>T4-CTA on Primary</strong></div> <div>Tinted Text, Links, Interactive Icons</div> </div> <div> <div>#FFFFFF</div> <div>Base White</div> <div>#12171C</div> <div>Grey 11</div> <div><strong>T5-Main on Secondary</strong></div> <div>Text on S2-Secondary</div> </div> <div> <div>#4DB1FF</div> <div>Blue 5</div> <div>#0070F2</div> <div>Blue 7</div> <div><strong>T6-Main on Tertiary</strong></div> <div>Text on S3-Tertiary</div> </div> <div> <div>#0057D2</div> <div>Blue 8</div> <div>#89D1FF</div> <div>Blue 4</div> <div><strong>T7-Selected Text</strong></div> <div>Selected Text on S5-Selected Surface</div> </div> <div> <div>#223548</div> <div>Grey 9</div> <div>#F5F6F7</div> <div>Grey 1</div> <div><strong>T8-Main on Header</strong></div> <div>Titles, Subtitles on Header</div> </div> <div> <div>#475E75</div> <div>Grey 7</div> <div>#D5DADD</div> <div>Grey 3</div> <div><strong>T9-Secondary on Header</strong></div> <div>Body Text, Caption on Header</div> </div> <div> <div>#5B738B</div> <div>Grey 6</div> <div>#A9B4BE</div> <div>Grey 4</div> <div><strong>T10-Tertiary on Header</strong></div> <div>Muted Text, Placeholder Text on Header</div> </div> <div> <div>#0070F2</div> <div>Blue 7</div> <div>#4DB1FF</div> <div>Blue 5</div> <div><strong>T11 - CTA on Header</strong></div> <div>Tinted Text, Links, Interactive Icons on Header</div> </div>

Border Colors

Border colors are applied to any linear elements such as dividers or graphical elements used to define any areas within components. These colors range from neutral grey colors to interactive brand colors often used to communicate the state of a certain part of a component. Border colors are identified by the letter B followed by a number sequence (e.g., B1, B2, B3).

<div> <div>Light Mode</div> <div></div> <div>Dark Mode</div> <div></div> <div>Name</div> <div>Usage</div> </div> <div> <div>#D5DADD</div> <div>Grey 3</div> <div>#5B738B</div> <div>Grey 6<br>50%</div> <div><strong>B1-Section Divider</strong></div> <div>Divider Lines</div> </div> <div> <div>#8396A8</div> <div>Grey 5</div> <div>#8396A8</div> <div>Grey 5</div> <div><strong>B2-Default Border</strong></div> <div>Text Field Borders</div> </div> <div> <div>#0070F2</div> <div>Blue 7</div> <div>#4DB1FF</div> <div>Blue 5</div> <div><strong>B3-Selected Border</strong></div> <div>Selected Text Field Borders</div> </div> <div> <div>#0070F2</div> <div>Blue 7<br>, 28%</div> <div>#4DB1FF</div> <div>Blue 5<br>, 36%</div> <div><strong>B4-Light Selected Border</strong></div> <div>Transparent Selected Borders</div> </div> <div> <div>#5B738B</div> <div>Grey 6</div> <div>#A9B4BE</div> <div>Grey 4</div> <div><strong>B5-Border Switch</strong></div> <div>Idle Switch Borders</div> </div>

Semantic Colors

Semantic colors are applied to any foreground or background elements such as text, icons, or backgrounds to communicate a component’s status, state, or level of priority. These colors are bright in hue to direct the user’s attention to a certain component or part of the UI. Semantic colors are identified by the following naming (e.g., negative label, critical label, positive label, and neutral label).

<div> <div>Light Mode</div> <div></div> <div>Dark Mode</div> <div></div> <div>Name</div> <div>Usage</div> </div> <div> <div>#D20A0A</div> <div>Red 7</div> <div>#FF5C77</div> <div>Red 5</div> <div><strong>Negative Label</strong></div> <div>Semantic Label</div> </div> <div> <div>#C35500</div> <div>Mango 7</div> <div>#FFB300</div> <div>Mango 5</div> <div><strong>Critical Label</strong></div> <div>Semantic Label</div> </div> <div> <div>#188918</div> <div>Green 7</div> <div>#5DC122</div> <div>Green 5</div> <div><strong>Positive Label</strong></div> <div>Semantic Label</div> </div> <div> <div>#0070F2</div> <div>Blue 7</div> <div>#4DB1FF</div> <div>Blue 5</div> <div><strong>Informative Label</strong></div> <div>Semantic Label</div> </div> <div> <div>#5B738B</div> <div>Grey 7</div> <div>#A9B4BE</div> <div>Grey 5</div> <div><strong>Neutral Label</strong></div> <div>Semantic Label</div> </div> <div> <div>#EE3939</div> <div>Red 6<br>, 8%</div> <div>#EE3939</div> <div>Red 6<br>, 12%</div> <div><strong>Negative Background</strong></div> <div>Semantic Background</div> </div> <div> <div>#E76500</div> <div>Mango 6<br>, 8%</div> <div>#E76500</div> <div>Mango 6<br>, 12%</div> <div><strong>Critical Background</strong></div> <div>Semantic Background</div> </div> <div> <div>#36A41D</div> <div>Green 6<br>, 8%</div> <div>#36A41D</div> <div>Green 6<br>, 12%</div> <div><strong>Positive Background</strong></div> <div>Semantic Background</div> </div> <div> <div>#1B90FF</div> <div>Blue 6<br>, 8%</div> <div>#1B90FF</div> <div>Blue 6<br>, 12%</div> <div><strong>Informational Background</strong></div> <div>Semantic Background</div> </div> <div> <div>#5B738B</div> <div>Grey 6<br>, 8%</div> <div>#5B738B</div> <div>Grey 6<br>, 12%</div> <div><strong>Neutral Background</strong></div> <div>Semantic Background</div> </div>

Accent Colors

Accent colors provide an additional level of color luminance and are used to accent areas of the UI such as avatars, icons, and decorative areas. 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).

<div> <div>Light Mode</div> <div></div> <div>Dark Mode</div> <div></div> <div>Name</div> <div></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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <div> <div>#FFD5EA</div> <div>Red 2</div> <div>#840606</div> <div>Red 4</div> <div><strong>Accent Background 2</strong></div> <div></div> </div> <div> <div>#FFDCE8</div> <div>Raspberry 2</div> <div>#9B015D</div> <div>Raspberry 3</div> <div><strong>Accent Background 3</strong></div> <div></div> </div> <div> <div>#FFDCF3</div> <div>Pink 2</div> <div>#7800A4</div> <div>Pink 3</div> <div><strong>Accent Background 4</strong></div> <div></div> </div> <div> <div>#E2D8FF</div> <div>Indigo 2</div> <div>#2C13AD</div> <div>Indigo 3</div> <div><strong>Accent Background 5</strong></div> <div></div> </div> <div> <div>#D1EFFF</div> <div>Blue 2</div> <div>#0040B0</div> <div>Blue 2</div> <div><strong>Accent Background 6</strong></div> <div></div> </div> <div> <div>#C2FCEE</div> <div>Teal 2</div> <div>#035663</div> <div>Teal 3</div> <div><strong>Accent Background 7</strong></div> <div></div> </div> <div> <div>#EBF5CB</div> <div>Green 2</div> <div>#1E592F</div> <div>Green 3</div> <div><strong>Accent Background 8</strong></div> <div></div> </div> <div> <div>#EAECEE</div> <div>Grey 2</div> <div>#223548</div> <div>Grey 3</div> <div><strong>Accent Background 9</strong></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. Our Horizon theme color palette ensures that color combinations comply with WCAG accessibility standards.

For more information, see Accessibility.

Color contrast ratio scale

Color contrast ratio scale

Themes

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

Light Mode

Light mode is the default mode for the Android design system. Light mode is a bright UI that displays dark grey foreground elements and saturated accent colors against light surfaces. In light mode, neutral colors are used to make content readable, and accent colors are used sparingly to call attention to important information or show the relationship between parts of the interface. Lastly, light mode is best used in bright environments where battery life isn’t an issue.

Light mode example

Light mode example

Dark Mode

Dark mode is the secondary mode for the Android design system. Dark mode is a dim UI that displays white foreground elements and desaturated accent colors against dark surfaces. In dark mode, all component surfaces and backgrounds are dark grey in color with tonal variations depending on a component’s elevation. Lastly, dark mode preserves battery life (especially on OLED screens) by reducing the usage of light pixels, helpful in scenarios where the user needs to reduce battery consumption.

Dark mode example

Dark mode example

Resources

Development: Theming and Styling

SAP Fiori for iOS: Colors

Related Components/Patterns: Accessibility