Back to palettes

Palette

Nordic Winter Calm

Reflects the tranquil beauty of a Scandinavian winter, with muted blues and frosty grays.

coolcalm5 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

#CEDAE1#A1B2BF#6D8291#3F5263#E1E8EE

Palette guide

How to use Nordic Winter Calm

Overview

The Nordic Winter Calm palette embodies the tranquil beauty of a Scandinavian winter, featuring a harmonious blend of muted blues and frosty grays. This serene collection is ideal for designers and developers aiming to create a peaceful, sophisticated atmosphere. Key colors include the soft gray-blue #CEDAE1, the grounding mid-tone #A1B2BF, and the deep, anchoring #3F5263. With its subtle transitions from light #E1E8EE to darker, more saturated tones, this palette offers versatility for clean user interfaces, calming branding, or elegant content presentation. It's a thoughtful choice for projects requiring a sense of quiet strength and understated elegance, reflecting the calm of a frosty Nordic landscape.

Best used for

  • Minimalist UI and UX design
  • Serene branding for wellness or eco-friendly products
  • Spa and relaxation service websites
  • Elegant home decor inspiration platforms
  • Winter-themed event invitations and marketing
  • Professional corporate websites seeking a clean aesthetic

Suggested color roles

primary

Use #6D8291 as a stable, comforting primary color for main sections or prominent UI components, offering a balanced presence.

secondary

Employ #A1B2BF for supporting elements, subheadings, or secondary calls to action, providing a softer contrast.

accent

Reserve #3F5263 for impactful accents, critical notifications, or strong interactive elements due to its deep, authoritative tone.

background

Utilize #E1E8EE as the main background for a light, airy canvas that allows other colors to breathe and stand out.

text

For optimal readability, use #3F5263 for body text and headings on light backgrounds. For lighter text on darker elements, consider a bright white.

Accessibility notes

  • Ensure #3F5263 on #E1E8EE or #CEDAE1 provides sufficient contrast for body text to meet WCAG AA standards.
  • Avoid using #CEDAE1 or #A1B2BF for small text on light backgrounds like #E1E8EE, as contrast may be insufficient.
  • Interactive elements should have distinct focus and hover states, possibly using #3F5263 for clarity.
  • Always test color combinations for text and UI elements with a contrast checker to ensure readability for all users.

Recommended combinations

Calm Header

Ideal for a strong header text (#3F5263) on a light background (#E1E8EE), with a subtle supporting graphic or outline (#CEDAE1).

#3F5263 · #E1E8EE · #CEDAE1

Subtle Accent

Perfect for secondary UI elements where #A1B2BF highlights an active state against #E1E8EE, supported by #6D8291 for borders.

#A1B2BF · #6D8291 · #E1E8EE

Deep Serenity

Combines a foundational mid-tone (#6D8291) with a soft accent (#CEDAE1), anchored by the deepest shade (#3F5263) for visual depth.

#6D8291 · #CEDAE1 · #3F5263

CSS variables

:root {
  --nordic-winter-calm-1: #CEDAE1;
  --nordic-winter-calm-2: #A1B2BF;
  --nordic-winter-calm-3: #6D8291;
  --nordic-winter-calm-4: #3F5263;
  --nordic-winter-calm-5: #E1E8EE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "nordic-winter-calm": {
        1: "#CEDAE1",
        2: "#A1B2BF",
        3: "#6D8291",
        4: "#3F5263",
        5: "#E1E8EE",
      }
    }
  }
}

Related searches

scandinavian cool color paletteserene winter UI designmuted blue gray brandingtranquil website color schemesubtle nordic design colors

Palette colors

Hex values

Color 1#CEDAE1
·
Color 2#A1B2BF
·
Color 3#6D8291
·
Color 4#3F5263
·
Color 5#E1E8EE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.8:1Fail
5.7:1AA
1.2:1Fail
2
1.5:1Fail
1.8:1Fail
3.7:1AA18
1.8:1Fail
3
2.8:1Fail
1.8:1Fail
2:1Fail
3.2:1AA18
4
5.7:1AA
3.7:1AA18
2:1Fail
6.5:1AA
5
1.2:1Fail
1.8:1Fail
3.2:1AA18
6.5:1AA

Similar palettes

More like Nordic Winter Calm

View all cool
Arctic Whisper
Cool Mist Dawn
Fjorden Mist Calm
Frost Branch Serene
Frosted Berry Grove
Frosted Lakeside Calm