Valentine's Day Color Palette
Deep rose red, blush pink, petal white and a dark chocolate red — romantic with real contrast. Anchors: #BE123C, #F9A8D4, #FCE7F3, #7F1D1D.
valentineromanticfebruary
#BE123C
#F9A8D4
#FCE7F3
#7F1D1D
#EDA0A1
#be123c #f9a8d4 #fce7f3 #7f1d1d #eda0a1
#BE123C #F9A8D4 #FCE7F3 #7F1D1D #EDA0A1
Semantic roles
Assigned deterministically: lightest = background, darkest = text, most saturated = primary.
| background | #FCE7F3 | |
| surface | #F9A8D4 | |
| text | #7F1D1D | |
| text-muted | #BE123C | |
| primary | #BE123C | |
| secondary | #F9A8D4 | |
| accent | #EDA0A1 |
CSS variables
:root {
--background: #fce7f3;
--surface: #f9a8d4;
--text: #7f1d1d;
--text-muted: #be123c;
--primary: #be123c;
--secondary: #f9a8d4;
--accent: #eda0a1;
}Accessibility matrix
Text color (rows) on background (columns). Green = WCAG AA pass for normal text (≥4.5:1).
| Text \ BG | #BE123C | #F9A8D4 | #FCE7F3 | #7F1D1D | #EDA0A1 |
|---|---|---|---|---|---|
| #BE123C | 1.0 | 3.5 | 5.3 | 1.6 | 3.0 |
| #F9A8D4 | 3.5 | 1.0 | 1.5 | 5.5 | 1.1 |
| #FCE7F3 | 5.3 | 1.5 | 1.0 | 8.5 | 1.8 |
| #7F1D1D | 1.6 | 5.5 | 8.5 | 1.0 | 4.8 |
| #EDA0A1 | 3.0 | 1.1 | 1.8 | 4.8 | 1.0 |
Under deuteranopia
Machado et al. (2009) simulation, severity 1.0 — approximation, not a medical tool.
Colors in this palette
#BE123C
rgb(190, 18, 60)
#F9A8D4
rgb(249, 168, 212)
#FCE7F3
rgb(252, 231, 243)
#7F1D1D
rgb(127, 29, 29)
#EDA0A1
rgb(237, 160, 161)
Similar palettes
FAQ
How do I use the valentine's day color palette in CSS?
Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #BE123C, #F9A8D4, #FCE7F3, #7F1D1D, #EDA0A1.
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.