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 rather than recoloring the mark to match a swatch.

Identity colors

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

Persian Red

HEX#D53222

RGBrgb(213, 50, 34)

RGBArgba(213, 50, 34, 1)

Retro Yellow

HEX#FFE168

RGBrgb(255, 225, 104)

RGBArgba(255, 225, 104, 1)

Light Cyan

HEX#BCFCFC

RGBrgb(188, 252, 252)

RGBArgba(188, 252, 252, 1)

Internet Blue

HEX#0231C5

RGBrgb(2, 49, 197)

RGBArgba(2, 49, 197, 1)

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.

Background

HEX#121212

RGBrgb(18, 18, 18)

RGBArgba(18, 18, 18, 1)

Background alt

HEX#202020

RGBrgb(32, 32, 32)

RGBArgba(32, 32, 32, 1)

Gradient backgrounds

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

Dark gradient

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

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

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

See Typography for text styles and Backgrounds for downloadable artwork.

Colors

Identity colors

Background colors

Gradient backgrounds

Related