Back to palettes

Palette

Nordic Winter

A collection of icy blues and whites reflecting the serene, stark beauty of a winter landscape in the Nordics.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Nordic Winter 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.

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

Data visualization

#B0C4DE#87CEFA#ADD8E6#AFEEEE#E0FFFF

Palette guide

How to use Nordic Winter

Overview

The Nordic Winter palette encapsulates the serene, stark beauty of a winter landscape in the Nordics, offering a collection of icy blues and whites. This palette is an excellent choice for designers and developers aiming to create a clean, fresh, and calming aesthetic with a touch of crispness. It features a range from the soft #B0C4DE to the vivid #87CEFA, complemented by lighter, ethereal tones like #ADD8E6, #AFEEEE, and the almost-white #E0FFFF. This combination delivers a feeling of openness, purity, and tranquility, making it highly versatile for projects that require a minimalist approach, a refreshing feel, or a clear, expansive visual environment.

Best used for

  • Winter event promotions and seasonal campaigns
  • Spa and relaxation service branding
  • Baby product design and marketing
  • Clean, minimalist website and app interfaces
  • Cloud computing and technology platforms
  • Environmental and sustainability initiatives

Suggested color roles

primary

Use #87CEFA as a clear, inviting primary color for key interactive elements, headers, or significant visual components.

secondary

Employ #B0C4DE for supporting elements, subheadings, or secondary calls to action, providing a softer, muted blue.

accent

Reserve #ADD8E6 for subtle highlights, active states, or decorative elements, adding a fresh, light touch.

background

Utilize #E0FFFF as the primary background, offering an expansive, airy, and almost-white canvas that feels pure and clean.

text

Since the palette lacks a dark color, use a dark charcoal (e.g., #333333) or a deep navy (e.g., #191970) for body text on #E0FFFF for optimal readability. For larger headings, #B0C4DE on #E0FFFF can work.

Accessibility notes

  • A dark text color (e.g., charcoal or deep navy) is essential for readability on light backgrounds like #E0FFFF, as colors within the palette are too light for text.
  • Ensure #B0C4DE on #E0FFFF has sufficient contrast for larger text, but avoid for small text due to potential WCAG AA failures.
  • Interactive elements using #87CEFA should have clear focus and hover states, perhaps with a darker outline for visibility.
  • Always use a color contrast checker for all text and important UI elements, especially given the lightness of this palette.

Recommended combinations

Icy Breeze

A vibrant highlight (#87CEFA) on a pure background (#E0FFFF), with #B0C4DE for a softer supporting element like a card border.

#87CEFA · #E0FFFF · #B0C4DE

Snow Drift

Ideal for layering, where #ADD8E6 and #AFEEEE create subtle visual distinctions against the #E0FFFF base for soft graphics.

#ADD8E6 · #E0FFFF · #AFEEEE

Winter Horizon

Combines a muted blue (#B0C4DE) with a clear, active blue (#87CEFA) and a light, airy accent (#AFEEEE) for visual depth.

#B0C4DE · #87CEFA · #AFEEEE

CSS variables

:root {
  --nordic-winter-1: #B0C4DE;
  --nordic-winter-2: #87CEFA;
  --nordic-winter-3: #ADD8E6;
  --nordic-winter-4: #AFEEEE;
  --nordic-winter-5: #E0FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "nordic-winter": {
        1: "#B0C4DE",
        2: "#87CEFA",
        3: "#ADD8E6",
        4: "#AFEEEE",
        5: "#E0FFFF",
      }
    }
  }
}

Related searches

icy blue white palettescandinavian snow colorsserene winter UI designlight blue brandingcalm cool color scheme

Palette colors

Hex values

Color 1#B0C4DE
·
Color 2#87CEFA
·
Color 3#ADD8E6
·
Color 4#AFEEEE
·
Color 5#E0FFFF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1:1Fail
1.2:1Fail
1.4:1Fail
1.7:1Fail
2
1:1Fail
1.1:1Fail
1.3:1Fail
1.6:1Fail
3
1.2:1Fail
1.1:1Fail
1.2:1Fail
1.4:1Fail
4
1.4:1Fail
1.3:1Fail
1.2:1Fail
1.2:1Fail
5
1.7:1Fail
1.6:1Fail
1.4:1Fail
1.2:1Fail

Similar palettes

More like Nordic Winter

View all cool
Frosted Alpine Peak
Winter Glacier Bloom
Alpine Frost Serenity
Arctic Dawn Light
Arctic Glacier Chill
Arctic Lake Ice