Intro

This page provides all the color token names that are intended for use in all SAP chart palettes.

Extended chart colors

Extended chart colors

Use of Tokens

Do

Use token/variable names.

Don't

Don’t use HEX values!

To support cross-technology chart implementation and theming capabilities, styles are defined by token names. Tokens ensure that values can be implemented centrally for multiple usages. This is explained in detail in the design token guidelines.

The associated HEX values shown on this page are for the Morning Horizon theme and should not be implemented directly in any implementation!

Values for the theming tokens for all themes are available within the directories of the open-sourced SAP Base Theming Content repository. Also check out the guidelines for design tokens and theming.

Qualitative Palette

Qualitative Palette with Base Chart Color Tokens

The base chart colors are intended to be used across all of the SAP technologies. The value of sapChart_OrderedColor_1 (and the corresponding sapChart_Sequence_1) is used as the default color across chart libraries. All of the ordered tokens are used as base values for all chart palettes. The technical ordering of the chart colors may vary between chart libraries depending on the context. However, it’s important to use the correct theming tokens to ensure consistency.

<div> <div>Token Name</div> <div>Morning<br>Horizon</div> </div> <div> <div>sapChart_OrderedColor_1</div> <div>#168eff</div> </div> <div> <div>sapChart_OrderedColor_2</div> <div>#c87b00</div> </div> <div> <div>sapChart_OrderedColor_3</div> <div>#75980b</div> </div> <div> <div>sapChart_OrderedColor_4</div> <div>#df1278</div> </div> <div> <div>sapChart_OrderedColor_5</div> <div>#8b47d7</div> </div> <div> <div>sapChart_OrderedColor_6</div> <div>#049f9a</div> </div> <div> <div>sapChart_OrderedColor_7</div> <div>#0070f2</div> </div> <div> <div>sapChart_OrderedColor_8</div> <div>#cc00dc</div> </div> <div> <div>sapChart_OrderedColor_9</div> <div>#798c77</div> </div> <div> <div>sapChart_OrderedColor_10</div> <div>#da6c6c</div> </div> <div> <div>sapChart_OrderedColor_11</div> <div>#5d36ff</div> </div> <div> <div>sapChart_OrderedColor_12</div> <div>#a68a5b</div> </div>

Sequential Palette

Chart Sequence Colors

Chart sequence colors are connected to the main chart ordered colors. For example, sapChart_OrderedColor_1 is used as the value for sapChart_Sequence_1. The other sequence colors are then calculated to be either lighter (plus) or darker (minus) versions of sapChart_Sequence_1. This simple color relationship logic makes colors easy to modify for themeability, allowing SAP to update any token centrally and also provide future-friendly theme compatibility across all SAP technologies.

Chart Sequence Color 1

<div> <div>Color Name</div> <div>Morning Horizon</div> </div> <div> <div>sapChart_Sequence_1_Plus3</div> <div>#8BC7FF</div> </div> <div> <div>sapChart_Sequence_1_Plus3_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_1_Plus2</div> <div>#62B3FF</div> </div> <div> <div>sapChart_Sequence_1_Plus2_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_1_Plus1</div> <div>#3FA2FF</div> </div> <div> <div>sapChart_Sequence_1_Plus1_TextColor</div> <div>#000000</div> </div> <div> <div><strong>sapChart_Sequence_1</strong></div> <div>#168EFF</div> </div> <div> <div>sapChart_Sequence_1_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_1_Minus1</div> <div>#0074E2</div> </div> <div> <div>sapChart_Sequence_1_Minus1_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_1_Minus2</div> <div>#0065C3</div> </div> <div> <div>sapChart_Sequence_1_Minus2_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_1_Minus3</div> <div>#0055A5</div> </div> <div> <div>sapChart_Sequence_1_Minus3_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_1_Minus4</div> <div>#003B72</div> </div> <div> <div>sapChart_Sequence_1_Minus4_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_1_Minus5</div> <div>#00305D</div> </div> <div> <div>sapChart_Sequence_1_Minus5_TextColor</div> <div>#ffffff</div> </div>

Chart Sequence Color 2

<div> <div>Color Name</div> <div>Morning Horizon</div> </div> <div> <div>sapChart_Sequence_2_Plus3</div> <div>#efbf72</div> </div> <div> <div>sapChart_Sequence_2_Plus3_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_2_Plus2</div> <div>#eaaa44</div> </div> <div> <div>sapChart_Sequence_2_Plus2_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_2_Plus1</div> <div>#e29419</div> </div> <div> <div>sapChart_Sequence_2_Plus1_TextColor</div> <div>#000000</div> </div> <div> <div><strong>sapChart_Sequence_2</strong></div> <div>#c87b00</div> </div> <div> <div>sapChart_Sequence_2_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_2_Minus1</div> <div>#9f6200</div> </div> <div> <div>sapChart_Sequence_2_Minus1_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_2_Minus2</div> <div>#7c4c00</div> </div> <div> <div>sapChart_Sequence_2_Minus2_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_2_Minus3</div> <div>#623c00</div> </div> <div> <div>sapChart_Sequence_2_Minus3_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_2_Minus4</div> <div>#492D00</div> </div> <div> <div>sapChart_Sequence_2_Minus4_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_2_Minus5</div> <div>#2f1d00</div> </div> <div> <div>sapChart_Sequence_2_Minus5_TextColor</div> <div>#ffffff</div> </div>

Chart Sequence Color 3

<div> <div>Color Name</div> <div>Morning Horizon</div> </div> <div> <div>sapChart_Sequence_3_Plus3</div> <div>#b9d369</div> </div> <div> <div>sapChart_Sequence_3_Plus3_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_3_Plus2</div> <div>#a6c742</div> </div> <div> <div>sapChart_Sequence_3_Plus2_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_3_Plus1</div> <div>#8fad33</div> </div> <div> <div>sapChart_Sequence_3_Plus1_TextColor</div> <div>#000000</div> </div> <div> <div><strong>sapChart_Sequence_3</strong></div> <div>#75980b</div> </div> <div> <div>sapChart_Sequence_3_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_3_Minus1</div> <div>#587208</div> </div> <div> <div>sapChart_Sequence_3_Minus1_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_3_Minus2</div> <div>#3e5106</div> </div> <div> <div>sapChart_Sequence_3_Minus2_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_3_Minus3</div> <div>#2c3904</div> </div> <div> <div>sapChart_Sequence_3_Minus3_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_3_Minus4</div> <div>#212b03</div> </div> <div> <div>sapChart_Sequence_3_Minus4_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_3_Minus5</div> <div>#161c02</div> </div> <div> <div>sapChart_Sequence_3_Minus5_TextColor</div> <div>#ffffff</div> </div>

Chart Sequence Color 4

<div> <div>Color Name</div> <div>Morning Horizon</div> </div> <div> <div>sapChart_Sequence_4_Plus3</div> <div>#f473b3</div> </div> <div> <div>sapChart_Sequence_4_Plus3_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_4_Plus2</div> <div>#f14d9e</div> </div> <div> <div>sapChart_Sequence_4_Plus2_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_4_Plus1</div> <div>#ee278a</div> </div> <div> <div>sapChart_Sequence_4_Plus1_TextColor</div> <div>#000000</div> </div> <div> <div><strong>sapChart_Sequence_4</strong></div> <div>#df1278</div> </div> <div> <div>sapChart_Sequence_4_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_4_Minus1</div> <div>#b90f64</div> </div> <div> <div>sapChart_Sequence_4_Minus1_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_4_Minus2</div> <div>#930c4f</div> </div> <div> <div>sapChart_Sequence_4_Minus2_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_4_Minus3</div> <div>#770a40</div> </div> <div> <div>sapChart_Sequence_4_Minus3_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_4_Minus4</div> <div>#51072c</div> </div> <div> <div>sapChart_Sequence_4_Minus4_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_4_Minus5</div> <div>#3a051f</div> </div> <div> <div>sapChart_Sequence_4_Minus5_TextColor</div> <div>#ffffff</div> </div>

Chart Sequence Color 5

<div> <div>Color Name</div> <div>Morning Horizon</div> </div> <div> <div>sapChart_Sequence_5_Plus3</div> <div>#d5bcf0</div> </div> <div> <div>sapChart_Sequence_5_Plus3_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_5_Plus2</div> <div>#b994e0</div> </div> <div> <div>sapChart_Sequence_5_Plus2_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_5_Plus1</div> <div>#a679d8</div> </div> <div> <div>sapChart_Sequence_5_Plus1_TextColor</div> <div>#000000</div> </div> <div> <div><strong>sapChart_Sequence_5</strong></div> <div>#8b47d7</div> </div> <div> <div>sapChart_Sequence_5_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_5_Minus1</div> <div>#7236b5</div> </div> <div> <div>sapChart_Sequence_5_Minus1_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_5_Minus2</div> <div>#5e2c96</div> </div> <div> <div>sapChart_Sequence_5_Minus2_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_5_Minus3</div> <div>#522782</div> </div> <div> <div>sapChart_Sequence_5_Minus3_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_5_Minus4</div> <div>#45216E</div> </div> <div> <div>sapChart_Sequence_5_Minus4_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_5_Minus5</div> <div>#341358</div> </div> <div> <div>sapChart_Sequence_5_Minus5_TextColor</div> <div>#ffffff</div> </div>

Chart Sequence Color 6

<div> <div>Color Name</div> <div>Morning Horizon</div> </div> <div> <div>sapChart_Sequence_6_Plus3</div> <div>#64ede9</div> </div> <div> <div>sapChart_Sequence_6_Plus3_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_6_Plus2</div> <div>#2ee0da</div> </div> <div> <div>sapChart_Sequence_6_Plus2_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_6_Plus1</div> <div>#05c7c1</div> </div> <div> <div>sapChart_Sequence_6_Plus1_TextColor</div> <div>#000000</div> </div> <div> <div><strong>sapChart_Sequence_6</strong></div> <div>#049f9a</div> </div> <div> <div>sapChart_Sequence_6_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_6_Minus1</div> <div>#02837f</div> </div> <div> <div>sapChart_Sequence_6_Minus1_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_6_Minus2</div> <div>#006663</div> </div> <div> <div>sapChart_Sequence_6_Minus2_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_6_Minus3</div> <div>#00514f</div> </div> <div> <div>sapChart_Sequence_6_Minus3_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_6_Minus4</div> <div>#003d3b</div> </div> <div> <div>sapChart_Sequence_6_Minus4_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_6_Minus5</div> <div>#002322</div> </div> <div> <div>sapChart_Sequence_6_Minus5_TextColor</div> <div>#ffffff</div> </div>

Chart Sequence Color 7

<div> <div>Color Name</div> <div>Morning Horizon</div> </div> <div> <div>sapChart_Sequence_7_Plus3</div> <div>#68aeff</div> </div> <div> <div>sapChart_Sequence_7_Plus3_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_7_Plus2</div> <div>#4098ff</div> </div> <div> <div>sapChart_Sequence_7_Plus2_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_7_Plus1</div> <div>#1c85ff</div> </div> <div> <div>sapChart_Sequence_7_Plus1_TextColor</div> <div>#000000</div> </div> <div> <div><strong>sapChart_Sequence_7</strong></div> <div>#0070f2</div> </div> <div> <div>sapChart_Sequence_7_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_7_Minus1</div> <div>#0062d3</div> </div> <div> <div>sapChart_Sequence_7_Minus1_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_7_Minus2</div> <div>#0054b5</div> </div> <div> <div>sapChart_Sequence_7_Minus2_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_7_Minus3</div> <div>#00418c</div> </div> <div> <div>sapChart_Sequence_7_Minus3_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_7_Minus4</div> <div>#00244f</div> </div> <div> <div>sapChart_Sequence_7_Minus4_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_7_Minus5</div> <div>#001b3a</div> </div> <div> <div>sapChart_Sequence_7_Minus5_TextColor</div> <div>#ffffff</div> </div>

Chart Sequence Color 8

<div> <div>Color Name</div> <div>Morning Horizon</div> </div> <div> <div>sapChart_Sequence_8_Plus3</div> <div>#f462ff</div> </div> <div> <div>sapChart_Sequence_8_Plus3_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_8_Plus2</div> <div>#f034ff</div> </div> <div> <div>sapChart_Sequence_8_Plus2_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_8_Plus1</div> <div>#ed0bff</div> </div> <div> <div>sapChart_Sequence_8_Plus1_TextColor</div> <div>#000000</div> </div> <div> <div><strong>sapChart_Sequence_8</strong></div> <div>#cc00dc</div> </div> <div> <div>sapChart_Sequence_8_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_8_Minus1</div> <div>#a600b3</div> </div> <div> <div>sapChart_Sequence_8_Minus1_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_8_Minus2</div> <div>#80008a</div> </div> <div> <div>sapChart_Sequence_8_Minus2_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_8_Minus3</div> <div>#6d0076</div> </div> <div> <div>sapChart_Sequence_8_Minus3_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_8_Minus4</div> <div>#56005d</div> </div> <div> <div>sapChart_Sequence_8_Minus4_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_8_Minus5</div> <div>#350039</div> </div> <div> <div>sapChart_Sequence_8_Minus5_TextColor</div> <div>#ffffff</div> </div>

Chart Sequence Color 9

<div> <div>Color Name</div> <div>Morning Horizon</div> </div> <div> <div>sapChart_Sequence_9_Plus3</div> <div>#bdc6bc</div> </div> <div> <div>sapChart_Sequence_9_Plus3_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_9_Plus2</div> <div>#b5bfb4</div> </div> <div> <div>sapChart_Sequence_9_Plus2_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_9_Plus1</div> <div>#97a695</div> </div> <div> <div>sapChart_Sequence_9_Plus1_TextColor</div> <div>#000000</div> </div> <div> <div><strong>sapChart_Sequence_9</strong></div> <div>#798c77</div> </div> <div> <div>sapChart_Sequence_9_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_9_Minus1</div> <div>#667664</div> </div> <div> <div>sapChart_Sequence_9_Minus1_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_9_Minus2</div> <div>#536051</div> </div> <div> <div>sapChart_Sequence_9_Minus2_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_9_Minus3</div> <div>#404a3f</div> </div> <div> <div>sapChart_Sequence_9_Minus3_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_9_Minus4</div> <div>#2d342c</div> </div> <div> <div>sapChart_Sequence_9_Minus4_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_9_Minus5</div> <div>#1e231e</div> </div> <div> <div>sapChart_Sequence_9_Minus5_TextColor</div> <div>#ffffff</div> </div>

Chart Sequence Color 10

<div> <div>Color Name</div> <div>Morning Horizon</div> </div> <div> <div>sapChart_Sequence_10_Plus3</div> <div>#f1c6c6</div> </div> <div> <div>sapChart_Sequence_10_Plus3_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_10_Plus2</div> <div>#eaadad</div> </div> <div> <div>sapChart_Sequence_10_Plus2_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_10_Plus1</div> <div>#e28d8d</div> </div> <div> <div>sapChart_Sequence_10_Plus1_TextColor</div> <div>#000000</div> </div> <div> <div><strong>sapChart_Sequence_10</strong></div> <div>#da6c6c</div> </div> <div> <div>sapChart_Sequence_10_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_10_Minus1</div> <div>#b75757</div> </div> <div> <div>sapChart_Sequence_10_Minus1_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_10_Minus2</div> <div>#9d4343</div> </div> <div> <div>sapChart_Sequence_10_Minus2_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_10_Minus3</div> <div>#803737</div> </div> <div> <div>sapChart_Sequence_10_Minus3_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_10_Minus4</div> <div>#672c2c</div> </div> <div> <div>sapChart_Sequence_10_Minus4_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_10_Minus5</div> <div>#562424</div> </div> <div> <div>sapChart_Sequence_10_Minus5_TextColor</div> <div>#ffffff</div> </div>

Chart Sequence Color 11

<div> <div>Color Name</div> <div>Morning Horizon</div> </div> <div> <div>sapChart_Sequence_11_Plus3</div> <div>#c0b0ff</div> </div> <div> <div>sapChart_Sequence_11_Plus3_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_11_Plus2</div> <div>#9b83ff</div> </div> <div> <div>sapChart_Sequence_11_Plus2_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_11_Plus1</div> <div>#8669ff</div> </div> <div> <div>sapChart_Sequence_11_Plus1_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_11</div> <div>#5d36ff</div> </div> <div> <div>sapChart_Sequence_11_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_11_Minus1</div> <div>#4b25e7</div> </div> <div> <div>sapChart_Sequence_11_Minus1_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_11_Minus2</div> <div>#3a17cd</div> </div> <div> <div>sapChart_Sequence_11_Minus2_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_11_Minus3</div> <div>#2f13a8</div> </div> <div> <div>sapChart_Sequence_11_Minus3_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_11_Minus4</div> <div>#250f83</div> </div> <div> <div>sapChart_Sequence_11_Minus4_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_11_Minus5</div> <div>#180955</div> </div> <div> <div>sapChart_Sequence_11_Minus5_TextColor</div> <div>#ffffff</div> </div>

Chart Sequence Color 12

<div> <div>Color Name</div> <div>Morning Horizon</div> </div> <div> <div>sapChart_Sequence_12_Plus3</div> <div>#e4ddcf</div> </div> <div> <div>sapChart_Sequence_12_Plus3_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_12_Plus2</div> <div>#dacebb</div> </div> <div> <div>sapChart_Sequence_12_Plus2_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_12_Plus1</div> <div>#c4b293</div> </div> <div> <div>sapChart_Sequence_12_Plus1_TextColor</div> <div>#000000</div> </div> <div> <div><strong>sapChart_Sequence_12</strong></div> <div>#a68a5b</div> </div> <div> <div>sapChart_Sequence_12_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_12_Minus1</div> <div>#8c744c</div> </div> <div> <div>sapChart_Sequence_12_Minus1_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_12_Minus2</div> <div>#786441</div> </div> <div> <div>sapChart_Sequence_12_Minus2_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_12_Minus3</div> <div>#5e4e33</div> </div> <div> <div>sapChart_Sequence_12_Minus3_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_12_Minus4</div> <div>#433825</div> </div> <div> <div>sapChart_Sequence_12_Minus4_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_12_Minus5</div> <div>#30271a</div> </div> <div> <div>sapChart_Sequence_12_Minus5_TextColor</div> <div>#ffffff</div> </div>

Semantic Palette

Semantic Token Naming

The naming of the semantic tokens is generic and may not reflect usage within the charts. Application teams determine the contextual usage of chart colors.

<div> <div></div> <div>Morning<br>Horizon</div> </div> <div> <div>sapChart_Bad</div> <div>#f53232</div> </div> <div> <div>sapChart_Critical</div> <div>#e26300</div> </div> <div> <div>sapChart_Good</div> <div>#30914c</div> </div> <div> <div>sapChart_Neutral</div> <div>#758ca4</div> </div>

Semantic Sequence Palette

Semantic Sequence Colors for Charts

Semantic sequence colors for charts are connected to the main semantic colors. For example, sapChart_Critical is used as the value for sapChart_Sequence_Critical. The other sequence colors are then calculated to be either lighter (plus) or darker (minus) versions of sapChart_Sequence_Critical. This simple color relationship logic makes colors easy to modify for themeability, allowing SAP to update any token centrally and also provide future-friendly theme compatibility across all SAP technologies.

The naming of semantic tokens is generic and may not reflect usage within the charts. Application teams determine the contextual usage of chart colors.

Chart Sequence Bad

Context examples: a bad or error value state context; heat; lifecycle contexts like negative, minus, overdue, or stopped

<div> <div></div> <div>Morning<br>Horizon</div> </div> <div> <div>sapChart_Sequence_Bad_Plus3</div> <div>#fdcece</div> </div> <div> <div>sapChart_Sequence_Bad_Plus3_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_Bad_Plus2</div> <div>#fa9d9d</div> </div> <div> <div>sapChart_Sequence_Bad_Plus2_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_Bad_Plus1</div> <div>#f86c6c</div> </div> <div> <div>sapChart_Sequence_Bad_Plus1_TextColor</div> <div>#000000</div> </div> <div> <div><strong>sapChart_Sequence_Bad</strong></div> <div>#f53232</div> </div> <div> <div>sapChart_Sequence_Bad_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_Bad_Minus1</div> <div>#d00a0a</div> </div> <div> <div>sapChart_Sequence_Bad_Minus1_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_Bad_Minus2</div> <div>#a90808</div> </div> <div> <div>sapChart_Sequence_Bad_Minus2_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_Bad_Minus3</div> <div>#830606</div> </div> <div> <div>sapChart_Sequence_Bad_Minus3_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_Bad_Minus4</div> <div>#570404</div> </div> <div> <div>sapChart_Sequence_Bad_Minus4_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_Bad_Minus5</div> <div>#320000</div> </div> <div> <div>sapChart_Sequence_Bad_Minus5_TextColor</div> <div>#ffffff</div> </div>

Chart Sequence Critical

Context examples: a warning value state; lifecycle contexts like critical, reduced, borderline, or low stock levels

<div> <div></div> <div>Morning<br>Horizon</div> </div> <div> <div>sapChart_Sequence_Critical_Plus3</div> <div>#ffb881</div> </div> <div> <div>sapChart_Sequence_Critical_Plus3_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_Critical_Plus2</div> <div>#ff933f</div> </div> <div> <div>sapChart_Sequence_Critical_Plus2_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_Critical_Plus1</div> <div>#ff760c</div> </div> <div> <div>sapChart_Sequence_Critical_Plus1_TextColor</div> <div>#000000</div> </div> <div> <div><strong>sapChart_Sequence_Critical</strong></div> <div>#e26300</div> </div> <div> <div>sapChart_Sequence_Critical_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_Critical_Minus1</div> <div>#c35600</div> </div> <div> <div>sapChart_Sequence_Critical_Minus1_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_Critical_Minus2</div> <div>#aa4a00</div> </div> <div> <div>sapChart_Sequence_Critical_Minus2_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_Critical_Minus3</div> <div>#903f00</div> </div> <div> <div>sapChart_Sequence_Critical_Minus3_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_Critical_Minus4</div> <div>#6d3000</div> </div> <div> <div>sapChart_Sequence_Critical_Minus4_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_Critical_Minus5</div> <div>#492000</div> </div> <div> <div>sapChart_Sequence_Critical_Minus5_TextColor</div> <div>#ffffff</div> </div>

Chart Sequence Good

Context examples: a successful or good value state; lifecycle contexts like positive, enhanced, healthy, or full stock levels

<div> <div></div> <div>Morning<br>Horizon</div> </div> <div> <div>sapChart_Sequence_Good_Plus3</div> <div>#88d79f</div> </div> <div> <div>sapChart_Sequence_Good_Plus3_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_Good_Plus2</div> <div>#56c776</div> </div> <div> <div>sapChart_Sequence_Good_Plus2_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_Good_Plus1</div> <div>#3ab05c</div> </div> <div> <div>sapChart_Sequence_Good_Plus1_TextColor</div> <div>#000000</div> </div> <div> <div><strong>sapChart_Sequence_Good</strong></div> <div>#30914c</div> </div> <div> <div>sapChart_Sequence_Good_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_Good_Minus1</div> <div>#287a40</div> </div> <div> <div>sapChart_Sequence_Good_Minus1_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_Good_Minus2</div> <div>#226736</div> </div> <div> <div>sapChart_Sequence_Good_Minus2_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_Good_Minus3</div> <div>#1c542c</div> </div> <div> <div>sapChart_Sequence_Good_Minus3_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_Good_Minus4</div> <div>#13391e</div> </div> <div> <div>sapChart_Sequence_Good_Minus4_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_Good_Minus5</div> <div>#0a1e10</div> </div> <div> <div>sapChart_Sequence_Good_Minus5_TextColor</div> <div>#ffffff</div> </div>

Chart Sequence Neutral

Context examples: a null value state; lifecycle contexts like neutral, normal, regular, or medium stock levels.

<div> <div></div> <div>Morning<br>Horizon</div> </div> <div> <div>sapChart_Sequence_Neutral_Plus3</div> <div>#edf0f3</div> </div> <div> <div>sapChart_Sequence_Neutral_Plus3_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_Neutral_Plus2</div> <div>#c2ccd7</div> </div> <div> <div>sapChart_Sequence_Neutral_Plus2_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_Neutral_Plus1</div> <div>#9aabbc</div> </div> <div> <div>sapChart_Sequence_Neutral_Plus1_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_Neutral</div> <div>#758ca4</div> </div> <div> <div>sapChart_Sequence_Neutral_TextColor</div> <div>#000000</div> </div> <div> <div>sapChart_Sequence_Neutral_Minus1</div> <div>#5b728b</div> </div> <div> <div>sapChart_Sequence_Neutral_Minus1_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_Neutral_Minus2</div> <div>#495e74</div> </div> <div> <div>sapChart_Sequence_Neutral_Minus2_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_Neutral_Minus3</div> <div>#364a5f</div> </div> <div> <div>sapChart_Sequence_Neutral_Minus3_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_Neutral_Minus4</div> <div>#233549</div> </div> <div> <div>sapChart_Sequence_Neutral_Minus4_TextColor</div> <div>#ffffff</div> </div> <div> <div>sapChart_Sequence_Neutral_Minus5</div> <div>#1a2633</div> </div> <div> <div>sapChart_Sequence_Neutral_Minus5_TextColor</div> <div>#ffffff</div> </div>

Visual Accessibility

Enhancing Perceivable Contrast in Charts

The base set of chart colors has been tested for several color blindness types but can not cover all color blindness types.

Each color is defined with theming variables (tokens), which allow you to customize the color values using theming tools.

The extended chart sequence colors each have a corresponding text color and also a text shadow (halo) style that ensures sufficient text-to-background contrast. Additionally, built-in logic allows you to customize the chart tokens using theming tools. These provide an automatic switch between light and dark text and text shadow colors to enhance legibility.

All of the text shadow styles for each set of sequence text colors are provided as part of the SAP Theming Base Content repository.

guideline
  • Where possible, use a reduced set of chart color values to avoid information overload.
  • We strongly recommend providing additional means of interpreting chart values visually, such as labeling, tooltips, and patterns.

Example:

Chart Sequence Neutral color token:
sapChart_Sequence_Neutral: #758ca4
Non-text contrast to UI background (sapBackgroundColor): 3:1;

Text color token:
sapChart_Sequence_Neutral_TextColor: #000000;
Text contrast to neutral chart color (sapChart_Sequence_Neutral) color: 3:1;

Text shadow style token:
sapChart_Sequence_Neutral_TextShadow: 0 0 .125rem #fff;
A text shadow (halo) may be used to enhance text legibility.

Non-Text Contrast using Borders

Each set of sequence colors also has one border color that will ensure the correct contrast.

Border styles for each set of sequence colors are provided as part of the SAP Theming Base Content repository.

guideline
  • To ensure sufficient perceivable contrast for non-text elements, we recommend applying borders to any chart sequential values that fall below a 3:1 contrast measurement against the chart or user interface background.
  • The border must also have a 3:1 contrast against any chart interaction or highlight border colors.
  • It is also recommended that interaction borders differ in size as well as contrast.

Example:

Chart Sequence 1 border color token:
sapChart_Sequence_1_BorderColor: #3278BE
Non-text contrast to UI background (sapBackgroundColor): 4.2:1;
Non-text contrast to chart Interaction color (sapChart_Data_InteractiveColor): 4.5:1;

Chart color contrast measurements

Chart color contrast measurements

  1. Regular
  2. Interactive
  3. Chart border to UI/chart background: More than 3:1
  4. Chart border color (Sequence_1) to interactive border color: More than 3:1

Text shadow (halo) measurement

Text shadow (halo) measurement

  1. Dark text measured against light halo
  2. Light text measured against dark halo

The dark and light values for the text shadow ensure that text is always legible and never blurry.

Elements and Controls

Implementation

SAP Theming Base Content
GitHub repository of SAP themes.

Visual Design

Elements and Controls

Implementation

SAP Theming Base Content
GitHub repository of SAP themes.