# Color.

Lyne provides colors on two levels: as base colors and as semantic CSS variables. Use the semantic variables for components and layouts. They adapt automatically to light and dark mode and to the theme variant.

## Two levels.

- **Base colors** such as `--sbb-color-milk` or `--sbb-color-red` are the values of the SBB color palette. When to use which color is described on the pages [Base colors](https://digital.sbb.ch/en/foundation/colors/base-colors/), [Off brand colors](https://digital.sbb.ch/en/foundation/colors/off-brand-colors/) and [Additional colors](https://digital.sbb.ch/en/foundation/colors/additional-colors/).
- **Semantic variables** such as `--sbb-background-color-1` or `--sbb-color-error` describe a purpose. They point to a base color that changes with the mode and theme.

## Context colors.

Context colors stand for the primary color, the brand and states such as error, warning or success.

| CSS variable | Light | Dark | Usage |
| --- | --- | --- | --- |
| `--sbb-color-primary` | `red` | `red` | Primary color, red in the standard theme. |
| `--sbb-color-primary85` | `red85` | `red85` | Lighter variation of the primary color. |
| `--sbb-color-primary125` | `red125` | `red125` | Darker variation of the primary color. |
| `--sbb-color-primary150` | `red150` | `red150` | Even darker variation of the primary color. |
| `--sbb-color-error` | `red125` | `red85` | Error states. Lighter in dark mode to keep enough contrast. |
| `--sbb-color-warning` | `peach` | `peach` | Warnings. |
| `--sbb-color-success` | `green` | `green` | Success messages. |
| `--sbb-color-brand` | `red` | `red` | Brand color, for example for the logo. |

### Theme variants.

The theme variants swap the base colors behind the context colors. Off-brand is meant for applications that do not appear under the SBB brand. Safety is meant for safety-relevant applications. If you use `--sbb-color-primary` instead of `--sbb-color-red`, nothing needs to change when you switch themes.

| CSS variable | Standard | Off-brand | Safety |
| --- | --- | --- | --- |
| `--sbb-color-primary` | `red` | `royal` | `royal` |
| `--sbb-color-primary85` | `red85` | `royal85` | `royal85` |
| `--sbb-color-primary125` | `red125` | `royal125` | `royal125` |
| `--sbb-color-primary150` | `red150` | `royal150` | `royal150` |
| `--sbb-color-brand` | `red` | `red` | `metal` |

The variants are included with the theme files `off-brand-theme.css` and `safety-theme.css` (or `lean-off-brand-theme.css` and `lean-safety-theme.css`).

## Background colors.

Backgrounds come in four levels. Level 1 is the base surface, the higher levels stand out more and more from it.

| CSS variable | Light | Dark |
| --- | --- | --- |
| `--sbb-background-color-1` | `white` | `midnight` |
| `--sbb-background-color-2` | `white` | `charcoal` |
| `--sbb-background-color-3` | `milk` | `charcoal` |
| `--sbb-background-color-4` | `cloud` | `iron` |

## Text colors.

Level 1 has the highest contrast. Level 5 is the same in both modes and has no variants.

| CSS variable | Light | Dark |
| --- | --- | --- |
| `--sbb-color-1` | `midnight` | `white` |
| `--sbb-color-2` | `charcoal` | `white` |
| `--sbb-color-3` | `charcoal` | `milk` |
| `--sbb-color-4` | `iron` | `cloud` |
| `--sbb-color-5` | `smoke` | `smoke` |
| `--sbb-color-6` | `anthracite` | `platinum` |

## Border colors.

Borders use the same base colors as the text of the same level.

| CSS variable | Light | Dark |
| --- | --- | --- |
| `--sbb-border-color-1` | `midnight` | `white` |
| `--sbb-border-color-2` | `charcoal` | `white` |
| `--sbb-border-color-3` | `charcoal` | `milk` |
| `--sbb-border-color-4` | `iron` | `cloud` |
| `--sbb-border-color-5` | `smoke` | `smoke` |
| `--sbb-border-color-6` | `anthracite` | `platinum` |

## Variants: negative and inverted.

Background, text and border colors are also available with three suffixes (except level 5). They let you design surfaces that stay dark or light regardless of the mode.

| Suffix | Light | Dark | Effect |
| --- | --- | --- | --- |
| `--sbb-background-color-1` | `white` | `midnight` | Regular color pair. |
| `-negative` | `midnight` | `midnight` | Always the dark color of the pair, for example for negative components. |
| `-inverted` | `midnight` | `white` | Light and dark color swapped. |
| `-negative-inverted` | `white` | `white` | Always the light color of the pair. |

## Shadow colors.

Shadows come in soft and hard colors on two levels, each also with the suffix `-negative`. The easiest way to add a shadow is with the Sass mixins described on the [Shadow](https://digital.sbb.ch/en/design-system/lyne/design-tokens/shadow/) page.

| CSS variable | Light | Dark |
| --- | --- | --- |
| `--sbb-shadow-color-soft-1` |  |  |
| `--sbb-shadow-color-soft-2` |  |  |
| `--sbb-shadow-color-hard-1` |  |  |
| `--sbb-shadow-color-hard-2` |  |  |

## Light and dark mode.

Lyne uses the native CSS property `color-scheme`. By default, components follow the operating system setting. With the CSS classes `sbb-light` or `sbb-dark` you set a fixed mode, for the whole page or for single areas.

Your own colors also need values for both modes. Use the CSS function `light-dark()` and put the light color in front of it as a fallback for older browsers:

```css
.class {
  color: var(--sbb-color-cloud);
  color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
}
```

The semantic variables and the additional colors such as `--sbb-color-sky` switch on their own. The JavaScript tokens only contain the base colors. There you have to handle the mode yourself, so CSS variables are preferred.

## Transparency.

For transparent colors, Lyne recommends the CSS function `color-mix()`:

```css
.class {
  /* Primary color with 40% opacity */
  color: color-mix(in srgb, var(--sbb-color-primary) 40%, transparent);
}
```

## Base colors as tokens.

These tokens from the package `@sbb-esta/lyne-design-tokens` contain the fixed color values. The additional and off-brand colors each have a value for light (`-light`) and dark (`-dark`). The CSS variable without suffix, such as `--sbb-color-sky`, picks the right value automatically.

### Base colors.

| CSS variable | Value |
| --- | --- |
| `--sbb-color-black` | `#000000` |
| `--sbb-color-midnight` | `#151515` |
| `--sbb-color-blue` | `#2d327d` |
| `--sbb-color-charcoal` | `#212121` |
| `--sbb-color-iron` | `#444444` |
| `--sbb-color-anthracite` | `#5a5a5a` |
| `--sbb-color-granite` | `#686868` |
| `--sbb-color-metal` | `#767676` |
| `--sbb-color-smoke` | `#8d8d8d` |
| `--sbb-color-storm` | `#a8a8a8` |
| `--sbb-color-graphite` | `#b7b7b7` |
| `--sbb-color-cement` | `#bdbdbd` |
| `--sbb-color-platinum` | `#cdcdcd` |
| `--sbb-color-aluminium` | `#d2d2d2` |
| `--sbb-color-silver` | `#dcdcdc` |
| `--sbb-color-cloud` | `#e5e5e5` |
| `--sbb-color-milk` | `#f6f6f6` |
| `--sbb-color-red` | `#eb0000` |
| `--sbb-color-red85` | `#ff3838` |
| `--sbb-color-red125` | `#c60018` |
| `--sbb-color-red150` | `#a20013` |
| `--sbb-color-white` | `#ffffff` |

### Off-brand colors.

| CSS variable | Value |
| --- | --- |
| `--sbb-color-royal-light` | `#06348b` |
| `--sbb-color-royal-dark` | `#0053ef` |
| `--sbb-color-royal85-light` | `#4077df` |
| `--sbb-color-royal85-dark` | `#4077df` |
| `--sbb-color-royal125-light` | `#032668` |
| `--sbb-color-royal125-dark` | `#245ecb` |
| `--sbb-color-royal150-light` | `#021c4e` |
| `--sbb-color-royal150-dark` | `#3c65b3` |

### Additional colors.

| CSS variable | Value |
| --- | --- |
| `--sbb-color-sky-light` | `#0074bf` |
| `--sbb-color-sky-dark` | `#128ede` |
| `--sbb-color-night-light` | `#143a85` |
| `--sbb-color-night-dark` | `#6587ca` |
| `--sbb-color-violet-light` | `#6f2282` |
| `--sbb-color-violet-dark` | `#b36cc5` |
| `--sbb-color-pink-light` | `#c7387a` |
| `--sbb-color-pink-dark` | `#e45295` |
| `--sbb-color-autumn-light` | `#cf3b00` |
| `--sbb-color-autumn-dark` | `#f05313` |
| `--sbb-color-orange-light` | `#f27e00` |
| `--sbb-color-orange-dark` | `#fb8e19` |
| `--sbb-color-peach-light` | `#fcbb00` |
| `--sbb-color-peach-dark` | `#ffc727` |
| `--sbb-color-lemon-light` | `#ffde15` |
| `--sbb-color-lemon-dark` | `#ffe547` |
| `--sbb-color-brown-light` | `#a05400` |
| `--sbb-color-brown-dark` | `#cf6f04` |
| `--sbb-color-green-light` | `#008233` |
| `--sbb-color-green-dark` | `#109d47` |
| `--sbb-color-turquoise-light` | `#007e84` |
| `--sbb-color-turquoise-dark` | `#00a59b` |

---

Source: https://digital.sbb.ch/en/design-system/lyne/design-tokens/color/