Updated: September 25, 2017
SAPUI5 Version 1.44
- 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.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 Palette – 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 themable 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 | #5cbae6 | |
sapUiChartPaletteQualitativeHue2 | #b6d957 | |
sapUiChartPaletteQualitativeHue3 | #fac364 | |
sapUiChartPaletteQualitativeHue4 | #8cd3ff | |
sapUiChartPaletteQualitativeHue5 | #d998cb | |
sapUiChartPaletteQualitativeHue6 | #f2d249 | |
sapUiChartPaletteQualitativeHue7 | #93b9c6 | |
sapUiChartPaletteQualitativeHue8 | #ccc5a8 | |
sapUiChartPaletteQualitativeHue9 | #52bacc | |
sapUiChartPaletteQualitativeHue10 | #dbdb46 | |
sapUiChartPaletteQualitativeHue11 | #98aafb |
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 | #abdbf2 | |
sapUiChartPaletteSequentialHue1Light2 | #84caec | |
sapUiChartPaletteSequentialHue1Light1 | #5cbae5 | |
sapUiChartPaletteSequentialHue1 | #27a3dd | |
sapUiChartPaletteSequentialHue1Dark1 | #1b7eac | |
sapUiChartPaletteSequentialHue1Dark2 | #156489 | |
sapUiChartPaletteSequentialHue2Light3 | #d7eaa2 | |
sapUiChartPaletteSequentialHue2Light2 | #c6e17d | |
sapUiChartPaletteSequentialHue2Light1 | #b6d957 | |
sapUiChartPaletteSequentialHue2 | #9dc62d | |
sapUiChartPaletteSequentialHue2Dark1 | #759422 | |
sapUiChartPaletteSequentialHue2Dark2 | #5b731a | |
sapUiChartPaletteSequentialHue3Light3 | #fde5bd | |
sapUiChartPaletteSequentialHue3Light2 | #fbd491 | |
sapUiChartPaletteSequentialHue3Light1 | #fac364 | |
sapUiChartPaletteSequentialHue3 | #f8ac29 | |
sapUiChartPaletteSequentialHue3Dark1 | #dd8e07 | |
sapUiChartPaletteSequentialHue3Dark2 | #b57506 | |
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.