Colours

Here, we focus on intentional reduction: colours are only used in a subtle way. Red is used for the important navigation elements that offer the user a quick and understandable path through the page. Flows are not allowed.

• Name: Red

  HEX: #EB0000

  RGB: R: 235 G: 0 B: 0

• Name: Red125

  HEX: #C60018

  RGB: R: 198 G: 0 B: 24

• Name: Red150

  HEX: #A20013

  RGB: R: 162 G: 0 B: 19

• Name: White

  HEX: #FFFFFF

  RGB: R: 255 G: 255 B: 255

• Name: Milk

  HEX: #F6F6F6

  RGB: R: 246 G: 246 B: 246

• Name: Cloud

  HEX: #E5E5E5

  RGB: R: 229 G: 229 B: 229

• Name: Silver

  HEX: #DCDCDC

  RGB: R: 220 G: 220 B: 220

• Name: Aluminum

  HEX: #D2D2D2

  RGB: R: 210 G: 210 B: 210

• Name: Platinum

  HEX: #CDCDCD

  RGB: R: 205 G: 205 B: 205

• Name: Cement

  HEX: #BDBDBD

  RGB: R: 189 G: 189 B: 189

• Name: Graphite

  HEX: #B7B7B7

  RGB: R: 183 G: 183 B: 183

• Name: Storm

  HEX: #A8A8A8

  RGB: R: 168 G: 168 B: 168

• Name: Smoke

  HEX: #8D8D8D

  RGB: R: 141 G: 141 B: 141

• Name: Metal

  HEX: #767676

  RGB: R: 118 G: 118 B: 118

• Name: Granite

  HEX: #686868

  RGB: R: 104 G: 104 B: 104

• Name: Anthracite

  HEX: #5A5A5A

  RGB: R: 90 G: 90 B: 90

• Name: Iron

  HEX: #444444

  RGB: R: 68 G: 68 B: 68

• Name: Charcoal

  HEX: #212121

  RGB: R: 33 G: 33 B: 33

• Name: Midnight

  HEX: #151515

  RGB: R: 21 G: 21 B: 21

• Name: Black

  HEX: #000000

  RGB: R: 0 G: 0 B: 0

• Name: Blue

  HEX: #2d327d

  RGB: R: 45 G: 50 B: 125

Colour ratios

SBB websites are designed with the following colour ratios. The quantities are to be take as guidelines – not as exact regulations – but significant deviations are to be avoided. If this is unavoidable, a check by SBB Brand Management is required.

Extended functional colours

Additional colours may be used with the agreement of Communications. Each use of these colours must be presented to Communications and expressly approved. Additional colours may be used only for very specific areas. Anywhere that the CD colour palette is no longer sufficient for UX reasons. For example for info boxes or similar.

• Name: Sky

  HEX: #0079C7

  RGB: R: 0 G: 121 B: 199

• Name: Night

  HEX: #143A85

  RGB: R: 20 G: 58 B: 133

• Name: Violet

  HEX: #6F2282

  RGB: R: 111 G: 34 B: 130

• Name: Autumn

  HEX: #E84E10

  RGB: R: 232 G: 78 B: 16

• Name: Orange

  HEX: #F27E00

  RGB: R: 242 G: 126 B: 0

• Name: Peach

  HEX: #FCBB00

  RGB: R: 252 G: 187 B: 0

• Name: Lemon

  HEX: #FFDE15

  RGB: R: 255 G: 222 B: 21

• Name: Brown

  HEX: #B76000

  RGB: R: 183 G: 96 B: 0

• Name: Green

  HEX: #00973B

  RGB: R: 0 G: 151 B: 59

• Name: Turquoise

  HEX: #00A59B

  RGB: R: 0 G: 165 B: 155

Accessible display

The combination of colours must adhere to a contrast ratio of 4.5:1. This meets the stipulations of WCAG 2.2 Level AA. The contrast values can be checked with the Colour Contrast Analyser.