Autumn Color Palette

Falling-leaf oranges, rusts and deep browns. Warm, nostalgic and highly seasonal.

autumnwarmseasonal
#8B2500
#C75B12
#E39B2D
#7A4B1B
#4E2E0F
#8b2500 #c75b12 #e39b2d #7a4b1b #4e2e0f
#8B2500 #C75B12 #E39B2D #7A4B1B #4E2E0F

Semantic roles

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

background#E39B2D
surface#C75B12
text#4E2E0F
text-muted#8B2500
primary#8B2500
secondary#C75B12
accent#7A4B1B

CSS variables 

:root {
  --background: #e39b2d;
  --surface: #c75b12;
  --text: #4e2e0f;
  --text-muted: #8b2500;
  --primary: #8b2500;
  --secondary: #c75b12;
  --accent: #7a4b1b;
}
Preview in UIs →

Accessibility matrix

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

Text \ BG#8B2500#C75B12#E39B2D#7A4B1B#4E2E0F
#8B2500
1.0
2.1
3.8
1.2
1.4
#C75B12
2.1
1.0
1.8
1.7
2.9
#E39B2D
3.8
1.8
1.0
3.2
5.2
#7A4B1B
1.2
1.7
3.2
1.0
1.7
#4E2E0F
1.4
2.9
5.2
1.7
1.0

Under deuteranopia

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

Colors in this palette

#8B2500
rgb(139, 37, 0)
#C75B12
rgb(199, 91, 18)
#E39B2D
rgb(227, 155, 45)
#7A4B1B
rgb(122, 75, 27)
#4E2E0F
rgb(78, 46, 15)

Similar palettes

Earth Tone Palette
Luxury Color Palette
Neutral Color Palette

FAQ

How do I use the autumn color palette in CSS?

Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #8B2500, #C75B12, #E39B2D, #7A4B1B, #4E2E0F.

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.