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.

Elements and Controls

Chart (guidelines)
Chart – Color Palettes (guidelines)

Implementation

No links.