Mobile App Color Palette

A confident violet primary, a near-white surface and a dark ink — the three roles a mobile UI system starts from. Anchors: #7C3AED, #F5F3FF, #111827.

mobileappmodern
#7C3AED
#F5F3FF
#111827
#CDA7F9
#9F9DA8
#7c3aed #f5f3ff #111827 #cda7f9 #9f9da8
#7C3AED #F5F3FF #111827 #CDA7F9 #9F9DA8

Semantic roles

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

background#F5F3FF
surface#CDA7F9
text#111827
text-muted#7C3AED
primary#7C3AED
secondary#CDA7F9
accent#9F9DA8

CSS variables 

:root {
  --background: #f5f3ff;
  --surface: #cda7f9;
  --text: #111827;
  --text-muted: #7c3aed;
  --primary: #7c3aed;
  --secondary: #cda7f9;
  --accent: #9f9da8;
}
Preview in UIs →

Accessibility matrix

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

Text \ BG#7C3AED#F5F3FF#111827#CDA7F9#9F9DA8
#7C3AED
1.0
5.2
3.1
2.9
2.1
#F5F3FF
5.2
1.0
16.2
1.8
2.4
#111827
3.1
16.2
1.0
8.9
6.6
#CDA7F9
2.9
1.8
8.9
1.0
1.3
#9F9DA8
2.1
2.4
6.6
1.3
1.0

Under deuteranopia

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

Colors in this palette

#7C3AED
rgb(124, 58, 237)
#F5F3FF
rgb(245, 243, 255)
#111827
rgb(17, 24, 39)
#CDA7F9
rgb(205, 167, 249)
#9F9DA8
rgb(159, 157, 168)

Similar palettes

App UI Color Palette
Cool Gray Color Palette
E-commerce Color Palette

FAQ

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

Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #7C3AED, #F5F3FF, #111827, #CDA7F9, #9F9DA8.

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.