Palette

Nordic Winter Bloom

Reflects the subtle, frosted beauty of hardy flora emerging in the tranquil stillness of a Nordic winter.

coolminimal5 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

#B2D3C2#E0F2E5#8BBAB9#567B7A#3B5B5B

Palette guide

How to use Nordic Winter Bloom

Overview

The Nordic Winter Bloom palette reflects the subtle, frosted beauty of hardy flora emerging in the tranquil stillness of a Nordic winter. This cool, muted collection features a delicate sage green, #B2D3C2, and a very light, almost white-green, #E0F2E5. A serene teal-grey, #8BBAB9, offers subtle depth, while the deeper #567B7A provides a rich mid-tone. The palette is anchored by a profound, dark blue-green, #3B5B5B. Designers can utilize these hues to create serene, sophisticated, and earthy designs that convey calm, natural elegance, perfect for wellness or artisanal brands.

Best used for

Artisanal product packaging
Wellness and mindfulness apps
Sustainable fashion branding
Botanical garden websites
Eco-conscious interior design
Photography with a soft, natural aesthetic

Suggested color roles

primary

Use #3B5B5B as the dominant hue for main sections, headers, or large background areas to establish a deep, stable foundation.

secondary

Apply #567B7A for sub-sections, navigation elements, or as a supporting background color, adding subtle variation.

accent

Reserve #E0F2E5 for delicate highlights, small graphic details, or subtle text, providing a soft contrast.

background

#E0F2E5 is ideal for clean, light backgrounds, offering a subtle cool tint rather than stark white.

text

For general body text, use #3B5B5B on lighter backgrounds like #E0F2E5 or #B2D3C2 for optimal readability. On darker shades, use white or near-white.

Accessibility notes

Ensure #3B5B5B text on #E0F2E5 or #B2D3C2 backgrounds meets WCAG AA contrast standards.
Be cautious when using #B2D3C2 or #8BBAB9 for text, as they may lack sufficient contrast on lighter shades.
Avoid pairing #567B7A and #3B5B5B for small text or interactive elements without verifying contrast.
Clearly indicate focus states for interactive elements, as subtle color shifts may not be enough.

Recommended combinations

Frosted Greens

Ideal for creating deep, immersive backgrounds with layered elements, perfect for corporate dashboards or serene landing pages.

#3B5B5B · #567B7A · #8BBAB9

Winter Leaves

Excellent for header sections and sub-navigation, offering a balanced contrast that is both professional and inviting.

#B2D3C2 · #E0F2E5 · #567B7A

Muted Bloom

Use the darkest shade for foundations, the lightest for accents, and the mid-tone for key information, conveying clarity and structure.

#3B5B5B · #E0F2E5 · #8BBAB9

CSS variables

:root {
  --nordic-winter-bloom-1: #B2D3C2;
  --nordic-winter-bloom-2: #E0F2E5;
  --nordic-winter-bloom-3: #8BBAB9;
  --nordic-winter-bloom-4: #567B7A;
  --nordic-winter-bloom-5: #3B5B5B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "nordic-winter-bloom": {
        1: "#B2D3C2",
        2: "#E0F2E5",
        3: "#8BBAB9",
        4: "#567B7A",
        5: "#3B5B5B",
      }
    }
  }
}

Hex values

Color 1#B2D3C2

Color 2#E0F2E5

Color 3#8BBAB9

Color 4#567B7A

Color 5#3B5B5B

Accessibility

Contrast checker

1.4:1Fail

1.3:1Fail

2.9:1Fail

4.6:1AA

1.4:1Fail

1.8:1Fail

4:1AA18

6.4:1AA

1.3:1Fail

1.8:1Fail

2.2:1Fail

3.5:1AA18

2.9:1Fail

4:1AA18

2.2:1Fail

1.6:1Fail

4.6:1AA

6.4:1AA

3.5:1AA18

1.6:1Fail

Similar palettes

More like Nordic Winter Bloom