Diwali Color Palette

Marigold, diya gold, deep red and royal purple — the festival of lights in four colors. Anchors: #B45309, #F59E0B, #9B111E, #4C1D95.

diwalifestivallights
#B45309
#F59E0B
#9B111E
#4C1D95
#E7B090
#b45309 #f59e0b #9b111e #4c1d95 #e7b090
#B45309 #F59E0B #9B111E #4C1D95 #E7B090

Semantic roles

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

background#E7B090
surface#F59E0B
text#4C1D95
text-muted#9B111E
primary#F59E0B
secondary#B45309
accent#9B111E

CSS variables 

:root {
  --background: #e7b090;
  --surface: #f59e0b;
  --text: #4c1d95;
  --text-muted: #9b111e;
  --primary: #f59e0b;
  --secondary: #b45309;
  --accent: #9b111e;
}
Preview in UIs →

Accessibility matrix

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

Text \ BG#B45309#F59E0B#9B111E#4C1D95#E7B090
#B45309
1.0
2.3
1.7
2.2
2.6
#F59E0B
2.3
1.0
3.9
5.1
1.1
#9B111E
1.7
3.9
1.0
1.3
4.4
#4C1D95
2.2
5.1
1.3
1.0
5.7
#E7B090
2.6
1.1
4.4
5.7
1.0

Under deuteranopia

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

Colors in this palette

#B45309
rgb(180, 83, 9)
#F59E0B
rgb(245, 158, 11)
#9B111E
rgb(155, 17, 30)
#4C1D95
rgb(76, 29, 149)
#E7B090
rgb(231, 176, 144)

Similar palettes

Dashboard Color Palette
Restaurant Color Palette
Desert Color Palette

FAQ

How do I use the diwali color palette in CSS?

Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #B45309, #F59E0B, #9B111E, #4C1D95, #E7B090.

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.