Updated: May 8, 2024
SAPUI5 Version 1.102
- 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.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 names in the chart palettes.
Use Names – Do not use HEX values!
Colors are defined by names in order to support our theming capabilities. They are derived from themeable base colors and then the associated HEX values depend on the current theme.
You cannot change the HEX values unless you create a new theme.
Qualitative Palette
Color Name | Example: Belize (light flavor) | |
sapUiChartPaletteQualitativeHue1 | #5899DA | |
sapUiChartPaletteQualitativeHue2 | #E8743B | |
sapUiChartPaletteQualitativeHue3 | #19A979 | |
sapUiChartPaletteQualitativeHue4 | #ED4A7B | |
sapUiChartPaletteQualitativeHue5 | #945ECF | |
sapUiChartPaletteQualitativeHue6 | #13A4B4 | |
sapUiChartPaletteQualitativeHue7 | #525DF4 | |
sapUiChartPaletteQualitativeHue8 | #BF399E | |
sapUiChartPaletteQualitativeHue9 | #6C8893 | |
sapUiChartPaletteQualitativeHue10 | #EE6868 | |
sapUiChartPaletteQualitativeHue11 | #2F6497 |
Semantic Palette
Color Name | Example: Belize (light flavor) | |
sapUiChartPaletteSemanticBadLight3 | #f99494 | |
sapUiChartPaletteSemanticBadLight2 | #f66364 | |
sapUiChartPaletteSemanticBadLight1 | #f33334 | |
sapUiChartPaletteSemanticBad | #dc0d0e | |
sapUiChartPaletteSemanticBadDark1 | #b90c0d | |
sapUiChartPaletteSemanticBadDark2 | #930a0a | |
sapUiChartPaletteSemanticCriticalLight3 | #f8cc8c | |
sapUiChartPaletteSemanticCriticalLight2 | #f5b04d | |
sapUiChartPaletteSemanticCriticalLight1 | #f29b1d | |
sapUiChartPaletteSemanticCritical | #de890d | |
sapUiChartPaletteSemanticCriticalDark1 | #c67a0c | |
sapUiChartPaletteSemanticCriticalDark2 | #a4650a | |
sapUiChartPaletteSemanticGoodLight3 | #a1dbb1 | |
sapUiChartPaletteSemanticGoodLight2 | #71c989 | |
sapUiChartPaletteSemanticGoodLight1 | #4cba6b | |
sapUiChartPaletteSemanticGood | #3fa45b | |
sapUiChartPaletteSemanticGoodDark1 | #358a4d | |
sapUiChartPaletteSemanticGoodDark2 | #2a6d3c | |
sapUiChartPaletteSemanticNeutralLight3 | #d5dadc | |
sapUiChartPaletteSemanticNeutralLight2 | #bac1c4 | |
sapUiChartPaletteSemanticNeutralLight1 | #9ea8ad | |
sapUiChartPaletteSemanticNeutral | #848f94 | |
sapUiChartPaletteSemanticNeutralDark1 | #69767c | |
sapUiChartPaletteSemanticNeutralDark2 | #596468 |
Sequential Palette
Color Name | Example: Belize (light flavor) | |
sapUiChartPaletteSequentialHue1Light3 | #b2d4f5 | |
sapUiChartPaletteSequentialHue1Light2 | #93bfeb | |
sapUiChartPaletteSequentialHue1Light1 | #74abe2 | |
sapUiChartPaletteSequentialHue1 | #5899DA | |
sapUiChartPaletteSequentialHue1Dark1 | #367dc4 | |
sapUiChartPaletteSequentialHue1Dark2 | #1866b4 | |
sapUiChartPaletteSequentialHue2Light3 | #fcc3a7 | |
sapUiChartPaletteSequentialHue2Light2 | #f5aa85 | |
sapUiChartPaletteSequentialHue2Light1 | #ef8d5d | |
sapUiChartPaletteSequentialHue2 | #E8743B | |
sapUiChartPaletteSequentialHue2Dark1 | #da5a1b | |
sapUiChartPaletteSequentialHue2Dark2 | #cc4300 | |
sapUiChartPaletteSequentialHue3Light3 | #8fd1bb | |
sapUiChartPaletteSequentialHue3Light2 | #66c2a3 | |
sapUiChartPaletteSequentialHue3Light1 | #3fb68e | |
sapUiChartPaletteSequentialHue3 | #19A979 | |
sapUiChartPaletteSequentialHue3Dark1 | #0e8c62 | |
sapUiChartPaletteSequentialHue3Dark2 | #03734d | |
sapUiChartPaletteSequentialNeutralLight3 | #d5dadc | |
sapUiChartPaletteSequentialNeutralLight2 | #bac1c4 | |
sapUiChartPaletteSequentialNeutralLight1 | #9ea8ad | |
sapUiChartPaletteSequentialNeutral | #848f94 | |
sapUiChartPaletteSequentialNeutralDark1 | #69767c | |
sapUiChartPaletteSequentialNeutralDark2 | #596468 |
Resources
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
Implementation
No links.