Tech Startup Color Palette

Indigo and sky on a near-white surface — the modern SaaS duo that reads optimistic without shouting. Anchors: #4F46E5, #0EA5E9, #F8FAFC.

startupsaastech
#4F46E5
#0EA5E9
#F8FAFC
#BDA9F5
#286E9B
#4f46e5 #0ea5e9 #f8fafc #bda9f5 #286e9b
#4F46E5 #0EA5E9 #F8FAFC #BDA9F5 #286E9B

Semantic roles

Assigned deterministically: lightest = background, darkest = text, most saturated = primary.

background#F8FAFC
surface#BDA9F5
text#4F46E5
text-muted#286E9B
primary#0EA5E9
secondary#BDA9F5
accent#286E9B

CSS variables 

:root {
  --background: #f8fafc;
  --surface: #bda9f5;
  --text: #4f46e5;
  --text-muted: #286e9b;
  --primary: #0ea5e9;
  --secondary: #bda9f5;
  --accent: #286e9b;
}
Preview in UIs →

Accessibility matrix

Text color (rows) on background (columns). Green = WCAG AA pass for normal text (≥4.5:1).

Text \ BG#4F46E5#0EA5E9#F8FAFC#BDA9F5#286E9B
#4F46E5
1.0
2.3
6.0
3.0
1.1
#0EA5E9
2.3
1.0
2.6
1.3
2.0
#F8FAFC
6.0
2.6
1.0
2.0
5.3
#BDA9F5
3.0
1.3
2.0
1.0
2.7
#286E9B
1.1
2.0
5.3
2.7
1.0

Under deuteranopia

Machado et al. (2009) simulation, severity 1.0 — approximation, not a medical tool.

Colors in this palette

#4F46E5
rgb(79, 70, 229)
#0EA5E9
rgb(14, 165, 233)
#F8FAFC
rgb(248, 250, 252)
#BDA9F5
rgb(189, 169, 245)
#286E9B
rgb(40, 110, 155)

Similar palettes

App UI Color Palette
Branding Color Palette
Summer Color Palette

FAQ

How do I use the tech startup color palette in CSS?

Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #4F46E5, #0EA5E9, #F8FAFC, #BDA9F5, #286E9B.

Do these colors pass accessibility checks?

See the WCAG matrix on this page: every text-on-background pairing with ratio ≥ 4.5 passes AA for normal text; ≥ 3 passes AA for large text and UI components.