- SAPUI Version 1.124
- SAPUI5 Version 1.122
- SAPUI5 Version 1.120
- SAPUI5 Version 1.118
- SAPUI5 Version 1.116
- SAPUI5 Version 1.114
- SAPUI5 Version 1.112
- SAPUI5 Version 1.110
- SAPUI5 Version 1.108
- SAPUI5 Version 1.106
- SAPUI5 Version 1.104
- SAPUI5 Version 1.102
- SAPUI5 Version 1.100
- SAPUI5 Version 1.98
- SAPUI5 Version 1.96
- SAPUI5 Version 1.94
- SAPUI5 Version 1.92
- SAPUI5 Version 1.90
- SAPUI5 Version 1.88
- SAPUI5 Version 1.86
- SAPUI5 Version 1.84
- SAPUI5 Version 1.82
- SAPUI5 Version 1.80
- SAPUI5 Version 1.78
- SAPUI5 Version 1.76
- SAPUI5 Version 1.74
- SAPUI5 Version 1.72
- SAPUI5 Version 1.70
- SAPUI5 Version 1.68
- SAPUI5 Version 1.66
- SAPUI5 Version 1.64
- SAPUI5 Version 1.62
- SAPUI5 Version 1.60
- SAPUI5 Version 1.58
- SAPUI5 Version 1.56
- SAPUI5 Version 1.54
- SAPUI5 Version 1.52
- SAPUI5 Version 1.50
- SAPUI5 Version 1.48
- SAPUI5 Version 1.46
- SAPUI5 Version 1.44
- SAPUI5 Version 1.42
- SAPUI5 Version 1.40
- SAPUI5 Version 1.38
- SAPUI5 Version 1.36
- SAPUI5 Version 1.34
- SAPUI5 Version 1.32
- SAPUI5 Version 1.30
- SAPUI5 Version 1.28
- SAPUI5 Version 1.26
- Latest Version 1.126
- SAPUI Version 1.124
- SAPUI5 Version 1.122
- SAPUI5 Version 1.120
- SAPUI5 Version 1.118
- SAPUI5 Version 1.116
- SAPUI5 Version 1.114
- SAPUI5 Version 1.112
- SAPUI5 Version 1.110
- SAPUI5 Version 1.108
- SAPUI5 Version 1.106
- SAPUI5 Version 1.104
- SAPUI5 Version 1.102
- SAPUI5 Version 1.100
- SAPUI5 Version 1.98
- SAPUI5 Version 1.96
- SAPUI5 Version 1.94
- SAPUI5 Version 1.92
- SAPUI5 Version 1.90
- SAPUI5 Version 1.88
- SAPUI5 Version 1.86
- SAPUI5 Version 1.84
- SAPUI5 Version 1.82
- SAPUI5 Version 1.80
- SAPUI5 Version 1.78
- SAPUI5 Version 1.76
- SAPUI5 Version 1.74
- SAPUI5 Version 1.72
- SAPUI5 Version 1.70
- SAPUI5 Version 1.68
- SAPUI5 Version 1.66
- SAPUI5 Version 1.64
- SAPUI5 Version 1.62
- SAPUI5 Version 1.60
- SAPUI5 Version 1.58
- SAPUI5 Version 1.56
- SAPUI5 Version 1.54
- SAPUI5 Version 1.52
- SAPUI5 Version 1.50
- SAPUI5 Version 1.48
- SAPUI5 Version 1.46
- SAPUI5 Version 1.44
- SAPUI5 Version 1.42
- SAPUI5 Version 1.40
- SAPUI5 Version 1.38
- SAPUI5 Version 1.36
- SAPUI5 Version 1.34
- SAPUI5 Version 1.32
- SAPUI5 Version 1.30
- SAPUI5 Version 1.28
- SAPUI5 Version 1.26
Chart Color Palettes – Values and Names
Intro
This page provides all the color token names that are intended for use in all SAP chart palettes.
Extended chart colors
Use of Tokens
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. It is, however, important that the correct theming tokens are used to ensure consistency.
Token Name | Morning Horizon |
|
sapChart_OrderedColor_1 | #3278be | |
sapChart_OrderedColor_2 | #c87b00 | |
sapChart_OrderedColor_3 | #75980b | |
sapChart_OrderedColor_4 | #df1278 | |
sapChart_OrderedColor_5 | #8b47d7 | |
sapChart_OrderedColor_6 | #049f9a | |
sapChart_OrderedColor_7 | #0070f2 | |
sapChart_OrderedColor_8 | #cc00dc | |
sapChart_OrderedColor_9 | #798c77 | |
sapChart_OrderedColor_10 | #da6c6c | |
sapChart_OrderedColor_11 | #5d36ff | |
sapChart_OrderedColor_12 | #a68a5b |
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
Color Name | Morning Horizon | |
sapChart_Sequence_1_Plus3 | #84b8eb | |
sapChart_Sequence_1_Plus3_TextColor | #000000 | |
sapChart_Sequence_1_Plus2 | #468acd | |
sapChart_Sequence_1_Plus2_TextColor | #000000 | |
sapChart_Sequence_1_Plus1 | #3c8cdd | |
sapChart_Sequence_1_Plus1_TextColor | #000000 | |
sapChart_Sequence_1 | #3278be | |
sapChart_Sequence_1_TextColor | #ffffff | |
sapChart_Sequence_1_Minus1 | #31669c | |
sapChart_Sequence_1_Minus1_TextColor | #ffffff | |
sapChart_Sequence_1_Minus2 | #31669c | |
sapChart_Sequence_1_Minus2_TextColor | #ffffff | |
sapChart_Sequence_1_Minus3 | #204060 | |
sapChart_Sequence_1_Minus3_TextColor | #ffffff | |
sapChart_Sequence_1_Minus4 | #19334e | |
sapChart_Sequence_1_Minus4_TextColor | #ffffff | |
sapChart_Sequence_1_Minus5 | #13263a | |
sapChart_Sequence_1_Minus5_TextColor | #ffffff |
Chart Sequence Color 2
Color Name | Morning Horizon | |
sapChart_Sequence_2_Plus3 | #efbf72 | |
sapChart_Sequence_2_Plus3_TextColor | #000000 | |
sapChart_Sequence_2_Plus2 | #eaaa44 | |
sapChart_Sequence_2_Plus2_TextColor | #000000 | |
sapChart_Sequence_2_Plus1 | #e29419 | |
sapChart_Sequence_2_Plus1_TextColor | #000000 | |
sapChart_Sequence_2 | #c87b00 | |
sapChart_Sequence_2_TextColor | #000000 | |
sapChart_Sequence_2_Minus1 | #9f6200 | |
sapChart_Sequence_2_Minus1_TextColor | #ffffff | |
sapChart_Sequence_2_Minus2 | #7c4c00 | |
sapChart_Sequence_2_Minus2_TextColor | #ffffff | |
sapChart_Sequence_2_Minus3 | #623c00 | |
sapChart_Sequence_2_Minus3_TextColor | #ffffff | |
sapChart_Sequence_2_Minus4 | #623c00 | |
sapChart_Sequence_2_Minus4_TextColor | #ffffff | |
sapChart_Sequence_2_Minus5 | #2f1d00 | |
sapChart_Sequence_2_Minus5_TextColor | #ffffff |
Chart Sequence Color 3
Color Name | Morning Horizon | |
sapChart_Sequence_3_Plus3 | #b9d369 | |
sapChart_Sequence_3_Plus3_TextColor | #000000 | |
sapChart_Sequence_3_Plus2 | #a6c742 | |
sapChart_Sequence_3_Plus2_TextColor | #000000 | |
sapChart_Sequence_3_Plus1 | #8fad33 | |
sapChart_Sequence_3_Plus1_TextColor | #000000 | |
sapChart_Sequence_3 | #75980b | |
sapChart_Sequence_3_TextColor | #000000 | |
sapChart_Sequence_3_Minus1 | #587208 | |
sapChart_Sequence_3_Minus1_TextColor | #ffffff | |
sapChart_Sequence_3_Minus2 | #3e5106 | |
sapChart_Sequence_3_Minus2_TextColor | #ffffff | |
sapChart_Sequence_3_Minus3 | #2c3904 | |
sapChart_Sequence_3_Minus3_TextColor | #ffffff | |
sapChart_Sequence_3_Minus4 | #212b03 | |
sapChart_Sequence_3_Minus4_TextColor | #ffffff | |
sapChart_Sequence_3_Minus5 | #161c02 | |
sapChart_Sequence_3_Minus5_TextColor | #ffffff |
Chart Sequence Color 4
Color Name | Morning Horizon | |
sapChart_Sequence_4_Plus3 | #f473b3 | |
sapChart_Sequence_4_Plus3_TextColor | #000000 | |
sapChart_Sequence_4_Plus2 | #f14d9e | |
sapChart_Sequence_4_Plus2_TextColor | #000000 | |
sapChart_Sequence_4_Plus1 | #ee278a | |
sapChart_Sequence_4_Plus1_TextColor | #000000 | |
sapChart_Sequence_4 | #df1278 | |
sapChart_Sequence_4_TextColor | #ffffff | |
sapChart_Sequence_4_Minus1 | #b90f64 | |
sapChart_Sequence_4_Minus1_TextColor | #ffffff | |
sapChart_Sequence_4_Minus2 | #930c4f | |
sapChart_Sequence_4_Minus2_TextColor | #ffffff | |
sapChart_Sequence_4_Minus3 | #770a40 | |
sapChart_Sequence_4_Minus3_TextColor | #ffffff | |
sapChart_Sequence_4_Minus4 | #51072c | |
sapChart_Sequence_4_Minus4_TextColor | #ffffff | |
sapChart_Sequence_4_Minus5 | #3a051f | |
sapChart_Sequence_4_Minus5_TextColor | #ffffff |
Chart Sequence Color 5
Color Name | Morning Horizon | |
sapChart_Sequence_5_Plus3 | #d5bcf0 | |
sapChart_Sequence_5_Plus3_TextColor | #000000 | |
sapChart_Sequence_5_Plus2 | #b994e0 | |
sapChart_Sequence_5_Plus2_TextColor | #000000 | |
sapChart_Sequence_5_Plus1 | #a679d8 | |
sapChart_Sequence_5_Plus1_TextColor | #000000 | |
sapChart_Sequence_5 | #8b47d7 | |
sapChart_Sequence_5_TextColor | #ffffff | |
sapChart_Sequence_5_Minus1 | #7236b5 | |
sapChart_Sequence_5_Minus1_TextColor | #ffffff | |
sapChart_Sequence_5_Minus2 | #5e2c96 | |
sapChart_Sequence_5_Minus2_TextColor | #ffffff | |
sapChart_Sequence_5_Minus3 | #522682 | |
sapChart_Sequence_5_Minus3_TextColor | #ffffff | |
sapChart_Sequence_5_Minus4 | #46216f | |
sapChart_Sequence_5_Minus4_TextColor | #ffffff | |
sapChart_Sequence_5_Minus5 | #341358 | |
sapChart_Sequence_5_Minus5_TextColor | #ffffff |
Chart Sequence Color 6
Color Name | Morning Horizon | |
sapChart_Sequence_6_Plus3 | #64ede9 | |
sapChart_Sequence_6_Plus3_TextColor | #000000 | |
sapChart_Sequence_6_Plus2 | #2ee0da | |
sapChart_Sequence_6_Plus2_TextColor | #000000 | |
sapChart_Sequence_6_Plus1 | #05c7c1 | |
sapChart_Sequence_6_Plus1_TextColor | #000000 | |
sapChart_Sequence_6 | #049f9a | |
sapChart_Sequence_6_TextColor | #000000 | |
sapChart_Sequence_6_Minus1 | #02837f | |
sapChart_Sequence_6_Minus1_TextColor | #ffffff | |
sapChart_Sequence_6_Minus2 | #006663 | |
sapChart_Sequence_6_Minus2_TextColor | #ffffff | |
sapChart_Sequence_6_Minus3 | #00514f | |
sapChart_Sequence_6_Minus3_TextColor | #ffffff | |
sapChart_Sequence_6_Minus4 | #003d3b | |
sapChart_Sequence_6_Minus4_TextColor | #ffffff | |
sapChart_Sequence_6_Minus5 | #002322 | |
sapChart_Sequence_6_Minus5_TextColor | #ffffff |
Chart Sequence Color 7
Color Name | Morning Horizon | |
sapChart_Sequence_7_Plus3 | #68aeff | |
sapChart_Sequence_7_Plus3_TextColor | #000000 | |
sapChart_Sequence_7_Plus2 | #4098ff | |
sapChart_Sequence_7_Plus2_TextColor | #000000 | |
sapChart_Sequence_7_Plus1 | #1c85ff | |
sapChart_Sequence_7_Plus1_TextColor | #000000 | |
sapChart_Sequence_7 | #0070f2 | |
sapChart_Sequence_7_TextColor | #ffffff | |
sapChart_Sequence_7_Minus1 | #0062d3 | |
sapChart_Sequence_7_Minus1_TextColor | #ffffff | |
sapChart_Sequence_7_Minus2 | #0054b5 | |
sapChart_Sequence_7_Minus2_TextColor | #ffffff | |
sapChart_Sequence_7_Minus3 | #00418c | |
sapChart_Sequence_7_Minus3_TextColor | #ffffff | |
sapChart_Sequence_7_Minus4 | #00244f | |
sapChart_Sequence_7_Minus4_TextColor | #ffffff | |
sapChart_Sequence_7_Minus5 | #001b3a | |
sapChart_Sequence_7_Minus5_TextColor | #ffffff |
Chart Sequence Color 8
Color Name | Morning Horizon | |
sapChart_Sequence_8_Plus3 | #f462ff | |
sapChart_Sequence_8_Plus3_TextColor | #000000 | |
sapChart_Sequence_8_Plus2 | #f034ff | |
sapChart_Sequence_8_Plus2_TextColor | #000000 | |
sapChart_Sequence_8_Plus1 | #ed0bff | |
sapChart_Sequence_8_Plus1_TextColor | #000000 | |
sapChart_Sequence_8 | #cc00dc | |
sapChart_Sequence_8_TextColor | #ffffff | |
sapChart_Sequence_8_Minus1 | #a600b3 | |
sapChart_Sequence_8_Minus1_TextColor | #ffffff | |
sapChart_Sequence_8_Minus2 | #80008a | |
sapChart_Sequence_8_Minus2_TextColor | #ffffff | |
sapChart_Sequence_8_Minus3 | #6d0076 | |
sapChart_Sequence_8_Minus3_TextColor | #ffffff | |
sapChart_Sequence_8_Minus4 | #56005d | |
sapChart_Sequence_8_Minus4_TextColor | #ffffff | |
sapChart_Sequence_8_Minus5 | #350039 | |
sapChart_Sequence_8_Minus5_TextColor | #ffffff |
Chart Sequence Color 9
Color Name | Morning Horizon | |
sapChart_Sequence_9_Plus3 | #bdc6bc | |
sapChart_Sequence_9_Plus3_TextColor | #000000 | |
sapChart_Sequence_9_Plus2 | #b5bfb4 | |
sapChart_Sequence_9_Plus2_TextColor | #000000 | |
sapChart_Sequence_9_Plus1 | #97a695 | |
sapChart_Sequence_9_Plus1_TextColor | #000000 | |
sapChart_Sequence_9 | #798c77 | |
sapChart_Sequence_9_TextColor | #000000 | |
sapChart_Sequence_9_Minus1 | #667664 | |
sapChart_Sequence_9_Minus1_TextColor | #ffffff | |
sapChart_Sequence_9_Minus2 | #536051 | |
sapChart_Sequence_9_Minus2_TextColor | #ffffff | |
sapChart_Sequence_9_Minus3 | #404a3f | |
sapChart_Sequence_9_Minus3_TextColor | #ffffff | |
sapChart_Sequence_9_Minus4 | #2d342c | |
sapChart_Sequence_9_Minus4_TextColor | #ffffff | |
sapChart_Sequence_9_Minus5 | #1e231e | |
sapChart_Sequence_9_Minus5_TextColor | #ffffff |
Chart Sequence Color 10
Color Name | Morning Horizon | |
sapChart_Sequence_10_Plus3 | #f1c6c6 | |
sapChart_Sequence_10_Plus3_TextColor | #000000 | |
sapChart_Sequence_10_Plus2 | #eaadad | |
sapChart_Sequence_10_Plus2_TextColor | #000000 | |
sapChart_Sequence_10_Plus1 | #e28d8d | |
sapChart_Sequence_10_Plus1_TextColor | #000000 | |
sapChart_Sequence_10 | #da6c6c | |
sapChart_Sequence_10_TextColor | #000000 | |
sapChart_Sequence_10_Minus1 | #b75757 | |
sapChart_Sequence_10_Minus1_TextColor | #000000 | |
sapChart_Sequence_10_Minus2 | #9d4343 | |
sapChart_Sequence_10_Minus2_TextColor | #ffffff | |
sapChart_Sequence_10_Minus3 | #803737 | |
sapChart_Sequence_10_Minus3_TextColor | #ffffff | |
sapChart_Sequence_10_Minus4 | #672c2c | |
sapChart_Sequence_10_Minus4_TextColor | #ffffff | |
sapChart_Sequence_10_Minus5 | #562424 | |
sapChart_Sequence_10_Minus5_TextColor | #ffffff |
Chart Sequence Color 11
Color Name | Morning Horizon | |
sapChart_Sequence_11_Plus3 | #c0b0ff | |
sapChart_Sequence_11_Plus3_TextColor | #000000 | |
sapChart_Sequence_11_Plus2 | #9b83ff | |
sapChart_Sequence_11_Plus2_TextColor | #000000 | |
sapChart_Sequence_11_Plus1 | #8669ff | |
sapChart_Sequence_11_Plus1_TextColor | #000000 | |
sapChart_Sequence_11 | #5d36ff | |
sapChart_Sequence_11_TextColor | #ffffff | |
sapChart_Sequence_11_Minus1 | #4b25e7 | |
sapChart_Sequence_11_Minus1_TextColor | #ffffff | |
sapChart_Sequence_11_Minus2 | #3a17cd | |
sapChart_Sequence_11_Minus2_TextColor | #ffffff | |
sapChart_Sequence_11_Minus3 | #2f13a8 | |
sapChart_Sequence_11_Minus3_TextColor | #ffffff | |
sapChart_Sequence_11_Minus4 | #250f83 | |
sapChart_Sequence_11_Minus4_TextColor | #ffffff | |
sapChart_Sequence_11_Minus5 | #2f13a8 | |
sapChart_Sequence_11_Minus5_TextColor | #ffffff |
Chart Sequence Color 12
Color Name | Morning Horizon | |
sapChart_Sequence_12_Plus3 | #e4ddcf | |
sapChart_Sequence_12_Plus3_TextColor | #000000 | |
sapChart_Sequence_12_Plus2 | #dacebb | |
sapChart_Sequence_12_Plus2_TextColor | #000000 | |
sapChart_Sequence_12_Plus1 | #c4b293 | |
sapChart_Sequence_12_Plus1_TextColor | #000000 | |
sapChart_Sequence_12 | #a68a5b | |
sapChart_Sequence_12_TextColor | #000000 | |
sapChart_Sequence_12_Minus1 | #8c744c | |
sapChart_Sequence_12_Minus1_TextColor | #ffffff | |
sapChart_Sequence_12_Minus2 | #786441 | |
sapChart_Sequence_12_Minus2_TextColor | #ffffff | |
sapChart_Sequence_12_Minus3 | #5e4e33 | |
sapChart_Sequence_12_Minus3_TextColor | #ffffff | |
sapChart_Sequence_12_Minus4 | #433825 | |
sapChart_Sequence_12_Minus4_TextColor | #ffffff | |
sapChart_Sequence_12_Minus5 | #30271a | |
sapChart_Sequence_12_Minus5_TextColor | #ffffff |
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.
Token Name | Morning Horizon |
|
sapChart_Bad | #f53232 | |
sapChart_Critical | #e26300 | |
sapChart_Good | #30914c | |
sapChart_Neutral | #758ca4 |
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
Chart Token | Morning Horizon |
|
sapChart_Sequence_Bad_Plus3 | #fdcece | |
sapChart_Sequence_Bad_Plus3_TextColor | #000000 | |
sapChart_Sequence_Bad_Plus2 | #fa9d9d | |
sapChart_Sequence_Bad_Plus2_TextColor | #000000 | |
sapChart_Sequence_Bad_Plus1 | #f86c6c | |
sapChart_Sequence_Bad_Plus1_TextColor | #000000 | |
sapChart_Sequence_Bad | #f53232 | |
sapChart_Sequence_Bad_TextColor | #000000 | |
sapChart_Sequence_Bad_Minus1 | #d00a0a | |
sapChart_Sequence_Bad_Minus1_TextColor | #ffffff | |
sapChart_Sequence_Bad_Minus2 | #a90808 | |
sapChart_Sequence_Bad_Minus2_TextColor | #ffffff | |
sapChart_Sequence_Bad_Minus3 | #830606 | |
sapChart_Sequence_Bad_Minus3_TextColor | #ffffff | |
sapChart_Sequence_Bad_Minus4 | #570404 | |
sapChart_Sequence_Bad_Minus4_TextColor | #ffffff | |
sapChart_Sequence_Bad_Minus5 | #320000 | |
sapChart_Sequence_Bad_Minus5_TextColor | #ffffff |
Chart Sequence Critical
Context examples: a warning value state; lifecycle contexts like critical, reduced, borderline, or low stock levels
Chart Token | Morning Horizon |
|
sapChart_Sequence_Critical_Plus3 | #ffb881 | |
sapChart_Sequence_Critical_Plus3_TextColor | #000000 | |
sapChart_Sequence_Critical_Plus2 | #ff933f | |
sapChart_Sequence_Critical_Plus2_TextColor | #000000 | |
sapChart_Sequence_Critical_Plus1 | #ff760c | |
sapChart_Sequence_Critical_Plus1_TextColor | #000000 | |
sapChart_Sequence_Critical | #e26300 | |
sapChart_Sequence_Critical_TextColor | #000000 | |
sapChart_Sequence_Critical_Minus1 | #c35600 | |
sapChart_Sequence_Critical_Minus1_TextColor | #ffffff | |
sapChart_Sequence_Critical_Minus2 | #aa4a00 | |
sapChart_Sequence_Critical_Minus2_TextColor | #ffffff | |
sapChart_Sequence_Critical_Minus3 | #903f00 | |
sapChart_Sequence_Critical_Minus3_TextColor | #ffffff | |
sapChart_Sequence_Critical_Minus4 | #6d3000 | |
sapChart_Sequence_Critical_Minus4_TextColor | #ffffff | |
sapChart_Sequence_Critical_Minus5 | #492000 | |
sapChart_Sequence_Critical_Minus5_TextColor | #ffffff |
Chart Sequence Good
Context examples: a successful or good value state; lifecycle contexts like positive, enhanced, healthy, or full stock levels
Chart Token | Morning Horizon |
|
sapChart_Sequence_Good_Plus3 | #88d79f | |
sapChart_Sequence_Good_Plus3_TextColor | #000000 | |
sapChart_Sequence_Good_Plus2 | #56c776 | |
sapChart_Sequence_Good_Plus2_TextColor | #000000 | |
sapChart_Sequence_Good_Plus1 | #3ab05c | |
sapChart_Sequence_Good_Plus1_TextColor | #000000 | |
sapChart_Sequence_Good | #30914c | |
sapChart_Sequence_Good_TextColor | #000000 | |
sapChart_Sequence_Good_Minus1 | #287a40 | |
sapChart_Sequence_Good_Minus1_TextColor | #ffffff | |
sapChart_Sequence_Good_Minus2 | #226736 | |
sapChart_Sequence_Good_Minus2_TextColor | #ffffff | |
sapChart_Sequence_Good_Minus3 | #1c542c | |
sapChart_Sequence_Good_Minus3_TextColor | #ffffff | |
sapChart_Sequence_Good_Minus4 | #13391e | |
sapChart_Sequence_Good_Minus4_TextColor | #ffffff | |
sapChart_Sequence_Good_Minus5 | #0a1e10 | |
sapChart_Sequence_Good_Minus5_TextColor | #ffffff |
Chart Sequence Neutral
Context examples: a null value state; lifecycle contexts like neutral, normal, regular, or medium stock levels.
Chart Token | Morning Horizon |
|
sapChart_Sequence_Neutral_Plus3 | #edf0f3 | |
sapChart_Sequence_Neutral_Plus3_TextColor | #000000 | |
sapChart_Sequence_Neutral_Plus2 | #c2ccd7 | |
sapChart_Sequence_Neutral_Plus2_TextColor | #000000 | |
sapChart_Sequence_Neutral_Plus1 | #9aabbc | |
sapChart_Sequence_Neutral_Plus1_TextColor | #000000 | |
sapChart_Sequence_Neutral | #758ca4 | |
sapChart_Sequence_Neutral_TextColor | #000000 | |
sapChart_Sequence_Neutral_Minus1 | #5b728b | |
sapChart_Sequence_Neutral_Minus1_TextColor | #ffffff | |
sapChart_Sequence_Neutral_Minus2 | #495e74 | |
sapChart_Sequence_Neutral_Minus2_TextColor | #ffffff | |
sapChart_Sequence_Neutral_Minus3 | #364a5f | |
sapChart_Sequence_Neutral_Minus3_TextColor | #ffffff | |
sapChart_Sequence_Neutral_Minus4 | #233649 | |
sapChart_Sequence_Neutral_Minus4_TextColor | #ffffff | |
sapChart_Sequence_Neutral_Minus5 | #1a2633 | |
sapChart_Sequence_Neutral_Minus5_TextColor | #ffffff |
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.
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.
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;
Related Links
Elements and Controls
- Chart (guidelines)
- Chart – Color Palettes (guidelines)
- Design Tokens (guidelines)
- Theming (guidelines)