Palette

Nordic Fjord Deep

The profound tranquility of a deep Nordic fjord, surrounded by steep, mist-shrouded cliffs.

coolminimal5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Nordic Fjord Deep 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 Fjord Deep.

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

Data visualization

#2C3E50#4A6C8C#1E2B3C#6C8FA6#3A4A5A

Palette guide

How to use Nordic Fjord Deep

Overview

The Nordic Fjord Deep palette evokes the profound tranquility of a deep Nordic fjord, surrounded by steep, mist-shrouded cliffs. This cool, sophisticated collection features a primary deep blue-grey, #2C3E50, complemented by a slightly lighter, muted blue, #4A6C8C. The darkest shade, #1E2B3C, provides strong contrast, while the airy #6C8FA6 offers a breath of subtle lightness. A versatile mid-tone, #3A4A5A, bridges the darker and lighter elements. Designers can leverage these colors for projects requiring a sense of depth, serenity, and understated elegance, perfect for corporate interfaces or nature-inspired branding.

Best used for

Corporate websites with a serious, calm tone
High-end architectural visualization
Nature-inspired branding and packaging
User interfaces requiring a professional and serene feel
Editorial design for travel or environmental content
Luxury product design

Suggested color roles

primary

Use #2C3E50 as the dominant hue for main sections, backgrounds, or large headers to establish a deep, stable foundation.

secondary

Apply #4A6C8C for sub-sections, navigation elements, or as a supporting background color to add subtle variation and depth.

accent

Reserve #6C8FA6 for interactive elements, highlights, or small graphic details where a touch of cool brightness is needed.

background

#1E2B3C works well for dark mode interfaces or as a striking background for hero sections, providing strong contrast.

text

For general body text, use a dark shade like #1E2B3C on lighter backgrounds, or white/near-white on darker shades like #2C3E50 for optimal readability.

Accessibility notes

Ensure sufficient contrast between text and background, especially when using #6C8FA6 with lighter text.
Test color combinations like #1E2B3C text on #2C3E50 background for WCAG AA compliance.
Avoid using #4A6C8C and #6C8FA6 for small text elements against similar mid-tones without checking contrast.
Provide alternative text for color-coded information to support users with color vision deficiencies.

Recommended combinations

Deep Waters

Ideal for creating deep, immersive backgrounds with layered elements, perfect for corporate dashboards or serene landing pages.

#1E2B3C · #2C3E50 · #4A6C8C

Fjord Mist

Excellent for header sections and sub-navigation, offering a balanced contrast that is both professional and inviting.

#2C3E50 · #3A4A5A · #6C8FA6

Cliff Edge

Use the darkest shade for foundations, the lightest for accents, and the mid-tone for key information, conveying clarity and structure.

#1E2B3C · #6C8FA6 · #4A6C8C

CSS variables

:root {
  --nordic-fjord-deep-1: #2C3E50;
  --nordic-fjord-deep-2: #4A6C8C;
  --nordic-fjord-deep-3: #1E2B3C;
  --nordic-fjord-deep-4: #6C8FA6;
  --nordic-fjord-deep-5: #3A4A5A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "nordic-fjord-deep": {
        1: "#2C3E50",
        2: "#4A6C8C",
        3: "#1E2B3C",
        4: "#6C8FA6",
        5: "#3A4A5A",
      }
    }
  }
}

Hex values

Color 1#2C3E50

Color 2#4A6C8C

Color 3#1E2B3C

Color 4#6C8FA6

Color 5#3A4A5A

Accessibility

Contrast checker

2:1Fail

1.3:1Fail

3.2:1AA18

1.2:1Fail

2:1Fail

2.6:1Fail

1.6:1Fail

1.7:1Fail

1.3:1Fail

2.6:1Fail

4.2:1AA18

1.6:1Fail

3.2:1AA18

1.6:1Fail

4.2:1AA18

2.7:1Fail

1.2:1Fail

1.7:1Fail

1.6:1Fail

2.7:1Fail

Similar palettes

More like Nordic Fjord Deep

Nordic Fjord Deep

See it in context.

Ready when you are.

Built with Nordic Fjord Deep.

How to use Nordic Fjord Deep

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Waters

Fjord Mist

Cliff Edge

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Nordic Fjord Deep