Updated: December 19, 2016
SAPUI5 Version 1.32
- 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.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
All the values and calculation below are for the blue crystal theme.
Qualitative Palette
Color Name | Derived from | Color | Value Hex | Value RGB |
sapUiChartPaletteQualitativeHue1 | @sapUiChart1 | #5cbae6 | rgb(92,186,230) | |
sapUiChartPaletteQualitativeHue2 | @sapUiChart2 | #b6d957 | rgb(182,217,87) | |
sapUiChartPaletteQualitativeHue3 | @sapUiChart3 | #fac364 | rgb(250,195,100) | |
sapUiChartPaletteQualitativeHue4 | @sapUiChart4 | #8cd3ff | rgb(140,211,255) | |
sapUiChartPaletteQualitativeHue5 | @sapUiChart5 | #d998cb | rgb(217,152,203) | |
sapUiChartPaletteQualitativeHue6 | @sapUiChart6 | #f2d249 | rgb(242,210,73) | |
sapUiChartPaletteQualitativeHue7 | @sapUiChart7 | #93b9c6 | rgb(147,185,198) | |
sapUiChartPaletteQualitativeHue8 | @sapUiChart8 | #ccc5a8 | rgb(204,197,168) | |
sapUiChartPaletteQualitativeHue9 | @sapUiChart9 | #52bacc | rgb(82,186,204) | |
sapUiChartPaletteQualitativeHue10 | @sapUiChart10 | #dbdb46 | rgb(219,219,70) | |
sapUiChartPaletteQualitativeHue11 | @sapUiChart11 | #98aafb | rgb(152,170,251) |
Semantic Palette
Color Name | Derived from | Color | Value Hex | Value RGB |
sapUiChartPaletteSemanticBadLight3 | lighten(@sapUiChartBad,30) | #f09ca4 | rgb(240,156,164) | |
sapUiChartPaletteSemanticBadLight2 | lighten(@sapUiChartBad,20) | #e9707b | rgb(233,112,123) | |
sapUiChartPaletteSemanticBadLight1 | lighten(@sapUiChartBad,10) | #e34352 | rgb(227,67,82) | |
sapUiChartPaletteSemanticBad | @sapUiChartBad | #d32030 | rgb(211,32,48) | |
sapUiChartPaletteSemanticBadDark1 | darken(@sapUiChartBad,10) | #a71926 | rgb(167,25,38) | |
sapUiChartPaletteSemanticBadDark2 | darken(@sapUiChartBad,15) | #911621 | rgb(145,22,33 | |
sapUiChartPaletteSemanticCriticalLight3 | lighten(@sapUiChartCritical,30) | #f3caab | rgb(243,202,171) | |
sapUiChartPaletteSemanticCriticalLight2 | lighten(@sapUiChartCritical,20) | #edb17e | rgb(237,177,126) | |
sapUiChartPaletteSemanticCriticalLight1 | lighten(@sapUiChartCritical,10) | #e79651 | rgb(231,150,81) | |
sapUiChartPaletteSemanticCritical | @sapUiChartCritical | #e17b24 | rgb(225,123,36) | |
sapUiChartPaletteSemanticCriticalDark1 | darken(@sapUiChartCritical,10) | #b96319 | rgb(185,99,25) | |
sapUiChartPaletteSemanticCriticalDark2 | darken(@sapUiChartCritical,15) | #a25716 | rgb(162,87,22) | |
sapUiChartPaletteSemanticGoodLight3 | lighten(@sapUiChartGood,30) | #bedbba | rgb(190,219,186) | |
sapUiChartPaletteSemanticGoodLight2 | lighten(@sapUiChartGood,20) | #9fca98 | rgb(159,202,152) | |
sapUiChartPaletteSemanticGoodLight1 | lighten(@sapUiChartGood,10) | #80b877 | rgb(128,184,119) | |
sapUiChartPaletteSemanticGood | @sapUiChartGood | #61a656 | rgb(97,166,86) | |
sapUiChartPaletteSemanticGoodDark1 | darken(@sapUiChartGood,10) | #4d8445 | rgb(77,132,69) | |
sapUiChartPaletteSemanticGoodDark2 | darken(@sapUiChartGood,15) | #44743c | rgb(68,116,60) | |
sapUiChartPaletteSemanticNeutralLight3 | saturate(lighten(@sapUiChartNeutral,30),1) | #d5dadc | rgb(213, 218, 220) | |
sapUiChartPaletteSemanticNeutralLight2 | saturate(lighten(@sapUiChartNeutral,20),1) | #bac1c4 | rgb(186, 193, 196) | |
sapUiChartPaletteSemanticNeutralLight1 | saturate(lighten(@sapUiChartNeutral,10),1) | #9ea8ad | rgb(158, 168, 173) | |
sapUiChartPaletteSemanticNeutral | @sapUiChartNeutral | #848f94 | rgb(132,143,148) | |
sapUiChartPaletteSemanticNeutralDark1 | saturate(darken(@sapUiChartNeutral,10),1) | #69767c | rgb(105, 118, 124) | |
sapUiChartPaletteSemanticNeutralDark2 | saturate(darken(@sapUiChartNeutral,15),1) | #5e696e | rgb(94, 105, 110) |
Sequential Palette
Color Name | Derived from | Color | Value Hex | Value RGB |
sapUiChartPaletteSequentialHue1Light3 | lighten(@sapUiChartSequence1,30) | #abdbf2 | rgb(171, 219, 242) | |
sapUiChartPaletteSequentialHue1Light2 | lighten(@sapUiChartSequence1,21) | #84caec | rgb(132, 202, 236) | |
sapUiChartPaletteSequentialHue1Light1 | lighten(@sapUiChartSequence1,12) | #5cbae5 | rgb(92, 186, 229) | |
sapUiChartPaletteSequentialHue1 | @sapUiChartSequence1 | #27a3dd | rgb(39,163,221) | |
sapUiChartPaletteSequentialHue1Dark1 | darken(@sapUiChartSequence1,12) | #1b7eac | rgb(27,126,172) | |
sapUiChartPaletteSequentialHue1Dark2 | darken(@sapUiChartSequence1,20) | #156489 | rgb(213, 218, 220) | |
sapUiChartPaletteSequentialHue2Light3 | lighten(@sapUiChartSequence2,30) | #d7eaa2 | rgb(215, 234, 162) | |
sapUiChartPaletteSequentialHue2Light2 | lighten(@sapUiChartSequence2,21) | #c6e17d | rgb(198, 225, 125) | |
sapUiChartPaletteSequentialHue2Light1 | lighten(@sapUiChartSequence2,12) | #b6d957 | rgb(182, 217, 87) | |
sapUiChartPaletteSequentialHue2 | @sapUiChartSequence2 | #9dc62d | rgb(157,198,45) | |
sapUiChartPaletteSequentialHue2Dark1 | darken(@sapUiChartSequence2,12) | #759422 | rgb(117, 148, 34) | |
sapUiChartPaletteSequentialHue2Dark2 | darken(@sapUiChartSequence2,20) | #5b731a | rgb(91, 115, 26) | |
sapUiChartPaletteSequentialHue3Light3 | lighten(@sapUiChartSequence3,30) | #fde5bd | rgb(253, 229, 189) | |
sapUiChartPaletteSequentialHue3Light2 | lighten(@sapUiChartSequence3,21) | #fbd491 | rgb(251, 212, 145) | |
sapUiChartPaletteSequentialHue3Light1 | lighten(@sapUiChartSequence3,12) | #fac364 | rgb(250, 195, 100) | |
sapUiChartPaletteSequentialHue3 | @sapUiChartSequence3 | #f8ac29 | rgb(248,172,41) | |
sapUiChartPaletteSequentialHue3Dark1 | darken(@sapUiChartSequence3,12) | #dd8e07 | rgb(221, 142, 7) | |
sapUiChartPaletteSequentialHue3Dark2 | darken(@sapUiChartSequence3,20) | #b57506 | rgb(181, 117, 6) | |
sapUiChartPaletteSequentialNeutralLight3 | saturate(lighten(@sapUiChartSequenceNeutral,30),1 | #d5dadc | rgb(213, 218, 220) | |
sapUiChartPaletteSequentialNeutralLight2 | saturate(lighten(@sapUiChartSequenceNeutral,20),1) | #bac1c4 | rgb(186, 193, 196) | |
sapUiChartPaletteSequentialNeutralLight1 | saturate(lighten(@sapUiChartSequenceNeutral,10),1) | #9ea8ad | rgb(158, 168, 173) | |
sapUiChartPaletteSequentialNeutral | @sapUiChartSequenceNeutral | #848f94 | rgb(132,143,148) | |
sapUiChartPaletteSequentialNeutralDark1 | saturate(darken(@sapUiChartSequenceNeutral,10),1) | #69767c | rgb(105, 118, 124) | |
sapUiChartPaletteSequentialNeutralDark2 | saturate(darken(@sapUiChartSequenceNeutral,15),1) | #5e696e | rgb(94, 105, 110) |
Resources
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.