App UI Color Palette

A primary action blue, a neutral app surface and a green success state — the minimal role set an app interface actually needs. Anchors: #2563EB, #F8FAFC, #10B981.

appuiinterface
#2563EB
#F8FAFC
#10B981
#B4B5F8
#A0A1A6
#2563eb #f8fafc #10b981 #b4b5f8 #a0a1a6
#2563EB #F8FAFC #10B981 #B4B5F8 #A0A1A6

Semantic roles

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

background#F8FAFC
surface#B4B5F8
text#2563EB
text-muted#A0A1A6
primary#10B981
secondary#B4B5F8
accent#A0A1A6

CSS variables 

:root {
  --background: #f8fafc;
  --surface: #b4b5f8;
  --text: #2563eb;
  --text-muted: #a0a1a6;
  --primary: #10b981;
  --secondary: #b4b5f8;
  --accent: #a0a1a6;
}
Preview in UIs →

Accessibility matrix

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

Text \ BG#2563EB#F8FAFC#10B981#B4B5F8#A0A1A6
#2563EB
1.0
4.9
2.0
2.7
2.0
#F8FAFC
4.9
1.0
2.4
1.8
2.5
#10B981
2.0
2.4
1.0
1.3
1.0
#B4B5F8
2.7
1.8
1.3
1.0
1.3
#A0A1A6
2.0
2.5
1.0
1.3
1.0

Under deuteranopia

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

Colors in this palette

#2563EB
rgb(37, 99, 235)
#F8FAFC
rgb(248, 250, 252)
#10B981
rgb(16, 185, 129)
#B4B5F8
rgb(180, 181, 248)
#A0A1A6
rgb(160, 161, 166)

Similar palettes

Website Color Palette
Neutral Color Palette
Mobile App Color Palette

FAQ

How do I use the app ui color palette in CSS?

Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #2563EB, #F8FAFC, #10B981, #B4B5F8, #A0A1A6.

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.