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:

It helps designers and developers decide what color to use.
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¶

Token	Associated color - light	Associated color - dark
`$element-data-1`	`$siemens-data-petrol`	`$siemens-data-light-petrol`
`$element-data-2`	`$siemens-data-turquoise-900`	`$siemens-data-bold-green`
`$element-data-3`	`$siemens-data-green-700`	`$siemens-data-green-400`
`$element-data-4`	`$siemens-data-turquoise-700`	`$siemens-data-turquoise-100`
`$element-data-5`	`$siemens-data-royal-blue-500`	`$siemens-data-royal-blue-400`
`$element-data-6`	`$siemens-data-interactive-coral-900`	`$siemens-data-interactive-coral-100`
`$element-data-7`	`$siemens-data-purple-700`	`$siemens-data-purple-500`
`$element-data-8`	`$siemens-data-purple-900`	`$siemens-data-purple-200`
`$element-data-9`	`$siemens-data-orchid-700`	`$siemens-data-orchid-400`
`$element-data-10`	`$siemens-data-red-700`	`$siemens-data-red-500`
`$element-data-11`	`$siemens-data-plum-900`	`$siemens-data-plum-400`
`$element-data-12`	`$siemens-data-plum-500`	`$siemens-data-plum-200`
`$element-data-13`	`$siemens-data-royal-blue-700`	`$siemens-data-royal-blue-200`
`$element-data-14`	`$siemens-data-orange-900`	`$siemens-data-orange-400`
`$element-data-15`	`$siemens-data-yellow-900`	`$siemens-data-yellow-400`
`$element-data-16`	`$siemens-data-sand-700`	`$siemens-data-sand-500`
`$element-data-17`	`$siemens-data-deep-blue-700`	`$siemens-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.

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

Sequential colors¶

Data green¶

Token	Associated color - light	Associated color - dark
`$element-data-green-1`	`$siemens-data-green-400`	`$siemens-data-green-200`
`$element-data-green-2`	`$siemens-data-green-500`	`$siemens-data-green-400`
`$element-data-green-3`	`$siemens-data-green-700`	`$siemens-data-green-500`
`$element-data-green-4`	`$siemens-data-green-900`	`$siemens-data-green-700`

Data turquoise¶

Token	Associated color - light	Associated color - dark
`$element-data-turquoise-1`	`$siemens-data-turquoise-400`	`$siemens-data-turquoise-200`
`$element-data-turquoise-2`	`$siemens-data-turquoise-500`	`$siemens-data-turquoise-400`
`$element-data-turquoise-3`	`$siemens-data-turquoise-700`	`$siemens-data-turquoise-500`
`$element-data-turquoise-4`	`$siemens-data-turquoise-900`	`$siemens-data-turquoise-700`

Data interactive coral¶

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

Data purple¶

Token	Associated color - light	Associated color - dark
`$element-data-purple-1`	`$siemens-data-purple-400`	`$siemens-data-purple-200`
`$element-data-purple-2`	`$siemens-data-purple-500`	`$siemens-data-purple-400`
`$element-data-purple-3`	`$siemens-data-purple-700`	`$siemens-data-purple-500`
`$element-data-purple-4`	`$siemens-data-purple-900`	`$siemens-data-purple-700`

Data plum¶

Token	Associated color - light	Associated color - dark
`$element-data-plum-1`	`$siemens-data-plum-400`	`$siemens-data-plum-200`
`$element-data-plum-2`	`$siemens-data-plum-500`	`$siemens-data-plum-400`
`$element-data-plum-3`	`$siemens-data-plum-700`	`$siemens-data-plum-500`
`$element-data-plum-4`	`$siemens-data-plum-900`	`$siemens-data-plum-700`

Data red¶

Token	Associated color - light	Associated color - dark
`$element-data-red-1`	`$siemens-data-red-400`	`$siemens-data-red-200`
`$element-data-red-2`	`$siemens-data-red-500`	`$siemens-data-red-400`
`$element-data-red-3`	`$siemens-data-red-700`	`$siemens-data-red-500`
`$element-data-red-4`	`$siemens-data-red-900`	`$siemens-data-red-700`

Data orange¶

Token	Associated color - light	Associated color - dark
`$element-data-orange-1`	`$siemens-data-orange-200`	`$siemens-data-orange-200`
`$element-data-orange-2`	`$siemens-data-orange-400`	`$siemens-data-orange-400`
`$element-data-orange-3`	`$siemens-data-orange-500`	`$siemens-data-orange-500`
`$element-data-orange-4`	`$siemens-data-orange-700`	`$siemens-data-orange-700`

Data sand¶

Token	Associated color - light	Associated color - dark
`$element-data-sand-1`	`$siemens-data-sand-400`	`$siemens-data-sand-200`
`$element-data-sand-2`	`$siemens-data-sand-500`	`$siemens-data-sand-400`
`$element-data-sand-3`	`$siemens-data-sand-700`	`$siemens-data-sand-500`
`$element-data-sand-4`	`$siemens-data-sand-900`	`$siemens-data-sand-700`

Color palette ---¶

Element has the concept of an additional color palette, in case the standard colors don't offer enough variety for use cases where many different colors are used at once.

Five additional color families comprise the complete theme.

Only colors from these families (standard and additional) should be used for design and implementation work of data visualization content.

The palette represents the universe of color possibilities in our interfaces. Color definitions (primitives) presented below are the hexadecimal values that we assign to a predefined set of colors. These primitives will be exclusively used as values for color tokens.

Brand¶

Sample	Color Variable	Color Code
	`$siemens-data-light-petrol`	`#00C1B6`
	`$siemens-data-petrol`	`#009999`
	`$siemens-data-bold-green`	`#00FFB9`

Deep blue¶

Sample	Color Variable	Color Code
	`$siemens-data-deep-blue-100`	`#E5E5E9`
	`$siemens-data-deep-blue-200`	`#CCCCD4`
	`$siemens-data-deep-blue-400`	`#9999A9`
	`$siemens-data-deep-blue-500`	`#7D8099`
	`$siemens-data-deep-blue-700`	`#4C4C68`
	`$siemens-data-deep-blue-900`	`#262648`

Turquoise¶

Sample	Color Variable	Color Code
	`$siemens-data-turquoise-100`	`#85E9D2`
	`$siemens-data-turquoise-200`	`#47E2BB`
	`$siemens-data-turquoise-400`	`#00D7A0`
	`$siemens-data-turquoise-500`	`#00AF8E`
	`$siemens-data-turquoise-700`	`#1A747D`
	`$siemens-data-turquoise-900`	`#005159`

Sand¶

Sample	Color Variable	Color Code
	`$siemens-data-sand-100`	`#EFEFEC`
	`$siemens-data-sand-200`	`#DFDFD9`
	`$siemens-data-sand-400`	`#C5C5B8`
	`$siemens-data-sand-500`	`#AAAA96`
	`$siemens-data-sand-700`	`#757563`
	`$siemens-data-sand-900`	`#5E5E4A`

Royal blue¶

Sample	Color Variable	Color Code
	`$siemens-data-royal-blue-100`	`#B2E0FF`
	`$siemens-data-royal-blue-200`	`#97C7FF`
	`$siemens-data-royal-blue-400`	`#6895F6`
	`$siemens-data-royal-blue-500`	`#3664C6`
	`$siemens-data-royal-blue-700`	`#00237A`
	`$siemens-data-royal-blue-900`	`#00004A`

Blue¶

Sample	Color Variable	Color Code
	`$siemens-data-blue-100`	`#CCF2F8`
	`$siemens-data-blue-200`	`#80DFED`
	`$siemens-data-blue-400`	`#4DD1E7`
	`$siemens-data-blue-500`	`#00BEDC`
	`$siemens-data-blue-700`	`#0087BE`
	`$siemens-data-blue-900`	`#00557C`

Interactive coral¶

Sample	Color Variable	Color Code
	`$siemens-data-interactive-coral-100`	`#CCF5F5`
	`$siemens-data-interactive-coral-200`	`#66E0E0`
	`$siemens-data-interactive-coral-400`	`#00CCCC`
	`$siemens-data-interactive-coral-500`	`#00A3AB`
	`$siemens-data-interactive-coral-700`	`#007082`
	`$siemens-data-interactive-coral-900`	`#002949`

Plum¶

Sample	Color Variable	Color Code
	`$siemens-data-plum-100`	`#FFBEDA`
	`$siemens-data-plum-200`	`#FF98C4`
	`$siemens-data-plum-400`	`#E5659B`
	`$siemens-data-plum-500`	`#C04774`
	`$siemens-data-plum-700`	`#9F1853`
	`$siemens-data-plum-900`	`#4F153D`

Purple¶

Sample	Color Variable	Color Code
	`$siemens-data-purple-100`	`#D2CBFF`
	`$siemens-data-purple-200`	`#BFB0F3`
	`$siemens-data-purple-400`	`#A68DFF`
	`$siemens-data-purple-500`	`#805CFF`
	`$siemens-data-purple-700`	`#7353E5`
	`$siemens-data-purple-900`	`#553BA3`

Orchid¶

Sample	Color Variable	Color Code
	`$siemens-data-orchid-100`	`#EDD6F2`
	`$siemens-data-orchid-200`	`#D399DD`
	`$siemens-data-orchid-400`	`#B95CC9`
	`$siemens-data-orchid-500`	`#A733BC`
	`$siemens-data-orchid-700`	`#740089`
	`$siemens-data-orchid-900`	`#52245C`

Orange¶

Sample	Color Variable	Color Code
	`$siemens-data-orange-100`	`#FFDEB2`
	`$siemens-data-orange-200`	`#FFBC66`
	`$siemens-data-orange-400`	`#FF9000`
	`$siemens-data-orange-500`	`#E57700`
	`$siemens-data-orange-700`	`#BE5925`
	`$siemens-data-orange-900`	`#801100`

Yellow¶

Sample	Color Variable	Color Code
	`$siemens-data-yellow-100`	`#FFF7D6`
	`$siemens-data-yellow-200`	`#FFE784`
	`$siemens-data-yellow-400`	`#FFD732`
	`$siemens-data-yellow-500`	`#E5BD19`
	`$siemens-data-yellow-700`	`#B28A00`
	`$siemens-data-yellow-900`	`#805800`

Red¶

Sample	Color Variable	Color Code
	`$siemens-data-red-100`	`#FCCCD7`
	`$siemens-data-red-200`	`#FFA8B3`
	`$siemens-data-red-400`	`#FF6779`
	`$siemens-data-red-500`	`#FF2640`
	`$siemens-data-red-700`	`#D72339`
	`$siemens-data-red-900`	`#990000`

Green¶

Sample	Color Variable	Color Code
	`$siemens-data-green-100`	`#CCF7DE`
	`$siemens-data-green-200`	`#80EBAC`
	`$siemens-data-green-400`	`#01D65A`
	`$siemens-data-green-500`	`#00A327`
	`$siemens-data-green-700`	`#00890E`
	`$siemens-data-green-900`	`#005700`

Avocado¶

Sample	Color Variable	Color Code
	`$siemens-data-avocado-100`	`#F3F9E0`
	`$siemens-data-avocado-200`	`#D1E98A`
	`$siemens-data-avocado-400`	`#9EC625`
	`$siemens-data-avocado-500`	`#637D17`
	`$siemens-data-avocado-700`	`#435410`
	`$siemens-data-avocado-900`	`#2E3A0A`