# Base colors

Here, we focus on intentional reduction: colors 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.

## Colors

### Red

###### Red

HEX: #EB0000  

RGB: R:235 G:0 B:0

###### Red125

HEX: #C60018  

RGB: R:198 G:0 B:24

###### Red150

HEX: #A20013  

RGB: R:162 G:0 B:19

### White, Grey, Black

###### White

HEX: #FFFFFF  

RGB: R:255 G:255 B:255

###### Milk

HEX: #F6F6F6  

RGB: R:246 G:246 B:246

###### Cloud

HEX: #E5E5E5  

RGB: R:229 G:229 B:229

###### Silver

HEX: #DCDCDC  

RGB: R:220 G:220 B:220

###### Aluminum

HEX: #D2D2D2  

RGB: R:210 G:210 B:210

###### Platinum

HEX: #CDCDCD  

RGB: R:205 G:205 B:205

###### Cement

HEX: #BDBDBD  

RGB: R:189 G:189 B:189

###### Graphite

HEX: #B7B7B7  

RGB: R:183 G:183 B:183

###### Storm

HEX: #A8A8A8  

RGB: R:168 G:168 B:168

###### Smoke

HEX: #8D8D8D  

RGB: R:141 G:141 B:141

###### Metal

HEX: #767676  

RGB: R:118 G:118 B:118

###### Granite

HEX: #686868  

RGB: R:104 G:104 B:104

###### Anthracite

HEX: #5A5A5A  

RGB: R:90 G:90 B:90

###### Iron

HEX: #444444  

RGB: R:68 G:68 B:68

###### Charcoal

HEX: #212121  

RGB: R:33 G:33 B:33

###### Midnight

HEX: #151515  

RGB: R:21 G:21 B:21

###### Black

HEX: #000000  

RGB: R:0 G:0 B:0

### Blue

###### Blue

HEX: #2d327d  

RGB: R:45 G:50 B:125

## Checking contrasts

## 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.

60%

25%

10%

5%

## Design tokens

In code, use the semantic CSS variables of Lyne (e.g. `--sbb-background-color-1`, `--sbb-color-1`, `--sbb-color-primary`); they adapt to light/dark mode and to the off-brand and safety themes. Base colors are available as `--sbb-color-*` (additional and off-brand colors also as `-light` / `-dark` values for light and dark mode). Mapping and examples: https://digital.sbb.ch/en/design-system/lyne/design-tokens/color/index.md

---

Source: https://digital.sbb.ch/en/foundation/colors/base-colors/