Holiday Red color palette
Three reds, from dark wine #8B0000 to bright crimson #DC143C, carry most of the weight, with silver #C0C0C0 and evergreen #228B22 adding the tinsel and the tree. It looks traditional without turning cartoonish, since the reds lean deep. Silver gives you a neutral that feels festive. Christmas cards and December menus are its natural season.
Holiday Red palette in use
Use white or #C0C0C0 as the background with #8B0000 for text. #DC143C is the button color, #228B22 works for secondary actions and accents, and #B22222 for headings.
This pair measures 5.50:1, so it works for body text too. The button uses #DC143C with white text.
ButtonGood for
- Christmas card design
- Holiday sale banner
- December restaurant menu
- Gift guide layout
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 |
|---|---|---|---|
#8B0000 | #C0C0C0 | 5.50:1 | AA |
#B22222 | #C0C0C0 | 3.67:1 | AA large |
Holiday Red palette as code
CSS variables
:root {
--holiday-red-1: #8B0000;
--holiday-red-2: #B22222;
--holiday-red-3: #DC143C;
--holiday-red-4: #C0C0C0;
--holiday-red-5: #228B22;
}Tailwind v4
@theme {
--color-holiday-red-1: #8B0000;
--color-holiday-red-2: #B22222;
--color-holiday-red-3: #DC143C;
--color-holiday-red-4: #C0C0C0;
--color-holiday-red-5: #228B22;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'holiday-red': {
100: '#8B0000',
200: '#B22222',
300: '#DC143C',
400: '#C0C0C0',
500: '#228B22',
},SCSS
$holiday-red-1: #8B0000;
$holiday-red-2: #B22222;
$holiday-red-3: #DC143C;
$holiday-red-4: #C0C0C0;
$holiday-red-5: #228B22;JSON
["#8B0000","#B22222","#DC143C","#C0C0C0","#228B22"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.