Palette

Nordic Winter Calm

A clean and serene palette with cool blues and muted whites, capturing the peaceful simplicity 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 Calm 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 Calm.

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

Data visualization

#ADD8E6#B0E0E6#F0F8FF#E0FFFF#D2B48C

Palette guide

How to use Nordic Winter Calm

Overview

The Nordic Winter Calm palette offers a clean and serene blend of cool blues and muted whites, capturing the peaceful simplicity of a Nordic winter. This refreshing collection features a light sky blue, #ADD8E6, and a slightly brighter powder blue, #B0E0E6. Two very pale, almost white blues, #F0F8FF and #E0FFFF, provide an expansive, airy feel. A singular warm, muted tan, #D2B48C, introduces a subtle, earthy contrast. Designers can leverage these hues for projects requiring a sense of freshness, tranquility, and understated elegance, ideal for wellness, home decor, or minimalist branding.

Best used for

Minimalist web design and interfaces
Wellness and mental health applications
Home decor and interior design branding
Clean, modern e-commerce platforms
Photography portfolios with soft lighting
Seasonal campaigns with a serene winter theme

Suggested color roles

primary

Use #ADD8E6 as a dominant color for large sections or hero images to establish a refreshing and open feel.

secondary

Apply #B0E0E6 for backgrounds, secondary elements, or subtle patterns to add softness and depth.

accent

Reserve #D2B48C for delicate highlights, small graphic details, or subtle typography, providing a unique warm contrast.

background

#F0F8FF or #E0FFFF are perfect for clean, light backgrounds, providing an expansive, airy canvas.

text

For optimal readability on #F0F8FF or #E0FFFF, use a dark blue or black. For text on #ADD8E6, use black or very dark gray.

Accessibility notes

Ensure sufficient contrast for text, especially when using lighter blues like #ADD8E6 or #B0E0E6 for backgrounds.
#F0F8FF and #E0FFFF are very light; use dark text like charcoal or black for good readability.
The warm #D2B48C provides good contrast against the blues; consider it for important highlights.
Always test color combinations for WCAG AA compliance, particularly for critical information.

Recommended combinations

Winter Sky

Creates a soft, airy gradient or layered look, perfect for clean backgrounds or subtle UI elements.

#F0F8FF · #E0FFFF · #ADD8E6

Frozen Lake

Ideal for establishing a cool, inviting depth with a touch of earthy warmth, suitable for primary navigation or prominent graphic features.

#ADD8E6 · #B0E0E6 · #D2B48C

Arctic Bloom

Use the lightest blue for a clean background, the tan for a striking accent, and the mid-blue for supporting elements, evoking a delicate contrast.

#F0F8FF · #D2B48C · #ADD8E6

CSS variables

:root {
  --nordic-winter-calm-2-1: #ADD8E6;
  --nordic-winter-calm-2-2: #B0E0E6;
  --nordic-winter-calm-2-3: #F0F8FF;
  --nordic-winter-calm-2-4: #E0FFFF;
  --nordic-winter-calm-2-5: #D2B48C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "nordic-winter-calm-2": {
        1: "#ADD8E6",
        2: "#B0E0E6",
        3: "#F0F8FF",
        4: "#E0FFFF",
        5: "#D2B48C",
      }
    }
  }
}

Hex values

Color 1#ADD8E6

Color 2#B0E0E6

Color 3#F0F8FF

Color 4#E0FFFF

Color 5#D2B48C

Accessibility

Contrast checker

1.1:1Fail

1.4:1Fail

1.3:1Fail

1.1:1Fail

1.3:1Fail

1.4:1Fail

1.3:1Fail

1:1Fail

1.8:1Fail

1.4:1Fail

1:1Fail

1.9:1Fail

1.3:1Fail

1.4:1Fail

1.8:1Fail

1.9:1Fail

Similar palettes

More like Nordic Winter Calm

Nordic Winter Calm

See it in context.

Ready when you are.

Built with Nordic Winter Calm.

How to use Nordic Winter Calm

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Winter Sky

Frozen Lake

Arctic Bloom

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Nordic Winter Calm