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

<div> <div>Color Name</div> <div>Example: Belize (light flavor)</div> <div></div> </div> <div> <div>sapUiChartPaletteQualitativeHue1</div> <div></div> <div>#5899DA</div> </div> <div> <div>sapUiChartPaletteQualitativeHue2</div> <div></div> <div>#E8743B</div> </div> <div> <div>sapUiChartPaletteQualitativeHue3</div> <div></div> <div>#19A979</div> </div> <div> <div>sapUiChartPaletteQualitativeHue4</div> <div></div> <div>#ED4A7B</div> </div> <div> <div>sapUiChartPaletteQualitativeHue5</div> <div></div> <div>#945ECF</div> </div> <div> <div>sapUiChartPaletteQualitativeHue6</div> <div></div> <div>#13A4B4</div> </div> <div> <div>sapUiChartPaletteQualitativeHue7</div> <div></div> <div>#525DF4</div> </div> <div> <div>sapUiChartPaletteQualitativeHue8</div> <div></div> <div>#BF399E</div> </div> <div> <div>sapUiChartPaletteQualitativeHue9</div> <div></div> <div>#6C8893</div> </div> <div> <div>sapUiChartPaletteQualitativeHue10</div> <div></div> <div>#EE6868</div> </div> <div> <div>sapUiChartPaletteQualitativeHue11</div> <div></div> <div>#2F6497</div> </div>

Semantic Palette

<div> <div>Color Name</div> <div>Example: Belize (light flavor)</div> <div></div> </div> <div> <div>sapUiChartPaletteSemanticBadLight3</div> <div></div> <div>#f99494</div> </div> <div> <div>sapUiChartPaletteSemanticBadLight2</div> <div></div> <div>#f66364</div> </div> <div> <div>sapUiChartPaletteSemanticBadLight1</div> <div></div> <div>#f33334</div> </div> <div> <div>sapUiChartPaletteSemanticBad</div> <div></div> <div>#dc0d0e</div> </div> <div> <div>sapUiChartPaletteSemanticBadDark1</div> <div></div> <div>#b90c0d</div> </div> <div> <div>sapUiChartPaletteSemanticBadDark2</div> <div></div> <div>#930a0a</div> </div> <div> <div>sapUiChartPaletteSemanticCriticalLight3</div> <div></div> <div>#f8cc8c</div> </div> <div> <div>sapUiChartPaletteSemanticCriticalLight2</div> <div></div> <div>#f5b04d</div> </div> <div> <div>sapUiChartPaletteSemanticCriticalLight1</div> <div></div> <div>#f29b1d</div> </div> <div> <div>sapUiChartPaletteSemanticCritical</div> <div></div> <div>#de890d</div> </div> <div> <div>sapUiChartPaletteSemanticCriticalDark1</div> <div></div> <div>#c67a0c</div> </div> <div> <div>sapUiChartPaletteSemanticCriticalDark2</div> <div></div> <div>#a4650a</div> </div> <div> <div>sapUiChartPaletteSemanticGoodLight3</div> <div></div> <div>#a1dbb1</div> </div> <div> <div>sapUiChartPaletteSemanticGoodLight2</div> <div></div> <div>#71c989</div> </div> <div> <div>sapUiChartPaletteSemanticGoodLight1</div> <div></div> <div>#4cba6b</div> </div> <div> <div>sapUiChartPaletteSemanticGood</div> <div></div> <div>#3fa45b</div> </div> <div> <div>sapUiChartPaletteSemanticGoodDark1</div> <div></div> <div>#358a4d</div> </div> <div> <div>sapUiChartPaletteSemanticGoodDark2</div> <div></div> <div>#2a6d3c</div> </div> <div> <div>sapUiChartPaletteSemanticNeutralLight3</div> <div></div> <div>#d5dadc</div> </div> <div> <div>sapUiChartPaletteSemanticNeutralLight2</div> <div></div> <div>#bac1c4</div> </div> <div> <div>sapUiChartPaletteSemanticNeutralLight1</div> <div></div> <div>#9ea8ad</div> </div> <div> <div>sapUiChartPaletteSemanticNeutral</div> <div></div> <div>#848f94</div> </div> <div> <div>sapUiChartPaletteSemanticNeutralDark1</div> <div></div> <div>#69767c</div> </div> <div> <div>sapUiChartPaletteSemanticNeutralDark2</div> <div></div> <div>#596468</div> </div>

Sequential Palette

<div> <div>Color Name</div> <div>Example: Belize (light flavor)</div> <div></div> </div> <div> <div>sapUiChartPaletteSequentialHue1Light3</div> <div></div> <div>#b2d4f5</div> </div> <div> <div>sapUiChartPaletteSequentialHue1Light2</div> <div></div> <div>#93bfeb</div> </div> <div> <div>sapUiChartPaletteSequentialHue1Light1</div> <div></div> <div>#74abe2</div> </div> <div> <div>sapUiChartPaletteSequentialHue1</div> <div></div> <div>#5899DA</div> </div> <div> <div>sapUiChartPaletteSequentialHue1Dark1</div> <div></div> <div>#367dc4</div> </div> <div> <div>sapUiChartPaletteSequentialHue1Dark2</div> <div></div> <div>#1866b4</div> </div> <div> <div>sapUiChartPaletteSequentialHue2Light3</div> <div></div> <div>#fcc3a7</div> </div> <div> <div>sapUiChartPaletteSequentialHue2Light2</div> <div></div> <div>#f5aa85</div> </div> <div> <div>sapUiChartPaletteSequentialHue2Light1</div> <div></div> <div>#ef8d5d</div> </div> <div> <div>sapUiChartPaletteSequentialHue2</div> <div></div> <div>#E8743B</div> </div> <div> <div>sapUiChartPaletteSequentialHue2Dark1</div> <div></div> <div>#da5a1b</div> </div> <div> <div>sapUiChartPaletteSequentialHue2Dark2</div> <div></div> <div>#cc4300</div> </div> <div> <div>sapUiChartPaletteSequentialHue3Light3</div> <div></div> <div>#8fd1bb</div> </div> <div> <div>sapUiChartPaletteSequentialHue3Light2</div> <div></div> <div>#66c2a3</div> </div> <div> <div>sapUiChartPaletteSequentialHue3Light1</div> <div></div> <div>#3fb68e</div> </div> <div> <div>sapUiChartPaletteSequentialHue3</div> <div></div> <div>#19A979</div> </div> <div> <div>sapUiChartPaletteSequentialHue3Dark1</div> <div></div> <div>#0e8c62</div> </div> <div> <div>sapUiChartPaletteSequentialHue3Dark2</div> <div></div> <div>#03734d</div> </div> <div> <div>sapUiChartPaletteSequentialNeutralLight3</div> <div></div> <div>#d5dadc</div> </div> <div> <div>sapUiChartPaletteSequentialNeutralLight2</div> <div></div> <div>#bac1c4</div> </div> <div> <div>sapUiChartPaletteSequentialNeutralLight1</div> <div></div> <div>#9ea8ad</div> </div> <div> <div>sapUiChartPaletteSequentialNeutral</div> <div></div> <div>#848f94</div> </div> <div> <div>sapUiChartPaletteSequentialNeutralDark1</div> <div></div> <div>#69767c</div> </div> <div> <div>sapUiChartPaletteSequentialNeutralDark2</div> <div></div> <div>#596468</div> </div>

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

Implementation

No links.

Visual Design