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.

Elements and Controls

Chart (guidelines)
Chart – Color Palettes (guidelines)

Implementation

No links.