Halloween color palette
Pumpkin orange #FF6600 and black are the classic pair, and the rest fills in the scene: blood red #8B0000, candy-corn gold #FFD700 and a deep indigo, #4B0082, for the night sky. Three of the five are very dark, so the palette is moody by default, with orange and gold doing the shouting. Costume shops and haunted houses will want it every October.
Halloween palette in use
Use #000000 or #4B0082 as the background, with #FFD700 for text and #FF6600 for buttons and headlines. #8B0000 adds drips, borders and spooky detail.
This pair measures 14.97:1, so it works for body text too. The button uses #FF6600 with black text.
ButtonGood for
- Halloween party invitation
- Haunted house website
- Costume shop sale
- Trick-or-treat flyer
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#000000 | #FFD700 | 14.97:1 | AAA |
#4B0082 | #FFD700 | 9.23:1 | AAA |
#000000 | #FF6600 | 7.15:1 | AAA |
#8B0000 | #FFD700 | 7.13:1 | AAA |
#4B0082 | #FF6600 | 4.41:1 | AA large |
#8B0000 | #FF6600 | 3.40:1 | AA large |
Halloween palette as code
CSS variables
:root {
--halloween-1: #FF6600;
--halloween-2: #000000;
--halloween-3: #8B0000;
--halloween-4: #FFD700;
--halloween-5: #4B0082;
}Tailwind v4
@theme {
--color-halloween-1: #FF6600;
--color-halloween-2: #000000;
--color-halloween-3: #8B0000;
--color-halloween-4: #FFD700;
--color-halloween-5: #4B0082;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'halloween': {
100: '#FF6600',
200: '#000000',
300: '#8B0000',
400: '#FFD700',
500: '#4B0082',
},SCSS
$halloween-1: #FF6600;
$halloween-2: #000000;
$halloween-3: #8B0000;
$halloween-4: #FFD700;
$halloween-5: #4B0082;JSON
["#FF6600","#000000","#8B0000","#FFD700","#4B0082"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.