Linear Color Psychology & Meaning
Linear's subtle purple signals focused productivity. It's not excited or urgent — it's the color of deep work and quiet progress. The palette matches the tool's philosophy.
#FFFFFF
#5E6AD2
#1A1A2E
#6B7280
Background
Primary Accent
Secondary
Body Text
Linear
coolnightminimal autumnwinter appbranding
AA
WCAG Grade
4.8:1
Contrast Ratio
2,700
Saves
6,900
AI Copies
Use #FFFFFF as the background. Use #5E6AD2 as the primary accent. Use #1A1A2E as secondary. Use #6B7280 as body text/supporting color. Palette mood: Linear — cool, night, minimal.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Linear color scheme. Use these values for web design (HEX/RGB), print projects (CMYK), or specialized design software (HSL).
| Swatch | Design Role | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|
| Background Luminance: 100.0% | 255, 255, 255 | 0%, 0%, 0%, 0% | 0°, 0%, 100% | ||
| Primary Accent Luminance: 17.3% | 94, 106, 210 | 55%, 50%, 0%, 18% | 234°, 56%, 60% | ||
| Secondary Luminance: 1.2% | 26, 26, 46 | 43%, 43%, 0%, 82% | 240°, 28%, 14% | ||
| Body Text Luminance: 16.7% | 107, 114, 128 | 16%, 11%, 0%, 50% | 220°, 9%, 46% |
Color Harmony: Triadic Scheme
The Linear palette is built using a triadic relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A triadic palette is often preferred by professional designers because it balances visual interest with cohesion.
History & Design Context
Linear launched 2019 and became beloved by product teams. The measured purple palette reflected the founders' belief that good software should be calm, not stimulating.
Best Design Use Cases
Purple for active states and brand identity. Very dark navy for the primary UI surface. White for content.
Industries This Palette Suits
Project management, issue tracking, product development.
How to Implement the Linear Color Scheme
To use this Linear color palette in your web project, you can copy the following CSS variables or Tailwind CSS configuration. These roles ensure your UI maintains accessibility and visual hierarchy.
Option 1: CSS Variables
:root {
/* {name} Palette - ihatecolors.com */{'
'} --color-bg: {colors[0]};{'
'} --color-primary: {colors[1]};{'
'} --color-secondary: {colors[2]};{'
'} --color-text: {colors[3]};{'
'} {'}'}Web Design Tip
Use #FFFFFF for the main background and #5E6AD2 for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #6B7280 and #FFFFFF is 4.83:1 (AA). Ensure your body text remains legible.