# Off brand colors.

In a few cases, SBB red cannot be used as the primary color. For example, the color red may only be used in safety-related applications to communicate errors. In these cases, the primary color (Red, Red125, Red150) may be replaced by the following colors:

###### Royal-Dark

HEX: #0053EF  

RGB: R:0 G:83 B:239

###### Royal-Light

HEX: #06348B  

RGB: R:6 G:52 B:139

###### Royal125-Dark

HEX: #245ECB  

RGB: R:36 G:94 B:203

###### Royal125-Light

HEX: #032668  

RGB: R:3 G:38 B:104

###### Royal150-Dark

HEX: #3C65B3  

RGB: R:60 G:101 B:179

###### Royal150-Light

HEX: #021C4E  

RGB: R:2 G:28 B:78

###### Royal85-Dark

HEX: #4077DF  

RGB: R:64 G:119 B:223

###### Royal85-Light

HEX: #4077DF  

RGB: R:64 G:119 B:223

Please note that this color set may only be used in exceptional cases. It requires clarification with the DSRV UX.

## Conception in Figma

The colors are available in the Figma library, but are not used in the components. However, the colors can be conveniently replaced in Figma using the "Selection Colors" function.

## Implementation in the frontend

In the Angular Library, the colors can be swapped as follows: [To the instruction](https://angular.app.sbb.ch/angular/introduction/typography).

## 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/off-brand-colors/