Back to palettes

Palette

Fjord Twilight

Deep blues and muted greens capture the serene yet dramatic colors of a Nordic fjord at dusk.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2C3E50#4A6E8C#8FAABF#6B9080#3A5B73

Palette guide

How to use Fjord Twilight

Overview

The Fjord Twilight palette captures the serene yet dramatic colors of a Nordic fjord at dusk, featuring deep blues and muted greens. It includes a profound navy, #2C3E50, a versatile mid-tone blue, #4A6E8C, and a lighter blue-grey, #8FAABF, evoking the twilight sky. A muted green, #6B9080, adds a natural, earthy element, while a darker blue-grey, #3A5B73, provides depth. This palette is ideal for designers seeking a calm, sophisticated, and nature-inspired aesthetic, reflecting tranquility and profound beauty.

Best used for

  • Nature-inspired branding and web design
  • Calm and intuitive digital interfaces
  • Outdoor apparel and lifestyle brands
  • Tranquil spaces and interior design
  • Photography portfolios (landscape/nature)
  • Sophisticated editorial design

Suggested color roles

primary

Utilize #2C3E50 as a strong, grounding primary for main headings, navigation, or a deep background, representing the heart of twilight.

secondary

Apply #4A6E8C for secondary elements, subheadings, or as a complementary background, reflecting water reflections.

accent

Incorporate #6B9080 as a subtle accent for highlights, decorative elements, or natural textures, suggesting distant forests.

background

Use #8FAABF as a light, expansive background color, providing excellent readability and an open, misty feel.

text

Employ #3A5B73 for body text and important information, ensuring strong readability against lighter backgrounds.

Accessibility notes

  • Text in #2C3E50 or #3A5B73 on an #8FAABF background offers strong contrast and readability.
  • Be cautious using #4A6E8C text on #8FAABF; contrast may be insufficient for accessibility.
  • Ensure interactive elements have clearly distinguishable states, especially when using similar blue-green tones.
  • The muted #6B9080 works best as an accent or with dark text, rather than for small text itself.

Recommended combinations

Deep Dusk

Creates a profound, cool, and stable foundation, perfect for strong branding or deep sections.

#2C3E50 · #3A5B73 · #4A6E8C

Forest Edge

Offers a natural and serene blend, ideal for backgrounds, subtle patterns, or nature-themed visuals.

#6B9080 · #8FAABF · #4A6E8C

Twilight Glow

Provides an expansive and soft combination, suitable for headers, content blocks, or atmospheric designs.

#8FAABF · #4A6E8C · #2C3E50

CSS variables

:root {
  --fjord-twilight-1: #2C3E50;
  --fjord-twilight-2: #4A6E8C;
  --fjord-twilight-3: #8FAABF;
  --fjord-twilight-4: #6B9080;
  --fjord-twilight-5: #3A5B73;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fjord-twilight": {
        1: "#2C3E50",
        2: "#4A6E8C",
        3: "#8FAABF",
        4: "#6B9080",
        5: "#3A5B73",
      }
    }
  }
}

Related searches

nordic twilight paletteserene fjord colorsdeep blue green schemecalm nature designsophisticated dusk hues

Palette colors

Hex values

Color 1#2C3E50
·
Color 2#4A6E8C
·
Color 3#8FAABF
·
Color 4#6B9080
·
Color 5#3A5B73
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
4.5:1AA
3.1:1AA18
1.5:1Fail
2
2:1Fail
2.2:1Fail
1.5:1Fail
1.3:1Fail
3
4.5:1AA
2.2:1Fail
1.5:1Fail
3:1Fail
4
3.1:1AA18
1.5:1Fail
1.5:1Fail
2:1Fail
5
1.5:1Fail
1.3:1Fail
3:1Fail
2:1Fail

Similar palettes

More like Fjord Twilight

View all cool
Alpine Mist
Aquatic Coral Garden
Aquatic Moss Garden
Arctic Northern Bloom
Celestial Oasis Dream
Cerulean Coastline Calm