Back to palettes

Palette

Midnight Fjord Serene

This palette evokes the quiet majesty of a moonlit fjord, with deep waters meeting icy, distant peaks under a cool sky.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midnight Fjord Serene 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 Midnight Fjord Serene.

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

Data visualization

#0A1C2B#2C3E50#7F8C8D#BDC3C7#ECF0F1

Palette guide

How to use Midnight Fjord Serene

Overview

The Midnight Fjord Serene palette captures the quiet majesty of Nordic landscapes, blending deep, cool blues and grays with crisp, icy whites. This collection, featuring #0A1C2B, #2C3E50, #7F8C8D, #BDC3C7, and #ECF0F1, offers a sophisticated yet tranquil aesthetic. Designers can leverage its minimalist appeal for projects requiring a sense of calm, professionalism, and understated elegance. The palette transitions smoothly from the deep waters of a fjord to the muted tones of distant, snow-capped peaks, making it versatile for both digital and print applications. Its serene quality is perfect for creating a clean, inviting user experience.

Best used for

  • Corporate branding and websites
  • Luxury product packaging
  • Minimalist UI/UX design
  • Winter or arctic themed projects
  • Spa and wellness branding
  • Modern architectural visualizations

Suggested color roles

primary

Use #0A1C2B as the foundational deep navy for headers, primary buttons, or expansive dark sections, providing a strong anchor.

secondary

Employ #2C3E50 for supporting elements like subheadings, secondary navigation, or backgrounds, offering rich depth without harshness.

accent

Apply #7F8C8D for subtle highlights, icons, or interactive states, providing a muted yet distinct contrast.

background

Utilize #ECF0F1 as a clean, airy background for main content areas, ensuring excellent readability and a spacious feel.

text

For primary text on light backgrounds, use #0A1C2B or a dark charcoal. On darker backgrounds, a crisp white or #ECF0F1 ensures optimal legibility.

Accessibility notes

  • Ensure sufficient contrast when pairing #7F8C8D with #BDC3C7 for text, as they are mid-tones.
  • White text on #0A1C2B and #2C3E50 provides excellent readability.
  • Use #ECF0F1 for backgrounds where most text will reside to maximize legibility.
  • Avoid using #BDC3C7 for small text on #7F8C8D to prevent low contrast issues.

Recommended combinations

Deep Fjord

Ideal for a sophisticated, deep theme, perfect for professional interfaces or elegant branding.

#0A1C2B · #2C3E50 · #7F8C8D

Icy Peaks

Creates a light, airy, and serene atmosphere, suitable for clean layouts and soft highlights.

#ECF0F1 · #BDC3C7 · #7F8C8D

Arctic Contrast

Provides strong visual distinction, excellent for primary content on light backgrounds with subtle accent details.

#0A1C2B · #ECF0F1 · #BDC3C7

CSS variables

:root {
  --midnight-fjord-serene-1: #0A1C2B;
  --midnight-fjord-serene-2: #2C3E50;
  --midnight-fjord-serene-3: #7F8C8D;
  --midnight-fjord-serene-4: #BDC3C7;
  --midnight-fjord-serene-5: #ECF0F1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-fjord-serene": {
        1: "#0A1C2B",
        2: "#2C3E50",
        3: "#7F8C8D",
        4: "#BDC3C7",
        5: "#ECF0F1",
      }
    }
  }
}

Related searches

cool minimalist paletteserene blue gray colorsarctic design paletteprofessional dark blue schemelight gray UI colors

Palette colors

Hex values

Color 1#0A1C2B
·
Color 2#2C3E50
·
Color 3#7F8C8D
·
Color 4#BDC3C7
·
Color 5#ECF0F1
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
5:1AA
9.7:1AAA
15.1:1AAA
2
1.6:1Fail
3.2:1AA18
6.2:1AA
9.6:1AAA
3
5:1AA
3.2:1AA18
2:1Fail
3:1AA18
4
9.7:1AAA
6.2:1AA
2:1Fail
1.6:1Fail
5
15.1:1AAA
9.6:1AAA
3:1AA18
1.6:1Fail

Similar palettes

More like Midnight Fjord Serene

View all cool
Alpine Frost Serenity
Arctic Dusk Glow
Arctic Explorer's Dream
Arctic Fox Frost
Arctic Fox Pelt
Arctic Ice Shelf