Palette

Calm Nordic Winter

A serene collection of cool greys and whites, inspired by the tranquil, hushed landscapes 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 Calm 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 Calm Nordic Winter.

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

Data visualization

#DCDCDC#F8F8FF#B0C4DE#A9B2BB#C0C0C0

Palette guide

How to use Calm Nordic Winter

Overview

The Calm Nordic Winter palette is a serene collection of cool greys and whites, inspired by the tranquil, hushed landscapes of a Nordic winter. This minimalist aesthetic features a crisp off-white, #F8F8FF, a light silver, #DCDCDC, and a soft periwinkle blue, #B0C4DE, evoking icy skies. A muted blue-grey, #A9B2BB, and a classic medium grey, #C0C0C0, provide grounding depth. Designers will find this palette excellent for creating clean, modern, and uncluttered visuals that convey peacefulness and sophistication. Developers can leverage these colors to build serene and highly functional user interfaces for brands focused on technology, minimalist fashion, wellness, or any application seeking a calm, elegant, and timeless aesthetic, emphasizing clarity and quiet strength.

Best used for

Minimalist fashion brands
Scandinavian interior design
Winter lifestyle blogs and apps
High-tech electronics branding
Wellness and meditation platforms
Luxury home goods

Suggested color roles

primary

Utilize #F8F8FF as the main, pristine background color, providing a sense of expansive, snowy calm.

secondary

Apply #DCDCDC for subtle distinctions in backgrounds or inactive elements, maintaining a light, airy feel.

accent

Introduce #B0C4DE as a gentle periwinkle accent for subtle highlights or interactive elements, adding a touch of cool blue.

background

Employ #F8F8FF for clean, airy backgrounds, allowing content to breathe and maintain a minimalist aesthetic.

text

Use #A9B2BB for main body text and headings, ensuring strong readability and a sophisticated, grounded feel against lighter backgrounds.

Accessibility notes

Ensure sufficient contrast between #A9B2BB text and #F8F8FF or #DCDCDC backgrounds for optimal readability.
Avoid using lighter shades like #DCDCDC or #C0C0C0 for small text against similar light backgrounds due to low contrast.
For interactive elements, use #A9B2BB or #B0C4DE to ensure clear affordance and meet WCAG contrast guidelines.
Use distinct visual cues beyond color, such as underlines or icons, for interactive elements, especially with subtle color differences.

Recommended combinations

Icy Layers

Creates subtle depth and hierarchy through layered shades of white and grey, ideal for background sections or cards.

#F8F8FF · #DCDCDC · #C0C0C0

Winter Sky

Provides clear separation for text or important elements against a light background, suitable for content blocks or navigation.

#A9B2BB · #F8F8FF · #B0C4DE

Nordic Calm

Offers a gentle contrast for UI components like buttons or input fields, maintaining a clean and understated look.

#DCDCDC · #B0C4DE · #A9B2BB

CSS variables

:root {
  --calm-nordic-winter-1: #DCDCDC;
  --calm-nordic-winter-2: #F8F8FF;
  --calm-nordic-winter-3: #B0C4DE;
  --calm-nordic-winter-4: #A9B2BB;
  --calm-nordic-winter-5: #C0C0C0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "calm-nordic-winter": {
        1: "#DCDCDC",
        2: "#F8F8FF",
        3: "#B0C4DE",
        4: "#A9B2BB",
        5: "#C0C0C0",
      }
    }
  }
}

Hex values

Color 1#DCDCDC

Color 2#F8F8FF

Color 3#B0C4DE

Color 4#A9B2BB

Color 5#C0C0C0

Accessibility

Contrast checker

1.3:1Fail

1.6:1Fail

1.3:1Fail

1.7:1Fail

2:1Fail

1.7:1Fail

1.3:1Fail

1.7:1Fail

1.2:1Fail

1:1Fail

1.6:1Fail

2:1Fail

1.2:1Fail

1.3:1Fail

1.7:1Fail

1:1Fail

1.2:1Fail

Similar palettes

More like Calm Nordic Winter

Calm Nordic Winter

See it in context.

Ready when you are.

Built with Calm Nordic Winter.

How to use Calm Nordic Winter

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Icy Layers

Winter Sky

Nordic Calm

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Calm Nordic Winter