Linear color palette
TechLinear's brand identity combines a dark interface with precise violet-blue accents, reflecting its focus on speed, clarity, and engineering elegance in project management.
linear.appLinear colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Linear PurplePrimary94, 106, 210
- Linear DarkSecondary23, 23, 35
- Linear VioletAccent129, 140, 248
Surfaces
Page, cards and dividers.- Linear BackgroundBackground15, 15, 26
- Linear SurfaceSurface27, 27, 46
- Linear BorderBorder46, 46, 74
Text
Three tiers of copy.- Linear WhiteText241, 241, 244
- Linear GraySecondary text155, 155, 173
- Linear MutedMuted text107, 107, 128
Semantic
Feedback and state colors.- Linear GreenSuccess74, 222, 128
- Linear YellowWarning251, 191, 36
- Linear RedError248, 113, 113
- Linear InfoInfo94, 106, 210
Use Linear's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
linear-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #5E6AD2;
--error: #F87171;
--accent: #818CF8;
--border: #2E2E4A;
--primary: #5E6AD2;
--success: #4ADE80;
--surface: #1B1B2E;
--warning: #FBBF24;
--secondary: #171723;
--text-muted: #6B6B80;
--background: #0F0F1A;
--text-primary: #F1F1F4;
--text-secondary: #9B9BAD;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
16.9:1
Pass
Text on surface
Needs 4.5:1 for body text
15.0:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.0:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.2:1
Pass
Muted text on background
Needs 3:1 for large text
3.7:1
Pass
Muted text on surface
Needs 3:1 for large text
3.3:1
Pass
Linear background, border and text colors
Linear runs a dark interface, so these grays carry the layout: background, sidebar surfaces, dividers and three tiers of text. Click a value to copy it.
- Linear BackgroundBackground
- HEX
- RGB
- HSL
- Linear SurfaceSurface
- HEX
- RGB
- HSL
- Linear BorderBorder
- HEX
- RGB
- HSL
- Linear WhiteText
- HEX
- RGB
- HSL
- Linear GraySecondary text
- HEX
- RGB
- HSL
- Linear MutedMuted text
- HEX
- RGB
- HSL
About Linear's colors
Linear's deep-dark palette with precise purple accents communicates engineering-grade quality. The near-black backgrounds with blue undertones create a focused, distraction-free environment for technical teams.
Purple-blue (#5E6AD2) provides the sole accent against deep indigo-black surfaces
Blue-tinted dark backgrounds (#0F0F1A, #1B1B2E) feel warmer than pure black while maintaining focus
Pastel semantic colors (green, yellow, red) are lightened to work against dark backgrounds
Psychology
The dark palette signals precision, focus, and developer sensibility. Purple accents add a creative edge without undermining the professional tone. The overall effect is an IDE-like environment that developers feel at home in.
Evolution
Linear has consistently maintained its dark-first, purple-accented identity since launch. The specific shades have been refined for better accessibility and more nuanced surface layering.
Where Linear uses each color
- Primary
Linear Purple (#5E6AD2) marks active states, selected items, and primary CTA buttons throughout the interface.
- Secondary
The dark navy-indigo (#171723) serves as the sidebar and elevated panel background.
- Accent
Lighter violet (#818CF8) is used for hover states and secondary interactive elements.
- Backgrounds
Deep backgrounds with blue undertones (#0F0F1A, #1B1B2E) create layered depth without competing with content.
- Text
High-contrast white text (#F1F1F4) with two muted gray tones creates clear hierarchy on dark surfaces.
- Semantic
Pastel semantic colors (green, yellow, red) are calibrated for dark background legibility rather than matching typical light-mode values.
Linear color questions
Hex codes, RGB values, neutrals and how to use the palette.
Linear's primary brand color is a purple-blue (#5E6AD2), set against a distinctive dark interface with deep indigo undertones (#0F0F1A). The combination creates a premium, developer-focused aesthetic.
Linear's dark interface reflects its engineering-first audience who often prefer dark themes. The deep indigo-black background reduces eye strain during long work sessions and helps status colors (priorities, labels) stand out more vividly.
Linear uses a custom design system built around Inter for UI text, with precise spacing and a 4px grid. The visual language emphasizes speed through subtle animations, keyboard-first interactions, and minimal chrome.
Linear's primary color is Linear Purple, hex #5E6AD2 (RGB 94, 106, 210). It is the color used for the logo and the most prominent brand moments.
The secondary color is Linear Dark, #171723, and the accent is Linear Violet, #818CF8. Together with the primary they make up the three brand colors at the top of this page.
Linear uses #0F0F1A for backgrounds, #1B1B2E for surfaces and #2E2E4A for borders. Text runs #F1F1F4, #9B9BAD and #6B6B80 from strongest to most muted.
6 of 6 text and background pairings meet WCAG 2.1 AA contrast. The contrast section above shows every pairing with its exact ratio.
Use the export block on this page. It gives you CSS custom properties, a Tailwind config, W3C design tokens or a shadcn/ui theme built from these exact hex values, with copy and download buttons.
Yes. Export the Claude Code skill, Cursor rules or Codex prompt from the same block. The agent then applies Linear's colors consistently when it generates UI.
Make something in the spirit of Linear
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.