Palette

Nordic Winter Bloom

Icy blues and a touch of warmth capture the subtle beauty of a winter blossom in a cold Nordic landscape.

CoolCalm5 colors

More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Nordic Winter Bloom reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Nordic Winter Bloom.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#ADD8E6#87CEFA#4682B4#191970#FFF8DC

Palette guide

How to use Nordic Winter Bloom

Overview

The Nordic Winter Bloom palette captures the subtle beauty of a winter blossom in a cold Nordic landscape with its icy blues and a touch of warmth. This striking collection features a light sky blue, #ADD8E6, and a brighter blue, #87CEFA. A robust steel blue, #4682B4, provides depth, while the very deep navy, #191970, anchors the palette. A soft, creamy off-white, #FFF8DC, introduces a unique element of gentle warmth. Designers can use these hues for projects seeking a blend of cool serenity and delicate warmth, suitable for elegant branding or seasonal campaigns.

Best used for

Elegant winter-themed branding
Seasonal marketing campaigns
High-end cosmetic or fashion products
Luxury hospitality websites
Digital art with a serene, frosty aesthetic
Editorial design for lifestyle or travel during winter

Suggested color roles

primary

Use #191970 for strong foundations, large typography, or prominent UI elements to establish a deep, stable base.

secondary

Apply #4682B4 for sub-sections, navigation elements, or as a supporting background color, offering a substantial presence.

accent

Reserve #FFF8DC for delicate highlights, small graphic details, or subtle warmth, creating a beautiful contrast against the blues.

background

#ADD8E6 or #FFF8DC are excellent choices for light, airy backgrounds, providing a clean canvas.

text

For body text on #ADD8E6 or #FFF8DC, use #191970 or black for excellent readability. On darker blues, use #FFF8DC or white.

Accessibility notes

Ensure #191970 text on #ADD8E6 or #FFF8DC backgrounds meets WCAG AA contrast standards.
Be cautious when using #87CEFA for text, as it may lack sufficient contrast on lighter blue backgrounds.
The warm #FFF8DC offers good contrast against all blues; utilize it for text or key information.
Clearly differentiate interactive elements through sufficient contrast or additional visual cues.

Recommended combinations

Icy Depths

Creates a powerful, deep blue gradient, ideal for hero sections, headers, or backgrounds requiring strong visual impact.

#191970 · #4682B4 · #87CEFA

Winter Glow

Excellent for light, airy layouts, using the cream as a warm accent against cool blues for a sophisticated, inviting feel.

#ADD8E6 · #FFF8DC · #4682B4

Frosted Bloom

Use the deepest blue for a solid base, the cream for delicate accents, and the light blue for supporting elements, evoking a striking contrast.

#191970 · #FFF8DC · #ADD8E6

CSS variables

:root {
  --nordic-winter-bloom-2-1: #ADD8E6;
  --nordic-winter-bloom-2-2: #87CEFA;
  --nordic-winter-bloom-2-3: #4682B4;
  --nordic-winter-bloom-2-4: #191970;
  --nordic-winter-bloom-2-5: #FFF8DC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "nordic-winter-bloom-2": {
        1: "#ADD8E6",
        2: "#87CEFA",
        3: "#4682B4",
        4: "#191970",
        5: "#FFF8DC",
      }
    }
  }
}

Hex values

Color 1#ADD8E6

Color 2#87CEFA

Color 3#4682B4

Color 4#191970

Color 5#FFF8DC

Accessibility

Contrast checker

1.1:1Fail

2.7:1Fail

9.7:1AAA

1.4:1Fail

1.1:1Fail

2.4:1Fail

8.7:1AAA

1.6:1Fail

2.7:1Fail

2.4:1Fail

3.6:1AA18

3.9:1AA18

9.7:1AAA

8.7:1AAA

3.6:1AA18

13.9:1AAA

1.4:1Fail

1.6:1Fail

3.9:1AA18

13.9:1AAA

Similar palettes

More like Nordic Winter Bloom

View all Cool

Frosted Winter Evergreen

Frosty Morning Chill

Glacial Cave Depths

Icy Peak Horizon

Arctic Glacier Lagoon

Arctic Glacier Melt