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 .
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 Palette
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$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.
Value Token Use Associated color $element-color-badBad $siemens-red-500$element-color-poorPoor $siemens-orange-500$element-color-averageAverage $siemens-yellow-500$element-color-goodGood $siemens-data-avocado-400$element-color-excellentExcellent $siemens-data-green-500
Sequential Colors Data Green Value light Value dark 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 Value light Value dark 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 Value light Value dark 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 Value light Value dark 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 Value light Value dark 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 Value light Value dark 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 Value light Value dark 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 Value light Value dark 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
Except where otherwise noted, content on this site is licensed under MIT License .