Look, Feel, and Wording Colors Chart Color Palettes – Values and Names

Updated: December 19, 2016
SAPUI5 Version 1.28

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.

Elements and Controls