Skip to content

Data visualization colors

Note: The documented colors are part of the Siemens branding and cannot be used for none Siemens applications. The color definitions are not part of the OSS package. Element comes with a default theme that is not part of the Siemens branding. The default theme is not documented.

Element defines additional colors for data visualization that provide design opportunities beyond the standard colors.

Usage of additional colors

The additional colors shall only be used for data visualization (e.g. charts) and not in any other UI context.

Use the standard colors for all other use cases.

Application of the standard color palette together with the additional color palette brings a unified and consistent experience to our data visualization. The color palettes provide a predefined set of accessibility tested colors. The usage of color pickers should be prevented as far as possible. Color pickers might be needed in drawing tools only.

Tokens

Color tokens describe the semantic usage of primitives in a given context. More specifically, semantic colors act as an intermediary level of specificity, between the raw value of colors in the color palettes and the usage of those colors in specific components. There can be various levels of semantic hierarchies, although we should strive to keep these as simple as possible.

Naming colors semantically has two benefits:

  1. It helps designers and developers decide what color to use.
  2. It makes our color system more efficient and flexible.

The following color palettes are specific to the context of data visualization:

Categorical colors

They are used to indicate distinctly different categories. Use these color palettes for small areas such as lines, dashes, or dots (e.g. trend, line chart).

Data

Value light Value dark Token Associated color - light Associated color - dark
$element-data-1 $si-ref-color-data-brand-petrol $si-ref-color-data-brand-light-petrol
$element-data-2 $si-ref-color-data-turquoise-900 $si-ref-color-data-brand-bold-green
$element-data-3 $si-ref-color-data-green-700 $si-ref-color-data-green-400
$element-data-4 $si-ref-color-data-turquoise-700 $si-ref-color-data-turquoise-100
$element-data-5 $si-ref-color-data-royal-blue-500 $si-ref-color-data-royal-blue-400
$element-data-6 $si-ref-color-data-interactive-coral-900 $si-ref-color-data-interactive-coral-100
$element-data-7 $si-ref-color-data-purple-700 $si-ref-color-data-purple-500
$element-data-8 $si-ref-color-data-purple-900 $si-ref-color-data-purple-200
$element-data-9 $si-ref-color-data-orchid-700 $si-ref-color-data-orchid-400
$element-data-10 $si-ref-color-data-red-700 $si-ref-color-data-red-500
$element-data-11 $si-ref-color-data-plum-900 $si-ref-color-data-plum-400
$element-data-12 $si-ref-color-data-plum-500 $si-ref-color-data-plum-200
$element-data-13 $si-ref-color-data-royal-blue-700 $si-ref-color-data-royal-blue-200
$element-data-14 $si-ref-color-data-orange-900 $si-ref-color-data-orange-400
$element-data-15 $si-ref-color-data-yellow-900 $si-ref-color-data-yellow-400
$element-data-16 $si-ref-color-data-sand-700 $si-ref-color-data-sand-500
$element-data-17 $si-ref-color-data-deep-blue-700 $si-ref-color-data-deep-blue-500

Rating Scale

Use it to represent the status of a metric. It shows the quality or properties of the data in a scale such as poor, average, and good.

Value Token Use Associated color
$element-color-bad Bad $si-ref-color-main-red-500
$element-color-poor Poor $si-ref-color-main-orange-500
$element-color-average Average $si-ref-color-main-yellow-500
$element-color-good Good $si-ref-color-data-avocado-400
$element-color-excellent Excellent $si-ref-color-data-green-500

Sequential colors

Data avocado

Value light Value dark Token Associated color - light Associated color - dark
$element-data-avocado-1 $si-ref-color-data-avocado-400 $si-ref-color-data-avocado-200
$element-data-avocado-2 $si-ref-color-data-avocado-500 $si-ref-color-data-avocado-400
$element-data-avocado-3 $si-ref-color-data-avocado-700 $si-ref-color-data-avocado-500
$element-data-avocado-4 $si-ref-color-data-avocado-900 $si-ref-color-data-avocado-700

Data green

Value light Value dark Token Associated color - light Associated color - dark
$element-data-green-1 $si-ref-color-data-green-400 $si-ref-color-data-green-200
$element-data-green-2 $si-ref-color-data-green-500 $si-ref-color-data-green-400
$element-data-green-3 $si-ref-color-data-green-700 $si-ref-color-data-green-500
$element-data-green-4 $si-ref-color-data-green-900 $si-ref-color-data-green-700

Data turquoise

Value light Value dark Token Associated color - light Associated color - dark
$element-data-turquoise-1 $si-ref-color-data-turquoise-400 $si-ref-color-data-turquoise-200
$element-data-turquoise-2 $si-ref-color-data-turquoise-500 $si-ref-color-data-turquoise-400
$element-data-turquoise-3 $si-ref-color-data-turquoise-700 $si-ref-color-data-turquoise-500
$element-data-turquoise-4 $si-ref-color-data-turquoise-900 $si-ref-color-data-turquoise-700

Data interactive coral

Value light Value dark Token Associated color - light Associated color - dark
$element-data-interactive-coral-1 $si-ref-color-data-interactive-coral-400 $si-ref-color-data-interactive-coral-200
$element-data-interactive-coral-2 $si-ref-color-data-interactive-coral-500 $si-ref-color-data-interactive-coral-400
$element-data-interactive-coral-3 $si-ref-color-data-interactive-coral-700 $si-ref-color-data-interactive-coral-500
$element-data-interactive-coral-4 $si-ref-color-data-interactive-coral-900 $si-ref-color-data-interactive-coral-700

Data blue

Value light Value dark Token Associated color - light Associated color - dark
$element-data-blue-1 $si-ref-color-data-blue-400 $si-ref-color-data-blue-200
$element-data-blue-2 $si-ref-color-data-blue-500 $si-ref-color-data-blue-400
$element-data-blue-3 $si-ref-color-data-blue-700 $si-ref-color-data-blue-500
$element-data-blue-4 $si-ref-color-data-blue-900 $si-ref-color-data-blue-700

Data royal blue

Value light Value dark Token Associated color - light Associated color - dark
$element-data-royal-blue-1 $si-ref-color-data-royal-blue-400 $si-ref-color-data-royal-blue-200
$element-data-royal-blue-2 $si-ref-color-data-royal-blue-500 $si-ref-color-data-royal-blue-400
$element-data-royal-blue-3 $si-ref-color-data-royal-blue-700 $si-ref-color-data-royal-blue-500
$element-data-royal-blue-4 $si-ref-color-data-royal-blue-900 $si-ref-color-data-royal-blue-700

Data purple

Value light Value dark Token Associated color - light Associated color - dark
$element-data-purple-1 $si-ref-color-data-purple-400 $si-ref-color-data-purple-200
$element-data-purple-2 $si-ref-color-data-purple-500 $si-ref-color-data-purple-400
$element-data-purple-3 $si-ref-color-data-purple-700 $si-ref-color-data-purple-500
$element-data-purple-4 $si-ref-color-data-purple-900 $si-ref-color-data-purple-700

Data orchid

Value light Value dark Token Associated color - light Associated color - dark
$element-data-orchid-1 $si-ref-color-data-orchid-400 $si-ref-color-data-orchid-200
$element-data-orchid-2 $si-ref-color-data-orchid-500 $si-ref-color-data-orchid-400
$element-data-orchid-3 $si-ref-color-data-orchid-700 $si-ref-color-data-orchid-500
$element-data-orchid-4 $si-ref-color-data-orchid-900 $si-ref-color-data-orchid-700

Data plum

Value light Value dark Token Associated color - light Associated color - dark
$element-data-plum-1 $si-ref-color-data-plum-400 $si-ref-color-data-plum-200
$element-data-plum-2 $si-ref-color-data-plum-500 $si-ref-color-data-plum-400
$element-data-plum-3 $si-ref-color-data-plum-700 $si-ref-color-data-plum-500
$element-data-plum-4 $si-ref-color-data-plum-900 $si-ref-color-data-plum-700

Data red

Value light Value dark Token Associated color - light Associated color - dark
$element-data-red-1 $si-ref-color-data-red-400 $si-ref-color-data-red-200
$element-data-red-2 $si-ref-color-data-red-500 $si-ref-color-data-red-400
$element-data-red-3 $si-ref-color-data-red-700 $si-ref-color-data-red-500
$element-data-red-4 $si-ref-color-data-red-900 $si-ref-color-data-red-700

Data orange

Value light Value dark Token Associated color - light Associated color - dark
$element-data-orange-1 $si-ref-color-data-orange-200 $si-ref-color-data-orange-200
$element-data-orange-2 $si-ref-color-data-orange-400 $si-ref-color-data-orange-400
$element-data-orange-3 $si-ref-color-data-orange-500 $si-ref-color-data-orange-500
$element-data-orange-4 $si-ref-color-data-orange-700 $si-ref-color-data-orange-700

Data yellow

Value light Value dark Token Associated color - light Associated color - dark
$element-data-yellow-1 $si-ref-color-data-yellow-400 $si-ref-color-data-yellow-200
$element-data-yellow-2 $si-ref-color-data-yellow-500 $si-ref-color-data-yellow-400
$element-data-yellow-3 $si-ref-color-data-yellow-700 $si-ref-color-data-yellow-500
$element-data-yellow-4 $si-ref-color-data-yellow-900 $si-ref-color-data-yellow-700

Data sand

Value light Value dark Token Associated color - light Associated color - dark
$element-data-sand-1 $si-ref-color-data-sand-400 $si-ref-color-data-sand-200
$element-data-sand-2 $si-ref-color-data-sand-500 $si-ref-color-data-sand-400
$element-data-sand-3 $si-ref-color-data-sand-700 $si-ref-color-data-sand-500
$element-data-sand-4 $si-ref-color-data-sand-900 $si-ref-color-data-sand-700

Data deep blue

Value light Value dark Token Associated color - light Associated color - dark
$element-data-deep-blue-1 $si-ref-color-data-deep-blue-400 $si-ref-color-data-deep-blue-200
$element-data-deep-blue-2 $si-ref-color-data-deep-blue-500 $si-ref-color-data-deep-blue-400
$element-data-deep-blue-3 $si-ref-color-data-deep-blue-700 $si-ref-color-data-deep-blue-500
$element-data-deep-blue-4 $si-ref-color-data-deep-blue-900 $si-ref-color-data-deep-blue-700

Except where otherwise noted, content on this site is licensed under MIT License.