Retro Color Palette

Faded 70s warm tones with an avocado-green bridge — nostalgic without being sepia. Palette anchors: #D96C3F, #E0A458, #8A9A5B.

retrovintage
#D96C3F
#E0A458
#8A9A5B
#7C5A3C
#F0E5CF
#d96c3f #e0a458 #8a9a5b #7c5a3c #f0e5cf
#D96C3F #E0A458 #8A9A5B #7C5A3C #F0E5CF

Semantic roles

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

background#F0E5CF
surface#E0A458
text#7C5A3C
text-muted#D96C3F
primary#D96C3F
secondary#E0A458
accent#8A9A5B

CSS variables 

:root {
  --background: #f0e5cf;
  --surface: #e0a458;
  --text: #7c5a3c;
  --text-muted: #d96c3f;
  --primary: #d96c3f;
  --secondary: #e0a458;
  --accent: #8a9a5b;
}
Preview in UIs →

Accessibility matrix

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

Text \ BG#D96C3F#E0A458#8A9A5B#7C5A3C#F0E5CF
#D96C3F
1.0
1.6
1.1
1.8
2.7
#E0A458
1.6
1.0
1.4
2.8
1.8
#8A9A5B
1.1
1.4
1.0
2.0
2.5
#7C5A3C
1.8
2.8
2.0
1.0
5.0
#F0E5CF
2.7
1.8
2.5
5.0
1.0

Under deuteranopia

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

Colors in this palette

#D96C3F
rgb(217, 108, 63)
#E0A458
rgb(224, 164, 88)
#8A9A5B
Moss Green
#7C5A3C
rgb(124, 90, 60)
#F0E5CF
rgb(240, 229, 207)

Similar palettes

Mustard Color Palette
Moss Green Color Palette
Muted Color Palette

FAQ

How do I use the retro color palette in CSS?

Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #D96C3F, #E0A458, #8A9A5B, #7C5A3C, #F0E5CF.

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.