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.
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¶
| 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 |
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.
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¶
si.ref.color.data.brand.bold-green
#00FFB9
si.ref.color.data.brand.light-petrol
#00C1B6
si.ref.color.data.brand.petrol
#009999
Deep-blue¶
si.ref.color.data.deep-blue.100
#E5E5E9
si.ref.color.data.deep-blue.200
#CCCCD4
si.ref.color.data.deep-blue.400
#9999A9
si.ref.color.data.deep-blue.500
#7D8099
si.ref.color.data.deep-blue.700
#4C4C68
si.ref.color.data.deep-blue.900
#262648
Turquoise¶
si.ref.color.data.turquoise.100
#85E9D2
si.ref.color.data.turquoise.200
#47E2BB
si.ref.color.data.turquoise.400
#00D7A0
si.ref.color.data.turquoise.500
#00AF8E
si.ref.color.data.turquoise.700
#1A747D
si.ref.color.data.turquoise.900
#005159
Sand¶
si.ref.color.data.sand.100
#EFEFEC
si.ref.color.data.sand.200
#DFDFD9
si.ref.color.data.sand.400
#C5C5B8
si.ref.color.data.sand.500
#AAAA96
si.ref.color.data.sand.700
#757563
si.ref.color.data.sand.900
#5E5E4A
Royal-blue¶
si.ref.color.data.royal-blue.100
#B2E0FF
si.ref.color.data.royal-blue.200
#97C7FF
si.ref.color.data.royal-blue.400
#6895F6
si.ref.color.data.royal-blue.500
#3664C6
si.ref.color.data.royal-blue.700
#00237A
si.ref.color.data.royal-blue.900
#00004A
Blue¶
si.ref.color.data.blue.100
#CCF2F8
si.ref.color.data.blue.200
#80DFED
si.ref.color.data.blue.400
#4DD1E7
si.ref.color.data.blue.500
#00BEDC
si.ref.color.data.blue.700
#0087BE
si.ref.color.data.blue.900
#00557C
Interactive-coral¶
si.ref.color.data.interactive-coral.100
#CCF5F5
si.ref.color.data.interactive-coral.200
#66E0E0
si.ref.color.data.interactive-coral.400
#00CCCC
si.ref.color.data.interactive-coral.500
#00A3AB
si.ref.color.data.interactive-coral.700
#007082
si.ref.color.data.interactive-coral.900
#002949
Plum¶
si.ref.color.data.plum.100
#FFBEDA
si.ref.color.data.plum.200
#FF98C4
si.ref.color.data.plum.400
#E5659B
si.ref.color.data.plum.500
#C04774
si.ref.color.data.plum.700
#9F1853
si.ref.color.data.plum.900
#4F153D
Purple¶
si.ref.color.data.purple.100
#D2CBFF
si.ref.color.data.purple.200
#BFB0F3
si.ref.color.data.purple.400
#A68DFF
si.ref.color.data.purple.500
#805CFF
si.ref.color.data.purple.700
#7353E5
si.ref.color.data.purple.900
#553BA3
Orchid¶
si.ref.color.data.orchid.100
#EDD6F2
si.ref.color.data.orchid.200
#D59CDE
si.ref.color.data.orchid.400
#B95CC9
si.ref.color.data.orchid.500
#A733BC
si.ref.color.data.orchid.700
#740089
si.ref.color.data.orchid.900
#52245C
Orange¶
si.ref.color.data.orange.100
#FFDEB2
si.ref.color.data.orange.200
#FFBC66
si.ref.color.data.orange.400
#FF9000
si.ref.color.data.orange.500
#E57700
si.ref.color.data.orange.700
#BE5925
si.ref.color.data.orange.900
#801100
Yellow¶
si.ref.color.data.yellow.100
#FFF7D6
si.ref.color.data.yellow.200
#FFE784
si.ref.color.data.yellow.400
#FFD732
si.ref.color.data.yellow.500
#E5BD19
si.ref.color.data.yellow.700
#B28A00
si.ref.color.data.yellow.900
#805800
Red¶
si.ref.color.data.red.100
#FCCCD7
si.ref.color.data.red.200
#FFA8B3
si.ref.color.data.red.400
#FF6779
si.ref.color.data.red.500
#FF2640
si.ref.color.data.red.700
#D72339
si.ref.color.data.red.900
#990000
Green¶
si.ref.color.data.green.100
#CCF7DE
si.ref.color.data.green.200
#80EBAC
si.ref.color.data.green.400
#01D65A
si.ref.color.data.green.500
#00A327
si.ref.color.data.green.700
#00890E
si.ref.color.data.green.900
#005700
Avocado¶
si.ref.color.data.avocado.100
#F3F9E0
si.ref.color.data.avocado.200
#D1E98A
si.ref.color.data.avocado.400
#9EC625
si.ref.color.data.avocado.500
#637D17
si.ref.color.data.avocado.700
#435410
si.ref.color.data.avocado.900
#2E3A0A
Except where otherwise noted, content on this site is licensed under MIT License.