Minimal Color Palette

White, off-white, mid gray and near-black. Nothing else. Maximum clarity.

minimalneutralclean
#FFFFFF
#F5F5F5
#9E9E9E
#212121
#ffffff #f5f5f5 #9e9e9e #212121
#FFFFFF #F5F5F5 #9E9E9E #212121

Semantic roles

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

background#FFFFFF
surface#F5F5F5
text#212121
text-muted#9E9E9E
primary#F5F5F5
secondary#9E9E9E
accent#9E9E9E

CSS variables 

:root {
  --background: #ffffff;
  --surface: #f5f5f5;
  --text: #212121;
  --text-muted: #9e9e9e;
  --primary: #f5f5f5;
  --secondary: #9e9e9e;
  --accent: #9e9e9e;
}
Preview in UIs →

Accessibility matrix

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

Text \ BG#FFFFFF#F5F5F5#9E9E9E#212121
#FFFFFF
1.0
1.1
2.7
16.1
#F5F5F5
1.1
1.0
2.5
14.8
#9E9E9E
2.7
2.5
1.0
6.0
#212121
16.1
14.8
6.0
1.0

Under deuteranopia

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

Colors in this palette

#FFFFFF
rgb(255, 255, 255)
#F5F5F5
rgb(245, 245, 245)
#9E9E9E
rgb(158, 158, 158)
#212121
rgb(33, 33, 33)

Similar palettes

Neutral Color Palette
Wedding Color Palette
Luxury Color Palette

FAQ

How do I use the minimal color palette in CSS?

Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #FFFFFF, #F5F5F5, #9E9E9E, #212121.

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.