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) gray-tint-5 #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) gray-tint-6 #f2f2f2
SH Black(07) gray-tint-5 #ededed
SH Black(10) gray-tint-4 #e6e6e6
SH Black(20) gray-tint-3 #cccccc
SH Black(25) #bfbfbf
SH Black(30) gray-tint-2 #b3b3b3
SH Black(40) gray-tint-1 #999999
SH Black(50) #808080
SH Black(60) gray #666666
SH Black(70) gray-shade-1 #4d4d4d
SH Black(75) gray-shade-2 #404040
SH Black(80) gray-shade-3 #333333
SH Black(90) gray-shade-4 #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-tint-2 #c69b9e
SH Berry(25) berry-tint-3 #e9d1d4
SH Blue blue #2b2483
SH Blue(50) blue-tint-2 #9592c1
SH Blue(25) blue-tint-3 #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.