Warm Color Palette

Hues from the warm half of the wheel (red through yellow) — cozy, energetic, appetizing. Palette anchors: #B7410E, #E76F51, #E9C46A.

warmcozy
#B7410E
#E76F51
#E9C46A
#F4A261
#8B2500
#b7410e #e76f51 #e9c46a #f4a261 #8b2500
#B7410E #E76F51 #E9C46A #F4A261 #8B2500

Semantic roles

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

background#E9C46A
surface#F4A261
text#8B2500
text-muted#B7410E
primary#B7410E
secondary#E76F51
accent#F4A261

CSS variables 

:root {
  --background: #e9c46a;
  --surface: #f4a261;
  --text: #8b2500;
  --text-muted: #b7410e;
  --primary: #b7410e;
  --secondary: #e76f51;
  --accent: #f4a261;
}
Preview in UIs →

Accessibility matrix

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

Text \ BG#B7410E#E76F51#E9C46A#F4A261#8B2500
#B7410E
1.0
1.8
3.3
2.7
1.6
#E76F51
1.8
1.0
1.9
1.5
2.9
#E9C46A
3.3
1.9
1.0
1.2
5.3
#F4A261
2.7
1.5
1.2
1.0
4.3
#8B2500
1.6
2.9
5.3
4.3
1.0

Under deuteranopia

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

Colors in this palette

#B7410E
Rust
#E76F51
rgb(231, 111, 81)
#E9C46A
rgb(233, 196, 106)
#F4A261
rgb(244, 162, 97)
#8B2500
rgb(139, 37, 0)

Similar palettes

Autumn Color Palette
Rust Color Palette
Sandybrown Color Palette

FAQ

How do I use the warm color palette in CSS?

Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #B7410E, #E76F51, #E9C46A, #F4A261, #8B2500.

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.