Colors

The UI MarCom color palette is based on the Siemens Healthineers brand design.

The color system includes all brand, neutral and additional colors that are available for user interface elements. The branded look of a user interface is mainly shaped by the primary and neutral colors. For assets like charts, which may require more diversity, there are additional colors to use. Finally, three functional colors are available for status indication.

Backgrounds

Neutral colored backgrounds are used in components and can be set in layout sections to separate these areas from standard content. The predominant background color is white. It can be altered with a light gray to highlight content. Black background creates a large contrast and is only used to present key visuals, clinical image content or in special cases, for example, a call-to-action section.

SH Black(0) white #ffffff

SH Black(07) black-7 #ededed

SH Black(100) black #000000

Be aware of accessibility where text needs an appropriate contrast ratio to its background color. Online publications should meet the [Web Content Accessibility Guidelines (WCAG)](http://www.w3.org/TR/WCAG/) success criteria for AA level.

Primary colors

There are two brand colors that should be used sparingly and discreetly. The more striking Healthy Orange is used for primary actions, active states and eye-catching content. The second brand color petrol adds color to minor elements. Both colors are available in different tints. You should only use the tinted colors if there is a need for them. Both brand colors are supplemented by an accessible version to meet the WCAG standard.

Accessible Orange orange-shade-1 #cf4b00

Healthy Orange orange #ec6602

Healthy Orange(50) orange-tint-2 #f9b591

Healthy Orange(25) orange-tint-3 #fdddcb

Accessible Petrol petrol-shade-1 #02787d

Siemens Petrol petrol #009999

Siemens Petrol(50) petrol-tint-2 #87d2d2

Siemens Petrol(25) petrol-tint-3 #c8e6e6

Neutral colors

The interface is dominated by the neutral colors white and black and the gradations between. The tints and shades should be used wisely to create appropriate contrasts in the user interface. SH Black(90) is applied to the standard text. Attenuated elements like muted text or graduated icons use SH Black(60) on light and SH Black(40) on dark background.

SH Black(0) white #ffffff

SH Black(05) black-5 #f2f2f2

SH Black(07) black-7 #ededed

SH Black(10) black-10 #e6e6e6

SH Black(20) black-20 #cccccc

SH Black(25) #bfbfbf

SH Black(30) black-30 #b3b3b3

SH Black(40) black-40 #999999

SH Black(50) #808080

SH Black(60) gray #666666

SH Black(70) black-70 #4d4d4d

SH Black(75) black-75 #404040

SH Black(80) black-80 #333333

SH Black(90) black-90 #1a1a1a

SH Black(100) black #000000

Additional colors

Additional colors are only used in exceptional cases when special requirements make it necessary to differentiate from primary colors. Assets like charts may require more color diversity since elements in primary colors can be confused as interaction elements. The colors have two gradations for differentiation.

SH Cyan cyan #3abfed

SH Cyan(50) cyan-tint-2 #9ddff6

SH Cyan(25) cyan-tint-3 #ceeffb

SH Berry berry #7a162d

SH Berry(50) berry-50 #c69b9e

SH Berry(25) berry-25 #e9d1d4

SH Blue blue #2b2483

SH Blue(50) blue-50 #9592c1

SH Blue(25) blue-25 #cac8e0

Functional colors

The functional colors are used for indication to represent states (error, success, confirmation) and provide feedback to the user. If possible, they mainly serve as background color for icons that can be supplemented by a neutral colored information text. They will never be tinted. An accessible version of red and green can be used to meet the WCAG standard.

Accessible Red red-shade-1 #d9001d

SH Red red #e7001d

SH Red(50) red-tint-2 #f3808e

SH Red(25) red-tint-3 #f9bfc7

Accessible Green green-shade-1 #197c3a

SH Green green #009a38

SH Green(50) green-tint-2 #80cd9c

SH Green(25) green-tint-3 #bfe6cd

SH Yellow yellow #ffd200

SH Yellow(50) yellow-tint-2 #ffe980

SH Yellow(25) yellow-tint-3 #fff3bf

Dos and don’ts

Only use white and light gray on dark backgrounds.
Do use colors according to their role and not to achieve the perfect color ratio.
Only use the tinted colors if there is a need for them.
Do not use accent colors excessively. Use them discreetly and consciously.