Christmas Color Palette
Pine green, Christmas red, ornament gold and snow cream — the classic holiday quartet. Anchors: #1E3A2F, #9B111E, #C9A227, #F8F5EF.
christmasholidaywinter
#1E3A2F
#9B111E
#C9A227
#F8F5EF
#93A19A
#1e3a2f #9b111e #c9a227 #f8f5ef #93a19a
#1E3A2F #9B111E #C9A227 #F8F5EF #93A19A
Semantic roles
Assigned deterministically: lightest = background, darkest = text, most saturated = primary.
| background | #F8F5EF | |
| surface | #C9A227 | |
| text | #1E3A2F | |
| text-muted | #9B111E | |
| primary | #9B111E | |
| secondary | #C9A227 | |
| accent | #93A19A |
CSS variables
:root {
--background: #f8f5ef;
--surface: #c9a227;
--text: #1e3a2f;
--text-muted: #9b111e;
--primary: #9b111e;
--secondary: #c9a227;
--accent: #93a19a;
}Accessibility matrix
Text color (rows) on background (columns). Green = WCAG AA pass for normal text (≥4.5:1).
| Text \ BG | #1E3A2F | #9B111E | #C9A227 | #F8F5EF | #93A19A |
|---|---|---|---|---|---|
| #1E3A2F | 1.0 | 1.5 | 5.1 | 11.3 | 4.6 |
| #9B111E | 1.5 | 1.0 | 3.5 | 7.7 | 3.1 |
| #C9A227 | 5.1 | 3.5 | 1.0 | 2.2 | 1.1 |
| #F8F5EF | 11.3 | 7.7 | 2.2 | 1.0 | 2.5 |
| #93A19A | 4.6 | 3.1 | 1.1 | 2.5 | 1.0 |
Under deuteranopia
Machado et al. (2009) simulation, severity 1.0 — approximation, not a medical tool.
Colors in this palette
#1E3A2F
rgb(30, 58, 47)
#9B111E
rgb(155, 17, 30)
#C9A227
rgb(201, 162, 39)
#F8F5EF
rgb(248, 245, 239)
#93A19A
rgb(147, 161, 154)
Similar palettes
FAQ
How do I use the christmas color palette in CSS?
Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #1E3A2F, #9B111E, #C9A227, #F8F5EF, #93A19A.
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.