Muted Color Palette

Desaturated mid-tones — quiet, premium and impossible to clash. Palette anchors: #6D7A5F, #8A9A5B, #A8A29E.

mutedcalm
#6D7A5F
#8A9A5B
#A8A29E
#B39DDB
#C9B8A8
#6d7a5f #8a9a5b #a8a29e #b39ddb #c9b8a8
#6D7A5F #8A9A5B #A8A29E #B39DDB #C9B8A8

Semantic roles

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

background#C9B8A8
surface#B39DDB
text#6D7A5F
text-muted#8A9A5B
primary#8A9A5B
secondary#A8A29E
accent#B39DDB

CSS variables 

:root {
  --background: #c9b8a8;
  --surface: #b39ddb;
  --text: #6d7a5f;
  --text-muted: #8a9a5b;
  --primary: #8a9a5b;
  --secondary: #a8a29e;
  --accent: #b39ddb;
}
Preview in UIs →

Accessibility matrix

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

Text \ BG#6D7A5F#8A9A5B#A8A29E#B39DDB#C9B8A8
#6D7A5F
1.0
1.5
1.8
1.9
2.4
#8A9A5B
1.5
1.0
1.2
1.3
1.6
#A8A29E
1.8
1.2
1.0
1.1
1.3
#B39DDB
1.9
1.3
1.1
1.0
1.2
#C9B8A8
2.4
1.6
1.3
1.2
1.0

Under deuteranopia

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

Colors in this palette

#6D7A5F
rgb(109, 122, 95)
#8A9A5B
Moss Green
#A8A29E
rgb(168, 162, 158)
#B39DDB
Lavender
#C9B8A8
rgb(201, 184, 168)

Similar palettes

Sage Green Color Palette
Moss Green Color Palette
Lavender Color Palette

FAQ

How do I use the muted color palette in CSS?

Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #6D7A5F, #8A9A5B, #A8A29E, #B39DDB, #C9B8A8.

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.