Halloween Color Palette

Midnight black, pumpkin orange, witch purple and a toxic-lime accent — playful spooky, not gore. Anchors: #1A1A1A, #F97316, #6D28D9, #A3E635.

halloweenoctoberspooky
#1A1A1A
#F97316
#6D28D9
#A3E635
#8E8E8E
#1a1a1a #f97316 #6d28d9 #a3e635 #8e8e8e
#1A1A1A #F97316 #6D28D9 #A3E635 #8E8E8E

Semantic roles

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

background#A3E635
surface#F97316
text#1A1A1A
text-muted#6D28D9
primary#F97316
secondary#6D28D9
accent#8E8E8E

CSS variables 

:root {
  --background: #a3e635;
  --surface: #f97316;
  --text: #1a1a1a;
  --text-muted: #6d28d9;
  --primary: #f97316;
  --secondary: #6d28d9;
  --accent: #8e8e8e;
}
Preview in UIs →

Accessibility matrix

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

Text \ BG#1A1A1A#F97316#6D28D9#A3E635#8E8E8E
#1A1A1A
1.0
6.2
2.5
11.5
5.3
#F97316
6.2
1.0
2.5
1.9
1.2
#6D28D9
2.5
2.5
1.0
4.7
2.2
#A3E635
11.5
1.9
4.7
1.0
2.2
#8E8E8E
5.3
1.2
2.2
2.2
1.0

Under deuteranopia

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

Colors in this palette

#1A1A1A
rgb(26, 26, 26)
#F97316
rgb(249, 115, 22)
#6D28D9
rgb(109, 40, 217)
#A3E635
rgb(163, 230, 53)
#8E8E8E
rgb(142, 142, 142)

Similar palettes

E-commerce Color Palette
Fitness Color Palette
Nature Color Palette

FAQ

How do I use the halloween color palette in CSS?

Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #1A1A1A, #F97316, #6D28D9, #A3E635, #8E8E8E.

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.