Winter Frost color palette
A morning after snowfall: frost white #E8F4FD, pale sky, clear blue #5DADE2, a stronger #2980B9 and a cold navy, #1A5276. Each step is the same blue hue at a different lightness, so the palette feels crisp and orderly. It's a good alternative to red and green for the holidays. Ski resorts and winter sale emails are where it looks most at home.
Winter Frost palette in use
Headings and text in #1A5276 sit well on a #E8F4FD page. #2980B9 suits primary buttons, #5DADE2 links and icons, and #AED6F1 cards and dividers.
This pair measures 7.47:1, so it works for body text too. The button uses #2980B9 with black text.
ButtonGood for
- Ski resort website
- Winter sale email
- Ice rink schedule
- Holiday charity drive
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 |
|---|---|---|---|
#1A5276 | #E8F4FD | 7.47:1 | AAA |
#1A5276 | #AED6F1 | 5.44:1 | AA |
#2980B9 | #E8F4FD | 3.84:1 | AA large |
#1A5276 | #5DADE2 | 3.39:1 | AA large |
Winter Frost palette as code
CSS variables
:root {
--winter-frost-1: #E8F4FD;
--winter-frost-2: #AED6F1;
--winter-frost-3: #5DADE2;
--winter-frost-4: #2980B9;
--winter-frost-5: #1A5276;
}Tailwind v4
@theme {
--color-winter-frost-1: #E8F4FD;
--color-winter-frost-2: #AED6F1;
--color-winter-frost-3: #5DADE2;
--color-winter-frost-4: #2980B9;
--color-winter-frost-5: #1A5276;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'winter-frost': {
100: '#E8F4FD',
200: '#AED6F1',
300: '#5DADE2',
400: '#2980B9',
500: '#1A5276',
},SCSS
$winter-frost-1: #E8F4FD;
$winter-frost-2: #AED6F1;
$winter-frost-3: #5DADE2;
$winter-frost-4: #2980B9;
$winter-frost-5: #1A5276;JSON
["#E8F4FD","#AED6F1","#5DADE2","#2980B9","#1A5276"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.