# Colors

Chain identity colors and two neutral backgrounds, with copyable color values.

Chain's four identity colors appear in the stripe mark. Use the [supplied artwork](/brand/logo-usage/) rather than recoloring the mark to match a swatch.

## Identity colors

Copy HEX, RGB or RGBA in the format your design tool needs.

<!-- brand-ui:colors -->

| Color | HEX | RGB | RGBA |
| --- | --- | --- | --- |
| Persian Red | `#D53222` | `rgb(213, 50, 34)` | `rgba(213, 50, 34, 1)` |
| Retro Yellow | `#FFE168` | `rgb(255, 225, 104)` | `rgba(255, 225, 104, 1)` |
| Light Cyan | `#BCFCFC` | `rgb(188, 252, 252)` | `rgba(188, 252, 252, 1)` |
| Internet Blue | `#0231C5` | `rgb(2, 49, 197)` | `rgba(2, 49, 197, 1)` |

<!-- /brand-ui -->

Check text contrast against the finished background, especially with yellow and cyan. Use the supplied logo files to preserve the original artwork colors.

## Background colors

Use Background for a dark canvas and Background alt for a slightly lighter panel or section. Keep text and logos easy to read against either.

<!-- brand-ui:tokens -->

| Color | HEX | RGB | RGBA |
| --- | --- | --- | --- |
| Background | `#121212` | `rgb(18, 18, 18)` | `rgba(18, 18, 18, 1)` |
| Background alt | `#202020` | `rgb(32, 32, 32)` | `rgba(32, 32, 32, 1)` |

<!-- /brand-ui -->

### Gradient backgrounds

Need a subtle fade? Choose one of these two dark gradients, then keep your logo and text readable on top.

<!-- brand-ui:gradients -->

**Dark gradient**

A subtle top-to-bottom fade for a logo or headline.

```css
.chain-background {
  background: linear-gradient(
    to bottom,
    oklch(0.245 0 0),
    oklch(0.195 0 0)
  );
}
```

**Soft gradient**

A dark surface that lightens gently toward the bottom.

```css
.chain-background {
  background: linear-gradient(
    to bottom,
    oklch(0.1864 0 0),
    oklch(0.2336 0 0)
  );
}
```

<!-- /brand-ui -->

See [Typography](/brand/typography/) for text styles and [Backgrounds](/brand/backgrounds/) for downloadable artwork.


## Related

- [Brand guide](/brand/)
- [Logo usage](/brand/logo-usage/)
- [Typography](/brand/typography/)