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.

The following are the design language base color references that constitute our main color foundation.

They define the primary hues and neutral values from which all semantic and component-level colors are derived, and are applied consistently through design tokens.

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.

Brand¶

si.ref.color.main.brand.interactive-coral

#00CCCC

si.ref.color.main.brand.light-petrol

#00C1B6

si.ref.color.main.brand.petrol

#009999

si.ref.color.main.brand.teal-90

#196269

si.ref.color.main.brand.teal

#005159

si.ref.color.main.brand.focus

#199FFF

si.ref.color.main.brand.white

#FFFFFF

si.ref.color.main.brand.black

#000000

Deep-blue¶

si.ref.color.main.deep-blue.50

#EBEBEE

si.ref.color.main.deep-blue.100

#E5E5E9

si.ref.color.main.deep-blue.200

#CCCCD4

si.ref.color.main.deep-blue.300

#B3B3BE

si.ref.color.main.deep-blue.400

#9999A9

si.ref.color.main.deep-blue.500

#7D8099

si.ref.color.main.deep-blue.600

#66667E

si.ref.color.main.deep-blue.650

#4C4C68

si.ref.color.main.deep-blue.700

#40405E

si.ref.color.main.deep-blue.750

#333353

si.ref.color.main.deep-blue.775

#2D2D45

si.ref.color.main.deep-blue.800

#23233C

si.ref.color.main.deep-blue.850

#161632

si.ref.color.main.deep-blue.875

#12122E

si.ref.color.main.deep-blue.900

#000028

Sand¶

si.ref.color.main.sand.100

#FAFAFA

si.ref.color.main.sand.200

#F5F5F5

si.ref.color.main.sand.300

#F0F0EF

si.ref.color.main.sand.400

#EDEDED

si.ref.color.main.sand.500

#E0E0DE

si.ref.color.main.sand.600

#CFCFCB

si.ref.color.main.sand.700

#B0B0AB

si.ref.color.main.sand.800

#8A8A85

si.ref.color.main.sand.900

#5E5E5A

Interactive-blue¶

si.ref.color.main.interactive-blue.100

#E0F1F4

si.ref.color.main.interactive-blue.200

#C2E2E9

si.ref.color.main.interactive-blue.300

#A9D5DF

si.ref.color.main.interactive-blue.400

#8EC7D4

si.ref.color.main.interactive-blue.500

#73BAC9

si.ref.color.main.interactive-blue.600

#3D95A9

si.ref.color.main.interactive-blue.700

#006B80

si.ref.color.main.interactive-blue.800

#004F60

si.ref.color.main.interactive-blue.900

#00333E

Bold-green¶

si.ref.color.main.bold-green.100

#D1FFF2

si.ref.color.main.bold-green.200

#C2FFEE

si.ref.color.main.bold-green.300

#66FFD5

si.ref.color.main.bold-green.400

#00FFB9

si.ref.color.main.bold-green.500

#00E5AA

si.ref.color.main.bold-green.600

#00997F

si.ref.color.main.bold-green.700

#007369

si.ref.color.main.bold-green.800

#16565C

si.ref.color.main.bold-green.900

#001F39

Green¶

si.ref.color.main.green.100

#C1F2D6

si.ref.color.main.green.200

#99ECBD

si.ref.color.main.green.300

#72E6A3

si.ref.color.main.green.400

#4DD384

si.ref.color.main.green.500

#28BF66

si.ref.color.main.green.600

#229753

si.ref.color.main.green.700

#1C703F

si.ref.color.main.green.800

#17522F

si.ref.color.main.green.900

#12331F

Blue¶

si.ref.color.main.blue.100

#D2E2F7

si.ref.color.main.blue.200

#A9C7F1

si.ref.color.main.blue.300

#81ADEB

si.ref.color.main.blue.400

#518DE2

si.ref.color.main.blue.500

#206ED9

si.ref.color.main.blue.600

#1F60B9

si.ref.color.main.blue.700

#1E5299

si.ref.color.main.blue.800

#1C4680

si.ref.color.main.blue.900

#193966

Yellow¶

si.ref.color.main.yellow.100

#FFF2BA

si.ref.color.main.yellow.200

#FFE576

si.ref.color.main.yellow.300

#FFD732

si.ref.color.main.yellow.400

#FFD00F

si.ref.color.main.yellow.500

#EDBF00

si.ref.color.main.yellow.600

#BA9600

si.ref.color.main.yellow.700

#876D00

si.ref.color.main.yellow.800

#4D3901

si.ref.color.main.yellow.900

#322501

Orange¶

si.ref.color.main.orange.100

#FEE1CC

si.ref.color.main.orange.200

#FFCD88

si.ref.color.main.orange.300

#FFA525

si.ref.color.main.orange.400

#FF9000

si.ref.color.main.orange.500

#E37200

si.ref.color.main.orange.600

#C75300

si.ref.color.main.orange.700

#A84100

si.ref.color.main.orange.800

#8F3700

si.ref.color.main.orange.900

#421A00

Red¶

si.ref.color.main.red.100

#FCCCD7

si.ref.color.main.red.200

#FDA7B0

si.ref.color.main.red.300

#FF8E9C

si.ref.color.main.red.400

#EB5361

si.ref.color.main.red.500

#D72339

si.ref.color.main.red.600

#BF162E

si.ref.color.main.red.700

#A60823

si.ref.color.main.red.800

#650011

si.ref.color.main.red.900

#42000C

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