Color Palette¶

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 includes a variety of solid colors and gradients to ensure a consistent look is carried through any application.

Seven color families comprise the complete theme. The Deep Blue / Gray family is most prevalent, making use of subtle shades for content organization.

The Teal family serves as the brand and primary action color. Other contextual colors include Success, Warning and Danger.

Only colors from these families should be used for design and implementation work.

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.

Element color palette

Deep Blue / Gray¶

Sample	Color Variable	Color Code
	`$siemens-white`	`#FFFFFF`
	`$siemens-deep-blue-50`	`#EBEBEE`
	`$siemens-deep-blue-100`	`#E5E5E9`
	`$siemens-deep-blue-200`	`#CCCCD4`
	`$siemens-deep-blue-300`	`#B3B3BE`
	`$siemens-deep-blue-400`	`#9999A9`
	`$siemens-deep-blue-500`	`#7D8099`
	`$siemens-deep-blue-600`	`#66667E`
	`$siemens-deep-blue-700`	`#4C4C68`
	`$siemens-deep-blue-800`	`#23233C`
	`$siemens-deep-blue-900`	`#000028`
	`$siemens-black`	`#000000`
	`$siemens-light-sand`	`#F3F3F0`
	`$siemens-sand`	`#E8E8E3`
	`$siemens-dark-grayish-navy`	`#2D2D45`
	`$siemens-grayish-navy`	`#37374D`

Interactive¶

Sample	Color Variable	Color Code
	`$siemens-interactive-blue-100`	`#E0F1F4`
	`$siemens-interactive-blue-300`	`#73BAC9`
	`$siemens-interactive-blue-500`	`#00718A`
	`$siemens-interactive-blue-700`	`#004F60`
	`$siemens-interactive-blue-900`	`#00333E`
	`$siemens-bold-green`	`#00FFB9`
	`$siemens-light-bold-green`	`#C2FFEE`
	`$siemens-dark-bold-green`	`#001F39`
	`$siemens-interactive-coral`	`#00CCCC`
	`$siemens-interactive-coral-db55`	`#007082`
	`$siemens-teal`	`#005159`
	`$siemens-petrol`	`#009999`
	`$siemens-focus`	`#199FFF`

Blue¶

Sample	Color Variable	Color Code
	`$siemens-blue-100`	`#D2E2F7`
	`$siemens-blue-300`	`#81ADEB`
	`$siemens-blue-500`	`#206ED9`
	`$siemens-blue-700`	`#1E5299`
	`$siemens-blue-900`	`#193966`

Green¶

Sample	Color Variable	Color Code
	`$siemens-green-100`	`#C1F2D6`
	`$siemens-green-300`	`#72E6A3`
	`$siemens-green-500`	`#28BF66`
	`$siemens-green-700`	`#1C703F`
	`$siemens-green-900`	`#12331F`

Yellow¶

Sample	Color Variable	Color Code
	`$siemens-yellow-100`	`#FFF2BA`
	`$siemens-yellow-300`	`#FFD732`
	`$siemens-yellow-500`	`#EDBF00`
	`$siemens-yellow-700`	`#876D00`
	`$siemens-yellow-900`	`#4D3901`

Orange¶

Sample	Color Variable	Color Code
	`$siemens-orange-100`	`#FEE1CC`
	`$siemens-orange-300`	`#FFBA4A`
	`$siemens-orange-500`	`#FF9000`
	`$siemens-orange-700`	`#C75300`
	`$siemens-orange-900`	`#8F3700`

Red¶

Sample	Color Variable	Color Code
	`$siemens-red-100`	`#FCCCD7`
	`$siemens-red-300`	`#FE8389`
	`$siemens-red-500`	`#D72339`
	`$siemens-red-700`	`#A60823`
	`$siemens-red-900`	`#650011`

Gradients¶

Besides the colors, a small set of gradients is also defined, following the semantic color scheme. Those gradients are only used for special use cases and hence should not be used in other places.

Sample	Color Variable	Color Code
	`$siemens-gradient-bold-dynamic`	`linear-gradient(114.59deg, $siemens-bold-green 15.81%, $siemens-interactive-coral 84.42%)`
	`$siemens-gradient-bold-dynamic-90`	`linear-gradient(180deg, $siemens-bold-green 15.81%, $siemens-interactive-coral 84.42%)`
	`$siemens-gradient-deep-blue-petrol`	`linear-gradient(180deg, $siemens-deep-blue, $siemens-petrol)`
	`$siemens-gradient-deep-blue-green`	`linear-gradient(180deg, $siemens-deep-blue, $siemens-green-700)`
	`$siemens-gradient-deep-blue-blue`	`linear-gradient(180deg, $siemens-deep-blue, $siemens-blue-500)`

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