Tonal Option

Foundations / Colors / Tonal Option

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.

Tonal Option Theme

The tonal option theme introduces Material 3’s tone-based surfaces, which maintain enhanced visual hierarchy, improved color contrast between foreground and surface colors, and a refreshed UI with visually balanced colors. Additionally, tone-based surfaces play a crucial role in large-screen layouts, ensuring each element feels integrated into the broader interface while maintaining clarity and focus across multiple screen sizes.

Tonal option theme color palette

Brand Colors

Brand colors express SAP Fiori’s identity and provide a cohesive brand voice throughout the design system. There are three levels of brand color roles that provide different levels of emphasis: Primary, Secondary, and Tertiary. These color roles are used throughout the UI to bring attention to essential actions on screen, convey interactivity, and express a product’s branding.

Brand colors: Primary, Secondary, and Tertiary with container variants

Primary

Primary and Primary Container are used for essential actions on screen. Primary is best used for text and icons and Primary Container for contained components such as contained buttons and FABs. Because of their high emphasis, Primary and Primary Container should be used sparingly.

<div> <div>Light</div> <div>Light MC</div> <div>Light HC</div> <div>Dark</div> <div>Dark MC</div> <div>Dark HC</div> <div>Name</div> </div> <div> <div>#0057D2</div> <div>#0040B0</div> <div>#002A86</div> <div>#4DB1FF</div> <div>#89D1FF</div> <div>#A6E0FF</div> <div><strong>Primary</strong></div> </div> <div> <div>#FFFFFF</div> <div>#FFFFFF</div> <div>#FFFFFF</div> <div>#000921</div> <div>#000921</div> <div>#000000</div> <div><strong>On Primary</strong></div> </div> <div> <div>#0070F2</div> <div>#0057D2</div> <div>#0040B0</div> <div>#1B90FF</div> <div>#4DB1FF</div> <div>#89D1FF</div> <div><strong>Primary Container</strong></div> </div> <div> <div>#FFFFFF</div> <div>#FFFFFF</div> <div>#FFFFFF</div> <div>#000921</div> <div>#000921</div> <div>#000000</div> <div><strong>On Primary Container</strong></div> </div>

Secondary

Secondary and Secondary Container are muted versions of Primary and should be used on less-emphasized actions on screen. Secondary and Secondary Container are best used for less emphasized fills, text, and icons such as tint tonal button and tint tonal FAB variants. Secondary container is also used to indicate a selected container such as the selected destinations in the navigation bar, navigation drawer, and navigation rail.

<div> <div>Light</div> <div>Light MC</div> <div>Light HC</div> <div>Dark</div> <div>Dark MC</div> <div>Dark HC</div> <div>Name</div> </div> <div> <div>#365F99</div> <div>#234261</div> <div>#0A2036</div> <div>#A2C8F2</div> <div>#B2CDEB</div> <div>#F2F7FC</div> <div><strong>Secondary</strong></div> </div> <div> <div>#FFFFFF</div> <div>#FFFFFF</div> <div>#FFFFFF</div> <div>#1D3245</div> <div>#071726</div> <div>#000000</div> <div><strong>On Secondary</strong></div> </div> <div> <div>#CAE2FA</div> <div>#234261</div> <div>#234261</div> <div>#253E6B</div> <div>#7790BD</div> <div>#ADCBFF</div> <div><strong>Secondary Container</strong></div> </div> <div> <div>#00144A</div> <div>#FFFFFF</div> <div>#FFFFFF</div> <div>#CAD5EB</div> <div>#000000</div> <div>#000000</div> <div><strong>On Secondary Container</strong></div> </div>

Tertiary

Tertiary and Tertiary Container are the low-emphasis brand colors. Tertiary and Tertiary Container are best used for recessed fills, text, and icons such as neutral tonal button and neutral tonal FAB variants. Additionally, Tertiary and Tertiary container can add another level of neutral color apart from On Surface and On Surface Container.

<div> <div>Light</div> <div>Light MC</div> <div>Light HC</div> <div>Dark</div> <div>Dark MC</div> <div>Dark HC</div> <div>Name</div> </div> <div> <div>#4E6073</div> <div>#304559</div> <div>#1A232B</div> <div>#C0C6CC</div> <div>#C5CBD1</div> <div>#F7FAFC</div> <div><strong>Tertiary</strong></div> </div> <div> <div>#FFFFFF</div> <div>#FFFFFF</div> <div>#FFFFFF</div> <div>#223140</div> <div>#091017</div> <div>#000000</div> <div><strong>On Tertiary</strong></div> </div> <div> <div>#DDE2E5</div> <div>#61778C</div> <div>#304559</div> <div>#3C4752</div> <div>#85919E</div> <div>#BBCCDE</div> <div><strong>Tertiary Container</strong></div> </div> <div> <div>#161C21</div> <div>#FFFFFF</div> <div>#FFFFFF</div> <div>#DDE2E5</div> <div>#000000</div> <div>#000000</div> <div><strong>On Tertiary Container</strong></div> </div>

Surface Colors

Surface color roles provide distinct visual separation and emphasis for backgrounds and contained surfaces throughout the design system. By intentionally using these color roles, designers can achieve visually balanced layouts with intentional focus points. Lastly, these color roles help to organize content, elevate important information, and create visual separation for more accessible layouts.

Surface and Surface Container: primary neutral background color role

Surface

Surface serves as the backbone of the main screen. Surface can also be used for contained components to create a recessed effect on the background. This helps to emphasize other panes and containers for improved visual balance.

<div> <div>Light</div> <div>Light MC</div> <div>Light HC</div> <div>Dark</div> <div>Dark MC</div> <div>Dark HC</div> <div>Name</div> </div> <div> <div>#F5F6F7</div> <div>#F5F6F7</div> <div>#F5F6F7</div> <div>#2C3A4D</div> <div>#2C3A4D</div> <div>#2C3A4D</div> <div><strong>Surface Bright</strong></div> </div> <div> <div>#F5F6F7</div> <div>#F5F6F7</div> <div>#F5F6F7</div> <div>#101319</div> <div>#101319</div> <div>#101319</div> <div><strong>Surface</strong></div> </div> <div> <div>#D5DADD</div> <div>#D5DADD</div> <div>#D5DADD</div> <div>#101319</div> <div>#101319</div> <div>#101319</div> <div><strong>Surface Dim</strong></div> </div>

Surface Container

Surface Containers are primarily used to contrast against the Surface color role. There are five levels of emphasis: Surface Container Lowest, Surface Container Low, Surface Container, Surface Container High, and Surface Container Highest. Use these surface container color roles to create visual separation and provide emphasis between different panes throughout the UI.

<div> <div>Light</div> <div>Light MC</div> <div>Light HC</div> <div>Dark</div> <div>Dark MC</div> <div>Dark HC</div> <div>Name</div> </div> <div> <div>#FFFFFF</div> <div>#FFFFFF</div> <div>#FFFFFF</div> <div>#0E0F12</div> <div>#0E0F12</div> <div>#0E0F12</div> <div><strong>Surface Container Lowest</strong></div> </div> <div> <div>#EEF1F5</div> <div>#EEF1F5</div> <div>#EEF1F5</div> <div>#191D21</div> <div>#191D21</div> <div>#191D21</div> <div><strong>Surface Container Low</strong></div> </div> <div> <div>#E9EDF0</div> <div>#E9EDF0</div> <div>#E9EDF0</div> <div>#1D2126</div> <div>#1D2126</div> <div>#1D2126</div> <div><strong>Surface Container</strong></div> </div> <div> <div>#E1E5EB</div> <div>#E1E5EB</div> <div>#E1E5EB</div> <div>#242A33</div> <div>#242A33</div> <div>#242A33</div> <div> <p><strong>Surface Container</strong></p> <p><strong>High</strong></p> </div> </div> <div> <div>#DADFE5</div> <div>#DADFE5</div> <div>#DADFE5</div> <div>#2D3540</div> <div>#2D3540</div> <div>#2D3540</div> <div> <p><strong>Surface Container</strong></p> <p><strong>Highest</strong></p> </div> </div>

On Surface and On Surface Variant

On Surface and On Surface Variant are the dedicated “On” Colors used against the Surface and Surface Container color roles. On Surface is the default color for text and icons meanwhile On Surface Variant is used as a supporting color for text and icons.

<div> <div>Light</div> <div>Light MC</div> <div>Light HC</div> <div>Dark</div> <div>Dark MC</div> <div>Dark HC</div> <div>Name</div> </div> <div> <div>#1A2733</div> <div>#12171C</div> <div>#000000</div> <div>#EAECEE</div> <div>#F5F6F7</div> <div>#FFFFFF</div> <div><strong>On Surface</strong></div> </div> <div> <div>#354A5F</div> <div>#223548</div> <div>#17222B</div> <div>#A9B4BE</div> <div>#D5DADD</div> <div>#FFFFFF</div> <div><strong>On Surface Variant</strong></div> </div>

Inverse Surface

Inverse surface colors are colors used in the snackbar component, and any component that needs to have inverse contrast against the UI.

<div> <div>Light</div> <div>Light MC</div> <div>Light HC</div> <div>Dark</div> <div>Dark MC</div> <div>Dark HC</div> <div>Name</div> </div> <div> <div>#23303B</div> <div>#23303B</div> <div>#23303B</div> <div>#DADFE5</div> <div>#DADFE5</div> <div>#DADFE5</div> <div><strong>Inverse Surface</strong></div> </div> <div> <div>#EDF1F5</div> <div>#EDF1F5</div> <div>#FFFFFF</div> <div>#23303B</div> <div>#1C2833</div> <div>#1C2833</div> <div><strong>Inverse On Surface</strong></div> </div> <div> <div>#89D1FF</div> <div>#89D1FF</div> <div>#D1EFFF</div> <div>#0057D2</div> <div>#003CAB</div> <div>#01287D</div> <div><strong>Inverse Primary</strong></div> </div>

Outline and Outline Variant

Outline and on Outline Variant colors are the two outline colors used to create separation within the surface and surface container color roles. Use Outline color role for outlines that need to be visible such as the border around the text input field and Outline Variant color role for decorative dividers.

<div> <div>Light</div> <div>Light MC</div> <div>Light HC</div> <div>Dark</div> <div>Dark MC</div> <div>Dark HC</div> <div>Name</div> </div> <div> <div>#4E647A</div> <div>#525E6B</div> <div>#34414F</div> <div>#939EB2</div> <div>#A1AFC7</div> <div>#BFC9D6</div> <div><strong>Outline</strong></div> </div> <div> <div>#BCC8D4</div> <div>#7E8F9E</div> <div>#34414F</div> <div>#2A3038</div> <div>#6E8199</div> <div>#BFC9D6</div> <div><strong>Outline Variant</strong></div> </div>

Semantic Colors

Semantic colors are applied to any foreground or background elements such as text, icons, or backgrounds to convey a component’s status, state, or level of priority. These colors are bright to direct the user’s attention to a certain component or part of the UI.

Semantic colors: Negative, Critical, Positive, Informative, and Neutral with container variants

Negative

Negative semantic color role is used to convey danger status, error state, or high priority. Use sparingly in UI elements such as status info label, contained button, text button, and badge.

<div> <div>Light</div> <div>Light MC</div> <div>Light HC</div> <div>Dark</div> <div>Dark MC</div> <div>Dark HC</div> <div>Name</div> </div> <div> <div>#AA0808</div> <div>#840909</div> <div>#470000</div> <div>#FFB2D2</div> <div>#FABBD5</div> <div>#FFFAFC</div> <div><strong>Negative</strong></div> </div> <div> <div>#FFFFFF</div> <div>#FFFFFF</div> <div>#FFFFFF</div> <div>#5A0404</div> <div>#350000</div> <div>#000000</div> <div><strong>On Negative</strong></div> </div> <div> <div>#FFB2D2</div> <div>#840909</div> <div>#840909</div> <div>#840606</div> <div>#C77B7B</div> <div>#F5BAD2</div> <div><strong>Negative Container</strong></div> </div> <div> <div>#350000</div> <div>#FFFFFF</div> <div>#FFFFFF</div> <div>#FFD5EA</div> <div>#000000</div> <div>#000000</div> <div><strong>On Negative Container</strong></div> </div>

Critical

Critical semantic color role is used to convey warning status, critical state, or medium priority. Use sparingly in UI elements such as status info label or status indicators.

<div> <div>Light</div> <div>Light MC</div> <div>Light HC</div> <div>Dark</div> <div>Dark MC</div> <div>Dark HC</div> <div>Name</div> </div> <div> <div>#A93E00</div> <div>#6B2E14</div> <div>#3D0F06</div> <div>#F2C23D</div> <div>#F5C747</div> <div>#FFFFFC</div> <div><strong>Critical</strong></div> </div> <div> <div>#FFFFFF</div> <div>#FFFFFF</div> <div>#FFFFFF</div> <div>#6D1900</div> <div>#450B00</div> <div>#000000</div> <div><strong>On Critical</strong></div> </div> <div> <div>#FFDF72</div> <div>#B85509</div> <div>#752502</div> <div>#8D2A00</div> <div>#BF8167</div> <div>#F5C747</div> <div><strong>Critical Container</strong></div> </div> <div> <div>#450B00</div> <div>#FFFFFF</div> <div>#FFFFFF</div> <div>#FFDF72</div> <div>#000000</div> <div>#000000</div> <div><strong>On Critical Container</strong></div> </div>

Positive

Positive semantic color role is used to convey available status, success state, or low priority. Use sparingly in UI elements such as status info label or status indicators.

<div> <div>Light</div> <div>Light MC</div> <div>Light HC</div> <div>Dark</div> <div>Dark MC</div> <div>Dark HC</div> <div>Name</div> </div> <div> <div>#256F3A</div> <div>#0F4A20</div> <div>#07240F</div> <div>#97DD40</div> <div>#A0DE52</div> <div>#F9FAF7</div> <div><strong>Positive</strong></div> </div> <div> <div>#FFFFFF</div> <div>#FFFFFF</div> <div>#FFFFFF</div> <div>#164323</div> <div>#091C0E</div> <div>#000000</div> <div><strong>On Positive</strong></div> </div> <div> <div>#BDE986</div> <div>#547D22</div> <div>#104A21</div> <div>#1E592F</div> <div>#649C74</div> <div>#9FDB53</div> <div><strong>Positive Container</strong></div> </div> <div> <div>#0E2B16</div> <div>#FFFFFF</div> <div>#FFFFFF</div> <div>#BDE986</div> <div>#000000</div> <div>#000000</div> <div> <p><strong>On Positive</strong></p> <p><strong>Container</strong></p> </div> </div>

Informative

Informative semantic color role is used to convey status, new state, or new category. Use sparingly in UI elements such as status info label or status indicators.

<div> <div>Light</div> <div>Light MC</div> <div>Light HC</div> <div>Dark</div> <div>Dark MC</div> <div>Dark HC</div> <div>Name</div> </div> <div> <div>#0057D2</div> <div>#093A91</div> <div>#0A1B4A</div> <div>#89D1FF</div> <div>#94D5FF</div> <div>#F2FBFF</div> <div><strong>Informative</strong></div> </div> <div> <div>#FFFFFF</div> <div>#FFFFFF</div> <div>#FFFFFF</div> <div>#002A86</div> <div>#00144A</div> <div>#000000</div> <div><strong>On Informative</strong></div> </div> <div> <div>#A6E0FF</div> <div>#076EE3</div> <div>#093A91</div> <div>#0040B0</div> <div>#7490C2</div> <div>#91D1FA</div> <div><strong>Informative Container</strong></div> </div> <div> <div>#00144A</div> <div>#FFFFFF</div> <div>#FFFFFF</div> <div>#A6E0FF</div> <div>#000000</div> <div>#000000</div> <div><strong>On Informative Container</strong></div> </div>

Neutral

Neutral semantic color role is used to convey open status, inactive state, or “other” category. Use sparingly in UI elements such as status info label or status indicators.

<div> <div>Light</div> <div>Light MC</div> <div>Light HC</div> <div>Dark</div> <div>Dark MC</div> <div>Dark HC</div> <div>Name</div> </div> <div> <div>#475E75</div> <div>#33414F</div> <div>#13202B</div> <div>#BEC7CF</div> <div>#C5CED6</div> <div>#F7FAFC</div> <div><strong>Neutral</strong></div> </div> <div> <div>#FFFFFF</div> <div>#FFFFFF</div> <div>#FFFFFF</div> <div>#223548</div> <div>#111A21</div> <div>#000000</div> <div><strong>On Neutral</strong></div> </div> <div> <div>#D5DADD</div> <div>#607487</div> <div>#2E4254</div> <div>#354A5F</div> <div>#7E92A6</div> <div>#C1CBD4</div> <div><strong>Neutral Container</strong></div> </div> <div> <div>#1A2733</div> <div>#FFFFFF</div> <div>#FFFFFF</div> <div>#D5DADD</div> <div>#000000</div> <div>#000000</div> <div><strong>On Neutral Container</strong></div> </div>

Accent Colors

Accent colors provide an additional level of visual emphasis 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 may be used sequentially, but it is not necessary. However, use the accent color along with its “On” color to maintain visual balance.

Accent Container Color 1-10 with container variants

Accent Container 1

<div> <div>Light</div> <div>Light MC</div> <div>Light HC</div> <div>Dark</div> <div>Dark MC</div> <div>Dark HC</div> <div>Name</div> </div> <div> <div>#FFF3B8</div> <div>#BA5406</div> <div>#752504</div> <div>#8D2A00</div> <div>#CF7B3A</div> <div>#F0BFAA</div> <div>Accent Container 1</div> </div> <div> <div>#A93E00</div> <div>#FFFFFF</div> <div>#FFFFFF</div> <div>#FFDF72</div> <div>#000000</div> <div>#000000</div> <div>On Accent Container 1</div> </div>

Accent Container 2

<div> <div>Light</div> <div>Light MC</div> <div>Light HC</div> <div>Dark</div> <div>Dark MC</div> <div>Dark HC</div> <div>Name</div> </div> <div> <div>#FFD5EA</div> <div>#D13838</div> <div>#840909</div> <div>#840606</div> <div>#EB6363</div> <div>#FAB9B9</div> <div>Accent Container 2</div> </div> <div> <div>#AA0808</div> <div>#FFFFFF</div> <div>#FFFFFF</div> <div>#FFB2D2</div> <div>#000000</div> <div>#000000</div> <div>On Accent Container 2</div> </div>

Accent Container 3

<div> <div>Light</div> <div>Light MC</div> <div>Light HC</div> <div>Dark</div> <div>Dark MC</div> <div>Dark HC</div> <div>Name</div> </div> <div> <div>#FFDCE8</div> <div>#D91677</div> <div>#7D094E</div> <div>#9B015D</div> <div>#E560A3</div> <div>#F7B7DE</div> <div>Accent Container 3</div> </div> <div> <div>#BA066C</div> <div>#FFFFFF</div> <div>#FFFFFF</div> <div>#FECBDA</div> <div>#000000</div> <div>#000000</div> <div>On Accent Container 3</div> </div>

Accent Container 4

<div> <div>Light</div> <div>Light MC</div> <div>Light HC</div> <div>Dark</div> <div>Dark MC</div> <div>Dark HC</div> <div>Name</div> </div> <div> <div>#FFDCF3</div> <div>#C313D1</div> <div>#6A0091</div> <div>#7800A4</div> <div>#DD56E8</div> <div>#E7BAF7</div> <div>Accent Container 4</div> </div> <div> <div>#A100C2</div> <div>#FFFFFF</div> <div>#FFFFFF</div> <div>#FFAFED</div> <div>#000000</div> <div>#000000</div> <div>On Accent Container 4</div> </div>

Accent Container 5

<div> <div>Light</div> <div>Light MC</div> <div>Light HC</div> <div>Dark</div> <div>Dark MC</div> <div>Dark HC</div> <div>Name</div> </div> <div> <div>#E2D8FF</div> <div>#745AE5</div> <div>#3A24AB</div> <div>#2C13AD</div> <div>#9381E5</div> <div>#CCC4F2</div> <div>Accent Container 5</div> </div> <div> <div>#470CED</div> <div>#FFFFFF</div> <div>#FFFFFF</div> <div>#E2D8FF</div> <div>#000000</div> <div>#000000</div> <div>On Accent Container 5</div> </div>

Accent Container 6

<div> <div>Light</div> <div>Light MC</div> <div>Light HC</div> <div>Dark</div> <div>Dark MC</div> <div>Dark HC</div> <div>Name</div> </div> <div> <div>#D1EFFF</div> <div>#2171CF</div> <div>#123C87</div> <div>#0040B0</div> <div>#5693DB</div> <div>#B7CBED</div> <div>Accent Container 6</div> </div> <div> <div>#0057D2</div> <div>#FFFFFF</div> <div>#FFFFFF</div> <div>#A6E0FF</div> <div>#000000</div> <div>#000000</div> <div>On Accent Container 6</div> </div>

Accent Container 7

<div> <div>Light</div> <div>Light MC</div> <div>Light HC</div> <div>Dark</div> <div>Dark MC</div> <div>Dark HC</div> <div>Name</div> </div> <div> <div>#C2FCEE</div> <div>#167D87</div> <div>#15464F</div> <div>#035663</div> <div>#3D9DA6</div> <div>#99D4DE</div> <div>Accent Container 7</div> </div> <div> <div>#046C7A</div> <div>#FFFFFF</div> <div>#FFFFFF</div> <div>#64EDD2</div> <div>#000000</div> <div>#000000</div> <div>On Accent Container 7</div> </div>

Accent Container 8

<div> <div>Light</div> <div>Light MC</div> <div>Light HC</div> <div>Dark</div> <div>Dark MC</div> <div>Dark HC</div> <div>Name</div> </div> <div> <div>#EBF5CB</div> <div>#3B803B</div> <div>#25472F</div> <div>#1E592F</div> <div>#609E60</div> <div>#93D9A7</div> <div>Accent Container 8</div> </div> <div> <div>#256F3A</div> <div>#FFFFFF</div> <div>#FFFFFF</div> <div>#BDE986</div> <div>#000000</div> <div>#000000</div> <div>On Accent Container 8</div> </div>

Accent Container 9

<div> <div>Light</div> <div>Light MC</div> <div>Light HC</div> <div>Dark</div> <div>Dark MC</div> <div>Dark HC</div> <div>Name</div> </div> <div> <div>#DDCCF0</div> <div>#9151D6</div> <div>#532C7D</div> <div>#46216E</div> <div>#AC77E5</div> <div>#D9BFF5</div> <div>Accent Container 9</div> </div> <div> <div>#4E247A</div> <div>#FFFFFF</div> <div>#FFFFFF</div> <div>#B995E0</div> <div>#000000</div> <div>#000000</div> <div>On Accent Container 9</div> </div>

Accent Container 10

<div> <div>Light</div> <div>Light MC</div> <div>Light HC</div> <div>Dark</div> <div>Dark MC</div> <div>Dark HC</div> <div>Name</div> </div> <div> <div>#EAECEE</div> <div>#5D748B</div> <div>#2F4254</div> <div>#223548</div> <div>#7E92A6</div> <div>#B8CCDE</div> <div>Accent Container 10</div> </div> <div> <div>#354A5F</div> <div>#FFFFFF</div> <div>#FFFFFF</div> <div>#D5DADD</div> <div>#000000</div> <div>#000000</div> <div>On Accent Container 10</div> </div>

Accessibility

The tonal option 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

Modes

The tonal option supports light and dark modes that provide a systemwide change to the Fiori SDK’s color scheme.

Light Mode

Light mode is the default mode that displays dark grey foreground text and saturated brand colors against light tonal surfaces. It is ideally used in bright and well-lit environments.

Light mode example

Dark Mode

Dark mode is the secondary mode that displays white foreground elements and desaturated accent colors against dark tonal surfaces. It is primarily used to reduce eye strain in low-light settings and to extend battery life.

Dark mode example

Resources

Development: Theming and Styling

SAP Fiori for iOS: Colors

Related Components/Patterns: Accessibility