Use winter color palettes with icy blues, pine, silver, and deep night tones for seasonal products, premium layouts, and restrained interface systems.
Winter palettes combine icy tints, navy and deep teal, and evergreen, often with one warm note such as cream or a soft rose. More than half overlap with the cold collection, but winter sets more often pair a near-white with a very dark color, which makes them easy to turn into complete light or dark themes.
More than half of these palettes also appear in the cold collection, and blue, cyan, and indigo make up about 60% of the swatches. What sets winter apart is the rest: frosty near-whites (#ddf2fd, #dafffb), pine and moss (#4f6f52, #3a4d39), and warm candlelight tones such as #f5e8c7 and #e5c3a6.
Winter palettes also tend to span a wide range of values. About 83% contain a pair that reaches 4.5:1, usually a deep navy or teal next to an icy tint, so most can be used without adding a text color.
#04364a, #176b87, #64ccc5, #dafffb works in both a light and a dark theme from the same four colors.
:root {
--bg: #dafffb;
--text: #04364a;
--action: #176b87;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #04364a;
--text: #dafffb;
--action: #64ccc5;
}
}A cream accent keeps a winter layout from feeling clinical. In #363062, #435585, #818fb4, #f5e8c7, the cream #f5e8c7 on the indigo #363062 is 9.82:1, which makes it a good text or highlight color for a dark hero. The lavender-grey #818fb4 reaches only 3.71:1 there, so use it for secondary shapes and borders.
Frost does not mean pure white. A slightly blue or green tint such as #ddf2fd keeps the icy feel and is easier on large areas; #164863 text on it measures 8.50:1.
Use a tinted near-white such as #ddf2fd instead of pure white, navy or deep teal for text, and a mid blue for actions. Add cream or warm beige in one place, such as a hero heading or a highlight, to keep the palette from feeling clinical.
Most winter palettes include a usable pair, but the middle swatches are less reliable. In #2e4374, #4b527e, #7c81ad, #e5c3a6, the warm #e5c3a6 on the navy is 5.84:1, while the lavender-grey #7c81ad is 2.58:1. Teal #29adb2 holds white text at only 2.72:1; the deeper #0766ad from the same palette holds it at 5.98:1.
Updated