Linear Color Palette

Select any value to copy it.

• Linear Indigo

  Primary

  #5E6AD2rgb(94, 106, 210)hsl(234, 56%, 60%)

  Brand hue and the primary action color.

  Closest in ArchiveIris Tone Clear
  Closest in Archive: Iris Tone Clear

• Linear Black

  Neutral

  #000000rgb(0, 0, 0)hsl(0, 0%, 0%)

  Closest in ArchiveTrue Gray Ink
  Closest in Archive: True Gray Ink

• Linear Gray 1

  Neutral

  #1C1D24rgb(28, 29, 36)hsl(233, 13%, 13%)

  The signature near-black surface.

  Closest in ArchiveIris Ink Faint
  Closest in Archive: Iris Ink Faint

• Linear White

  Neutral

  #FFFFFFrgb(255, 255, 255)hsl(0, 0%, 100%)

  Closest in ArchiveWarm Gray Veil
  Closest in Archive: Warm Gray Veil

Can it carry text? (WCAG contrast)

Each color as text on white and on black. AA means body text passes. Select a ratio to open the pair in the contrast checker.

• Linear IndigoAaon white4.70:1AALinear Indigo: Open in contrast checkerAaon black4.47:1Large text onlyLinear Indigo: Open in contrast checker
• Linear BlackAaon white21.00:1AALinear Black: Open in contrast checkerAaon black1.00:1Not for textLinear Black: Open in contrast checker
• Linear Gray 1Aaon white16.79:1AALinear Gray 1: Open in contrast checkerAaon black1.25:1Not for textLinear Gray 1: Open in contrast checker
• Linear WhiteAaon white1.00:1Not for textLinear White: Open in contrast checkerAaon black21.00:1AALinear White: Open in contrast checker

About this palette

Linear's identity uses one signature indigo (#5E6AD2) against deep neutral grays, projecting precision and craft. The palette is intentionally narrow; the entire app surface uses ten or fewer named tokens, showing how restraint can read as quality.

Copy as code

Every token name carries the brand, so two brands can share one stylesheet.

:root {
  --linear-indigo: #5e6ad2;
  --linear-black: #000000;
  --linear-gray-1: #1c1d24;
  --linear-white: #ffffff;
}

@theme {
  --color-linear-indigo: #5e6ad2;
  --color-linear-black: #000000;
  --color-linear-gray-1: #1c1d24;
  --color-linear-white: #ffffff;
}

module.exports = {
  theme: {
    extend: {
      colors: {
        "linear-indigo": "#5e6ad2",
        "linear-black": "#000000",
        "linear-gray-1": "#1c1d24",
        "linear-white": "#ffffff",
      },
    },
  },
};

Source: https://linear.app/brand · As of 2026-05-02 · This page is an unofficial reference. Color values are factual sRGB hex codes and not subject to copyright; the Linear name and any associated marks belong to their owner. Request removal via support.

More from SaaS & Productivity