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>Dark Mode</div> <div>Name</div> <div>Usage</div> </div> <div> <div>#FFFFFF</div> <div>#14171A</div> <div><strong>S0-Background</strong></div> <div>Base Background (0dp)</div> </div> <div> <div>#FFFFFF</div> <div>#7198BF</div> <div><strong>S1-Primary</strong></div> <div>Elevated Surfaces (1dp-24dp)</div> </div> <div> <div>#0070F2</div> <div>#4DB1FF</div> <div><strong>S2-Secondary</strong></div> <div>Call-to-Action Elements</div> </div> <div> <div>#12171C</div> <div>#FFFFFF</div> <div><strong>S3-Tertiary</strong></div> <div>Snackbar Background</div> </div> <div> <div>#F5F6F7</div> <div>#5B738B</div> <div><strong>S4-Quarternary</strong></div> <div>Muted Backgrounds</div> </div> <div> <div>#0070F2</div> <div>#4DB1FF</div> <div><strong>S5-Selected Surface</strong></div> <div>Selected Backgrounds</div> </div> <div> <div>#FFFFFF</div> <div>#7198BF</div> <div><strong>S6-Header</strong></div> <div>Header Background</div> </div> <div> <div>#5B738B</div> <div>#A9B4BE</div> <div><strong>S7-Switch</strong></div> <div>Idle Switch Backgrounds</div> </div> <div> <div>#475E75</div> <div>#D5DADD</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>Dark Mode</div> <div>Name</div> <div>Usage</div> </div> <div> <div>#223548</div> <div>#F5F6F7</div> <div><strong>T1-Main on Primary</strong></div> <div>Titles, Subtitles</div> </div> <div> <div>#475E75</div> <div>#D5DADD</div> <div><strong>T2-Support on Primary</strong></div> <div>Body Text, Caption</div> </div> <div> <div>#5B738B</div> <div>#A9B4BE</div> <div><strong>T3-Minor on Primary</strong></div> <div>Muted Text, Placeholder Text</div> </div> <div> <div>#0070F2</div> <div>#4DB1FF</div> <div><strong>T4-CTA on Primary</strong></div> <div>Tinted Text, Links, Interactive Icons</div> </div> <div> <div>#FFFFFF</div> <div>#12171C</div> <div><strong>T5-Main on Secondary</strong></div> <div>Text on S2-Secondary</div> </div> <div> <div>#4DB1FF</div> <div>#0070F2</div> <div><strong>T6-Main on Tertiary</strong></div> <div>Text on S3-Tertiary</div> </div> <div> <div>#0057D2</div> <div>#89D1FF</div> <div><strong>T7-Selected Text</strong></div> <div>Selected Text on S5-Selected Surface</div> </div> <div> <div>#223548</div> <div>#F5F6F7</div> <div><strong>T8-Main on Header</strong></div> <div>Titles, Subtitles on Header</div> </div> <div> <div>#475E75</div> <div>#D5DADD</div> <div><strong>T9-Secondary on Header</strong></div> <div>Body Text, Caption on Header</div> </div> <div> <div>#5B738B</div> <div>#A9B4BE</div> <div><strong>T10-Tertiary on Header</strong></div> <div>Muted Text, Placeholder Text on Header</div> </div> <div> <div>#0070F2</div> <div>#4DB1FF</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>Dark Mode</div> <div>Name</div> <div>Usage</div> </div> <div> <div>#D5DADD</div> <div>#5B738B</div> <div><strong>B1-Section Divider</strong></div> <div>Divider Lines</div> </div> <div> <div>#8396A8</div> <div>#8396A8</div> <div><strong>B2-Default Border</strong></div> <div>Text Field Borders</div> </div> <div> <div>#0070F2</div> <div>#4DB1FF</div> <div><strong>B3-Selected Border</strong></div> <div>Selected Text Field Borders</div> </div> <div> <div>#0070F2</div> <div>#4DB1FF</div> <div><strong>B4-Light Selected Border</strong></div> <div>Transparent Selected Borders</div> </div> <div> <div>#5B738B</div> <div>#A9B4BE</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>Dark Mode</div> <div>Name</div> <div>Usage</div> </div> <div> <div>#D20A0A</div> <div>#FF5C77</div> <div><strong>Negative Label</strong></div> <div>Semantic Label</div> </div> <div> <div>#C35500</div> <div>#FFB300</div> <div><strong>Critical Label</strong></div> <div>Semantic Label</div> </div> <div> <div>#188918</div> <div>#5DC122</div> <div><strong>Positive Label</strong></div> <div>Semantic Label</div> </div> <div> <div>#0070F2</div> <div>#4DB1FF</div> <div><strong>Informative Label</strong></div> <div>Semantic Label</div> </div> <div> <div>#5B738B</div> <div>#A9B4BE</div> <div><strong>Neutral Label</strong></div> <div>Semantic Label</div> </div> <div> <div>#EE3939</div> <div>#EE3939</div> <div><strong>Negative Background</strong></div> <div>Semantic Background</div> </div> <div> <div>#E76500</div> <div>#E76500</div> <div><strong>Critical Background</strong></div> <div>Semantic Background</div> </div> <div> <div>#36A41D</div> <div>#36A41D</div> <div><strong>Positive Background</strong></div> <div>Semantic Background</div> </div> <div> <div>#1B90FF</div> <div>#1B90FF</div> <div><strong>Informational Background</strong></div> <div>Semantic Background</div> </div> <div> <div>#5B738B</div> <div>#5B738B</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>Dark Mode</div> <div>Name</div> <div></div> </div> <div> <div>#A93E00</div> <div>#FFDF72</div> <div><strong>Accent Label 1</strong></div> <div></div> </div> <div> <div>#AA0808</div> <div>#FFB2D2</div> <div><strong>Accent Label 2</strong></div> <div></div> </div> <div> <div>#BA066C</div> <div>#FECBDA</div> <div><strong>Accent Label 3</strong></div> <div></div> </div> <div> <div>#A100C2</div> <div>#FFAFED</div> <div><strong>Accent Label 4</strong></div> <div></div> </div> <div> <div>#470CED</div> <div>#D3B6FF</div> <div><strong>Accent Label 5</strong></div> <div></div> </div> <div> <div>#0057D2</div> <div>#A6E0FF</div> <div><strong>Accent Label 6</strong></div> <div></div> </div> <div> <div>#046C7A</div> <div>#64EDD2</div> <div><strong>Accent Label 7</strong></div> <div></div> </div> <div> <div>#256F3A</div> <div>#BDE986</div> <div><strong>Accent Label 8</strong></div> <div></div> </div> <div> <div>#354A5F</div> <div>#D5DADD</div> <div><strong>Accent Label 9</strong></div> <div></div> </div> <div> <div>#FFF3B8</div> <div>#8D2A00</div> <div><strong>Accent Background 1</strong></div> <div></div> </div> <div> <div>#FFD5EA</div> <div>#840606</div> <div><strong>Accent Background 2</strong></div> <div></div> </div> <div> <div>#FFDCE8</div> <div>#9B015D</div> <div><strong>Accent Background 3</strong></div> <div></div> </div> <div> <div>#FFDCF3</div> <div>#7800A4</div> <div><strong>Accent Background 4</strong></div> <div></div> </div> <div> <div>#E2D8FF</div> <div>#2C13AD</div> <div><strong>Accent Background 5</strong></div> <div></div> </div> <div> <div>#D1EFFF</div> <div>#0040B0</div> <div><strong>Accent Background 6</strong></div> <div></div> </div> <div> <div>#C2FCEE</div> <div>#035663</div> <div><strong>Accent Background 7</strong></div> <div></div> </div> <div> <div>#EBF5CB</div> <div>#1E592F</div> <div><strong>Accent Background 8</strong></div> <div></div> </div> <div> <div>#EAECEE</div> <div>#223548</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 detailed guidance, see Chart Colors Palettes – Values and Names
Qualitative Palette
The qualitative palette is intended to be used across all SAP technologies. “Ordered Color 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>#3278BE</div> <div>#3278BE</div> <div><strong>Ordered Color 1</strong></div> <div></div> </div> <div> <div>#C87B00</div> <div>#F2A634</div> <div><strong>Ordered Color 2</strong></div> <div></div> </div> <div> <div>#75980B</div> <div>#B4CE35</div> <div><strong>Ordered Color 3</strong></div> <div></div> </div> <div> <div>#DF1278</div> <div>#FA4F96</div> <div><strong>Ordered Color 4</strong></div> <div></div> </div> <div> <div>#8B47D7</div> <div>#8B47D7</div> <div><strong>Ordered Color 5</strong></div> <div></div> </div> <div> <div>#049F9A</div> <div>#049F9A</div> <div><strong>Ordered Color 6</strong></div> <div></div> </div> <div> <div>#0070F2</div> <div>#0070F2</div> <div><strong>Ordered Color 7</strong></div> <div></div> </div> <div> <div>#CC00DC</div> <div>#F31DED</div> <div><strong>Ordered Color 8</strong></div> <div></div> </div> <div> <div>#798C77</div> <div>#8EA18C</div> <div><strong>Ordered Color 9</strong></div> <div></div> </div> <div> <div>#DA6C6C</div> <div>#F28585</div> <div><strong>Ordered Color 10</strong></div> <div></div> </div> <div> <div>#5D36FF</div> <div>#7858FF</div> <div><strong>Ordered Color 11</strong></div> <div></div> </div> <div> <div>#A68A5B</div> <div>#A68A5B</div> <div><strong>Ordered Color 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>
