Linear colors
The Linear color palette has 4 colors: Brand blue #5E6AD2, Accent #7170FF, Mercury White #F4F5F8 and Nordic Gray #222326. Below are HEX, RGB, HSL and OKLCH codes, contrast checks, CSS and Tailwind variables, all from official guidelines checked on 16 October 2026.
Linear color codes
| Color | Role | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Brand blue | Primary | #5E6AD2 | rgb(94, 106, 210) | hsl(234, 56%, 60%) | oklch(56.7% 0.159 275.2) |
| Accent | Accent | #7170FF | rgb(113, 112, 255) | hsl(240, 100%, 72%) | oklch(62.3% 0.207 278.8) |
| Mercury White | Background | #F4F5F8 | rgb(244, 245, 248) | hsl(225, 22%, 96%) | oklch(97% 0.004 271.4) |
| Nordic Gray | Text | #222326 | rgb(34, 35, 38) | hsl(225, 6%, 14%) | oklch(25.6% 0.006 271.2) |
Select a color to open its own page with tints, shades, harmonies and every color format, or open the whole set in the palette generator.
Where the Linear colors come from
These hex values are published by Linear in its own brand guidelines. We fetched the page on 16 October 2026 and copied the values exactly; nothing here is estimated from a logo image.
Mercury White and Nordic Gray are listed with hex values on Linear's brand page. The page describes the primary color as a desaturated blue without a hex, so the brand blue and accent come from Linear's live CSS.
- Source: https://linear.app/brand checked 2026-10-16
- Also: https://static.linear.app/web/_next/static/css/layout.TfwOB7lY.css checked 2026-10-16
Linear color contrast
White text on Linear brand blue has a contrast ratio of 4.69:1 and passes WCAG AA for body text. Used as a text color, Brand blue reaches 4.69:1 on white and 4.46:1 on black. Ratios are WCAG 2 (truncated, never rounded up); APCA Lc is shown as a second opinion.
| Pair | WCAG 2 ratio | WCAG 2 result | APCA | APCA guidance |
|---|---|---|---|---|
| White on Brand blue | 4.69:1 | AA | Lc -77.8 | Fine for body text |
| Black on Brand blue | 4.46:1 | AA large text | Lc 31.7 | Non-text elements, placeholder text |
| White on Accent | 3.84:1 | AA large text | Lc -71.0 | Content text, not long reading |
| Black on Accent | 5.46:1 | AA | Lc 38.5 | Non-text elements, placeholder text |
| White on Mercury White | 1.09:1 | Fails | Lc 0.0 | Not readable |
| Black on Mercury White | 19.26:1 | AAA | Lc 100.1 | Preferred for body text |
| White on Nordic Gray | 15.71:1 | AAA | Lc -105.3 | Preferred for body text |
| Black on Nordic Gray | 1.33:1 | Fails | Lc 0.0 | Not readable |
| Pair | WCAG 2 ratio | WCAG 2 result | APCA | APCA guidance |
|---|---|---|---|---|
| Nordic Gray on Mercury White | 14.41:1 | AAA | Lc 96.7 | Preferred for body text |
| Brand blue on Mercury White | 4.31:1 | AA large text | Lc 66.4 | Content text, not long reading |
| Nordic Gray on Accent | 4.08:1 | AA large text | Lc 35.2 | Non-text elements, placeholder text |
| Accent on Mercury White | 3.52:1 | AA large text | Lc 59.6 | Large or bold text, headings |
Linear colors in CSS and Tailwind
Copy the Linear palette as CSS custom properties or as a Tailwind CSS v4 theme. The last snippet is an 11-step Tailwind scale (50 to 950) generated in OKLCH from Brand blue, for hover states, borders and tinted backgrounds.
:root {
--linear-brand-blue: #5E6AD2;
--linear-accent: #7170FF;
--linear-mercury-white: #F4F5F8;
--linear-nordic-gray: #222326;
}@import "tailwindcss";
@theme {
--color-linear-brand-blue: #5E6AD2;
--color-linear-accent: #7170FF;
--color-linear-mercury-white: #F4F5F8;
--color-linear-nordic-gray: #222326;
}@theme {
--color-linear-50: #F3F5FC;
--color-linear-100: #E6E9F8;
--color-linear-200: #D1D8F4;
--color-linear-300: #B3BEEF;
--color-linear-400: #8C9AE7;
--color-linear-500: #717FE0;
--color-linear-600: #5E6AD2;
--color-linear-700: #4B55B2;
--color-linear-800: #3D4690;
--color-linear-900: #343B73;
--color-linear-950: #1E2343;
}Named colors closest to the Linear palette
The nearest named color to each brand color, measured as perceptual distance (ΔE OK) in OKLab. Under 0.02 is hard to tell apart; above 0.05 the difference is easy to see.
| Brand color | HEX | Nearest named color | Named HEX | ΔE OK |
|---|---|---|---|---|
| Brand blue | #5E6AD2 | Dark Periwinkle | #665FD1 | 0.028 |
| Accent | #7170FF | Cornflower | #6A79F7 | 0.026 |
| Mercury White | #F4F5F8 | White Smoke | #F5F5F5 | 0.004 |
| Nordic Gray | #222326 | Jet | #212529 | 0.007 |
Palettes like Linear
Curated palettes that include a color close to Linear brand blue #5E6AD2.
How to use a Linear-style palette
- Lead with Brand blue #5E6AD2 for buttons, links and key highlights, with white text on it.
- Give most of the layout to Mercury White #F4F5F8 and Nordic Gray #222326, about 60% of the screen, so Brand blue stands out.
- Keep Accent for small accents (around 10%): status colors, illustrations or charts.
- As text on a white page, Brand blue reaches 4.69:1: it passes WCAG AA for body text.
To see how linear.app uses these colors today, including backgrounds, text and dark mode, run it through the website color extractor. To turn Brand blue into a full light and dark color system with accessible roles, open it in the Color System Studio.
More brand colors
- Google colors#4285F4 #EA4335 #FBBC05 #34A853
- Apple colors#0071E3 #0066CC #1D1D1F #F5F5F7
- T-Mobile colors#E20074 #A7005A #770141 #000000
- Microsoft colors#F25022 #7FBA00 #00A4EF #FFB900
- Figma colors#FF3737 #FF7237 #874FFF #00B6FF
- Shopify colors#95BF47 #5E8E3E #008060 #18181B
- Trello colors#0052CC #2684FF #253858
- Duolingo colors#58CC02 #1CB0F6 #FF4B4B #FFC800
- Dropbox colors#0061FE #1E1919 #F7F5F2 #14C8EB
- GitHub colors#0FBF3E #101411 #F2F5F3 #909692
- Slack colors#4A154B #E01E5A #36C5F0 #2EB67D
- Notion colors#000000 #0075DE #191918 #FFB110
Trademarks
Frequently asked questions
What is the Linear hex color?
The main Linear color is Brand blue #5E6AD2, which is rgb(94, 106, 210) in RGB. It comes from Linear's own brand guidelines, checked on 16 October 2026.
What colors does Linear use?
Linear uses 4 core colors: Brand blue #5E6AD2, Accent #7170FF, Mercury White #F4F5F8 and Nordic Gray #222326.
What is Linear brand blue in RGB, HSL and OKLCH?
Linear brand blue #5E6AD2 is rgb(94, 106, 210), hsl(234, 56%, 60%) and oklch(56.7% 0.159 275.2). The closest named color is Dark Periwinkle #665FD1.
Should text on Linear brand blue be white or black?
White text reads better on Linear brand blue: it has a contrast ratio of 4.69:1, which passes WCAG AA for body text.
Where do these Linear colors come from?
The hex values were read from Linear's official brand guidelines at https://linear.app/brand on 16 October 2026. Contrast, RGB, HSL and OKLCH values on this page are calculated from those hex codes.
Can I use the Linear colors in my own design?
Colors on their own are not owned, but Linear's name, logo and the way it combines its colors are trademarks. Use these values to match Linear when you refer to it, follow its official guidelines, and do not imply a link to Linear in your own brand.
Use the Linear colors
Check linear.app live, build a color system from Brand blue, or remix the palette.