Back to palettes

Palette

Nordic Calm Retreat

A tranquil and minimal palette inspired by Scandinavian design, featuring muted blues, greys, and warm neutrals.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#728B96#AABBC2#CEDEE1#E7EBEB#B3A297

Palette guide

How to use Nordic Calm Retreat

Overview

The "Nordic Calm Retreat" palette embodies the serene and minimalist aesthetic of Scandinavian design. It features a harmonious blend of muted blues and grays, ranging from a calming blue-gray (#728B96) to a near-white (#E7EBEB). The inclusion of a warm, subtle taupe (#B3A297) adds an inviting, organic touch, preventing the palette from feeling cold. This scheme is exceptionally well-suited for creating clean, airy, and tranquil environments, emphasizing functionality and understated elegance. Designers can use these hex codes to evoke a sense of peace, clarity, and natural comfort, making it ideal for modern, minimalist, and user-friendly interfaces.

Best used for

  • Minimalist interior design websites
  • Wellness and mindfulness apps
  • Scandinavian furniture e-commerce
  • Clean, professional corporate branding
  • Spa or retreat facility websites
  • Eco-friendly product packaging

Suggested color roles

primary

Calming blue-gray (#728B96), ideal for prominent sections, headers, or a sophisticated background.

secondary

Lighter blue-gray (#AABBC2), excellent for secondary content blocks, cards, or subtle UI elements.

accent

Warm taupe (#B3A297), used sparingly for inviting accents, important links, or natural texture elements.

background

Very light, near-white (#E7EBEB), providing a clean, airy, and spacious canvas.

text

For dark text on light backgrounds, use #728B96 or a dark charcoal like #333333. For lighter text on #728B96, use white or #E7EBEB.

Accessibility notes

  • Ensure sufficient contrast when pairing text, especially with #AABBC2 or #CEDEE1 as text colors.
  • Dark charcoal or black text on #E7EBEB will provide excellent readability.
  • #B3A297 might not have enough contrast with #E7EBEB for small text; use for larger headings or decorative elements.
  • Test all interactive elements to ensure clear distinction for accessibility.

Recommended combinations

Airy Simplicity

Clean, spacious feel with a grounding blue and warm accent, ideal for main content.

#E7EBEB · #728B96 · #B3A297

Muted Harmony

Creates subtle depth and visual interest for layered UI components and background variations.

#AABBC2 · #CEDEE1 · #728B96

Natural Calm

A warm, earthy touch on a light background, perfect for highlights and secondary information.

#B3A297 · #E7EBEB · #AABBC2

CSS variables

:root {
  --nordic-calm-retreat-1: #728B96;
  --nordic-calm-retreat-2: #AABBC2;
  --nordic-calm-retreat-3: #CEDEE1;
  --nordic-calm-retreat-4: #E7EBEB;
  --nordic-calm-retreat-5: #B3A297;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "nordic-calm-retreat": {
        1: "#728B96",
        2: "#AABBC2",
        3: "#CEDEE1",
        4: "#E7EBEB",
        5: "#B3A297",
      }
    }
  }
}

Related searches

nordic color palettecalm minimalist designscandinavian aesthetic colorsmuted blue grey schemeclean neutral ui

Palette colors

Hex values

Color 1#728B96
·
Color 2#AABBC2
·
Color 3#CEDEE1
·
Color 4#E7EBEB
·
Color 5#B3A297
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
2.6:1Fail
3:1Fail
1.5:1Fail
2
1.8:1Fail
1.4:1Fail
1.6:1Fail
1.2:1Fail
3
2.6:1Fail
1.4:1Fail
1.2:1Fail
1.8:1Fail
4
3:1Fail
1.6:1Fail
1.2:1Fail
2:1Fail
5
1.5:1Fail
1.2:1Fail
1.8:1Fail
2:1Fail

Similar palettes

More like Nordic Calm Retreat

View all neutral