Back to palettes

Palette

Fjord Mist Ascent

Cool, atmospheric blues and greys capturing the hazy, majestic ascent over a misty fjord.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#728D9A#9ABCCA#ADC8D5#CED9E1#5D727B

Palette guide

How to use Fjord Mist Ascent

Overview

The Fjord Mist Ascent palette captures the cool, atmospheric beauty of a hazy, majestic ascent over a misty fjord. This collection of blues and greys includes a deep blue-grey, #5D727B, and a versatile mid-dark blue-grey, #728D9A. Lighter, ethereal blue-greys, #9ABCCA and #ADC8D5, evoke the softness of mist, while a very light grey-blue, #CED9E1, provides an expansive feel. It's an ideal palette for designs seeking a tranquil, sophisticated, and atmospheric aesthetic, reflecting serenity and natural grandeur.

Best used for

  • Wellness and mindfulness brands
  • Serene travel blogs and photography
  • Minimalist and sophisticated corporate identities
  • Calming digital interfaces and apps
  • Spa and relaxation environment design
  • Nature-inspired editorial content

Suggested color roles

primary

Utilize #5D727B as a strong, grounding primary for main headings, navigation, or deep background sections, anchoring the design.

secondary

Apply #728D9A for secondary elements, subheadings, or as a complementary background, reflecting misty depths.

accent

Incorporate #9ABCCA as a soft accent for highlights, hover states, or subtle graphic elements, suggesting atmospheric light.

background

Use #CED9E1 as a light, expansive background color, providing excellent readability and an ethereal, open feel.

text

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

Accessibility notes

  • Text in #5D727B or #728D9A on a #CED9E1 background offers strong contrast and readability.
  • Be cautious using #9ABCCA or #ADC8D5 for small text elements; ensure sufficient contrast against their background.
  • Ensure interactive elements have clearly distinguishable states, especially when using similar grey-blue tones.
  • Avoid pairing #ADC8D5 text on #CED9E1 as the contrast will likely be insufficient.

Recommended combinations

Misty Peaks

Creates a layered, deep, and atmospheric feel, perfect for conveying depth and serenity.

#5D727B · #728D9A · #9ABCCA

Hazy Horizon

Offers a light and expansive combination, ideal for backgrounds, headers, or subtle visual storytelling.

#CED9E1 · #ADC8D5 · #728D9A

Calm Ascent

Provides a balanced and serene blend, suitable for content blocks or a tranquil brand presence.

#9ABCCA · #5D727B · #CED9E1

CSS variables

:root {
  --fjord-mist-ascent-1: #728D9A;
  --fjord-mist-ascent-2: #9ABCCA;
  --fjord-mist-ascent-3: #ADC8D5;
  --fjord-mist-ascent-4: #CED9E1;
  --fjord-mist-ascent-5: #5D727B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fjord-mist-ascent": {
        1: "#728D9A",
        2: "#9ABCCA",
        3: "#ADC8D5",
        4: "#CED9E1",
        5: "#5D727B",
      }
    }
  }
}

Related searches

misty fjord colorscalm blue grey paletteatmospheric designnordic cool tonesserene landscape hues

Palette colors

Hex values

Color 1#728D9A
·
Color 2#9ABCCA
·
Color 3#ADC8D5
·
Color 4#CED9E1
·
Color 5#5D727B
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2:1Fail
2.4:1Fail
1.4:1Fail
2
1.7:1Fail
1.2:1Fail
1.4:1Fail
2.5:1Fail
3
2:1Fail
1.2:1Fail
1.2:1Fail
2.9:1Fail
4
2.4:1Fail
1.4:1Fail
1.2:1Fail
3.5:1AA18
5
1.4:1Fail
2.5:1Fail
2.9:1Fail
3.5:1AA18

Similar palettes

More like Fjord Mist Ascent

View all cool
Cloud Capped Peaks
Cloud Peak Summit
Alpine Mist
Fjord Whisper Mist
Misty Alpine Dawn
Misty Alpine Heights