Palette

Nordic Mist Scale

A harmonious progression of cool blue-greys, evoking the serene and often misty landscapes of Nordic coasts.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2E3A46#576C7B#879DAE#BCCED9#E8F1F5

Palette guide

How to use Nordic Mist Scale

Overview

The Nordic Mist Scale palette presents a harmonious progression of cool blue-greys, evoking the serene and often misty landscapes of Nordic coasts. This monochromatic collection ranges from a deep, anchoring #2E3A46 to a soft, ethereal near-white #E8F1F5. Intermediate shades like #576C7B, #879DAE, and #BCCED9 provide smooth transitions and ample flexibility. Designers can utilize this palette to create sophisticated, understated, and highly functional designs that emphasize clarity, tranquility, and a modern aesthetic, perfect for professional or minimalist applications.

Best used for

Corporate and professional web applications
Minimalist branding and identity systems
Data visualization and dashboards
Architectural and interior design presentations
User interfaces requiring a calm and focused experience
Editorial design with a sophisticated, muted tone

Suggested color roles

primary

Use #2E3A46 for strong foundations, large typography, or prominent UI elements to establish a solid base.

secondary

Apply #576C7B for sub-headers, secondary navigation, or card backgrounds, offering a softer yet substantial presence.

accent

#BCCED9 can serve as a subtle accent for hover states, selected items, or delicate graphic details, providing a gentle lift.

background

#E8F1F5 is the ideal choice for main content backgrounds, offering a clean, airy canvas that is easy on the eyes.

text

For body text on #E8F1F5 or #BCCED9, use #2E3A46 or #576C7B for excellent readability. On darker backgrounds, use white or #E8F1F5.

Accessibility notes

Ensure strong contrast between text and background, especially when pairing lighter grays like #BCCED9 with #E8F1F5.
#2E3A46 text on #E8F1F5 background offers excellent readability and WCAG AA compliance.
Avoid using #879DAE for small text on #BCCED9 as contrast might be insufficient.
Clearly differentiate interactive elements through sufficient contrast or additional visual cues.

Recommended combinations

Misty Depths

Excellent for creating depth in dark mode interfaces or layered background effects for a sophisticated look.

#2E3A46 · #576C7B · #879DAE

Coastal Fog

Ideal for light, airy layouts, providing subtle variations for backgrounds, cards, and secondary content.

#E8F1F5 · #BCCED9 · #879DAE

Horizon Line

Use the darkest for text, the lightest for background, and the mid-tone for highlights, achieving clear hierarchy.

#2E3A46 · #E8F1F5 · #576C7B

CSS variables

:root {
  --nordic-mist-scale-1: #2E3A46;
  --nordic-mist-scale-2: #576C7B;
  --nordic-mist-scale-3: #879DAE;
  --nordic-mist-scale-4: #BCCED9;
  --nordic-mist-scale-5: #E8F1F5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "nordic-mist-scale": {
        1: "#2E3A46",
        2: "#576C7B",
        3: "#879DAE",
        4: "#BCCED9",
        5: "#E8F1F5",
      }
    }
  }
}

Hex values

Color 1#2E3A46

Color 2#576C7B

Color 3#879DAE

Color 4#BCCED9

Color 5#E8F1F5

Accessibility

Contrast checker

2.1:1Fail

4.1:1AA18

7.2:1AAA

10.1:1AAA

2.1:1Fail

1.9:1Fail

3.4:1AA18

4.8:1AA

4.1:1AA18

1.9:1Fail

1.7:1Fail

2.5:1Fail

7.2:1AAA

3.4:1AA18

1.7:1Fail

1.4:1Fail

10.1:1AAA

4.8:1AA

2.5:1Fail

1.4:1Fail

Similar palettes

More like Nordic Mist Scale

Granite Peak Twilight