This page provides all the color token names that are intended for use in all SAP chart palettes.

Use of Tokens

Use token/variable names.

Don’t use HEX values!

To support cross-technology chart implementation and theming capabilities, styles are defined by token names. Tokens ensure that values can be implemented centrally for multiple usages. This is explained in detail in the design token guidelines.

The associated HEX values shown on this page are for the Morning Horizon theme and should not be implemented directly in any implementation!

Values for the theming tokens for all themes are available within the directories of the open-sourced SAP Base Theming Content repository. Also check out the guidelines for design tokens and theming.

Qualitative Palette

Qualitative Palette with Base Chart Color Tokens

The base chart colors are intended to be used across all of the SAP technologies. The value of sapChart_OrderedColor_1 (and the corresponding sapChart_Sequence_1) is used as the default color across chart libraries. All of the ordered tokens are used as base values for all chart palettes. The technical ordering of the chart colors may vary between chart libraries depending on the context. It is, however, important that the correct theming tokens are used to ensure consistency.

Sequential Palette

Chart Sequence Colors

Chart sequence colors are connected to the main chart ordered colors. For example, sapChart_OrderedColor_1 is used as the value for sapChart_Sequence_1. The other sequence colors are then calculated to be either lighter (plus) or darker (minus) versions of sapChart_Sequence_1. This simple color relationship logic makes colors easy to modify for themeability, allowing SAP to update any token centrally and also provide future-friendly theme compatibility across all SAP technologies.

Chart Sequence Color 1

Chart Sequence Color 2

Chart Sequence Color 3

Chart Sequence Color 4

Chart Sequence Color 5

Chart Sequence Color 6

Chart Sequence Color 7

Chart Sequence Color 8

Chart Sequence Color 9

Chart Sequence Color 10

Chart Sequence Color 11

Chart Sequence Color 12

Semantic Palette

Semantic Token Naming

The naming of the semantic tokens is generic and may not reflect usage within the charts. Application teams determine the contextual usage of chart colors.

Semantic Sequence Palette

Semantic Sequence Colors for Charts

Semantic sequence colors for charts are connected to the main semantic colors. For example, sapChart_Critical is used as the value for sapChart_Sequence_Critical. The other sequence colors are then calculated to be either lighter (plus) or darker (minus) versions of sapChart_Sequence_Critical. This simple color relationship logic makes colors easy to modify for themeability, allowing SAP to update any token centrally and also provide future-friendly theme compatibility across all SAP technologies.

The naming of semantic tokens is generic and may not reflect usage within the charts. Application teams determine the contextual usage of chart colors.

Chart Sequence Bad

Context examples: a bad or error value state context; heat; lifecycle contexts like negative, minus, overdue, or stopped

Chart Sequence Critical

Context examples: a warning value state; lifecycle contexts like critical, reduced, borderline, or low stock levels

Chart Sequence Good

Context examples: a successful or good value state; lifecycle contexts like positive, enhanced, healthy, or full stock levels

Chart Sequence Neutral

Context examples: a null value state; lifecycle contexts like neutral, normal, regular, or medium stock levels.

Visual Accessibility

Enhancing Perceivable Contrast in Charts

The base set of chart colors has been tested for several color blindness types but can not cover all color blindness types.

Each color is defined with theming variables (tokens), which allow you to customize the color values using theming tools.

The extended chart sequence colors each have a corresponding text color and also a text shadow (halo) style that ensures sufficient text-to-background contrast. Additionally, built-in logic allows you to customize the chart tokens using theming tools. These provide an automatic switch between light and dark text and text shadow colors to enhance legibility.

All of the text shadow styles for each set of sequence text colors are provided as part of the SAP Theming Base Content repository.

Example:

Chart Sequence Neutral color token:
sapChart_Sequence_Neutral: #758ca4
Non-text contrast to UI background (sapBackgroundColor): 3:1;

Text color token:
sapChart_Sequence_Neutral_TextColor: #000000;
Text contrast to neutral chart color (sapChart_Sequence_Neutral) color: 3:1;

Text shadow style token:
sapChart_Sequence_Neutral_TextShadow: 0 0 .125rem #fff;
A text shadow (halo) may be used to enhance text legibility.

Non-Text Contrast using Borders

Each set of sequence colors also has one border color that will ensure the correct contrast.

Border styles for each set of sequence colors are provided as part of the SAP Theming Base Content repository.

Example:

Chart Sequence 1 border color token:
sapChart_Sequence_1_BorderColor: #3278BE
Non-text contrast to UI background (sapBackgroundColor): 4.2:1;
Non-text contrast to chart Interaction color (sapChart_Data_InteractiveColor): 4.5:1;

1. Regular
2. Interactive
3. Chart border to UI/chart background: More than 3:1
4. Chart border color (Sequence_1) to interactive border color: More than 3:1

1. Dark text measured against light halo
2. Light text measured against dark halo

The dark and light values for the text shadow ensure that text is always legible and never blurry.

Related Links