Palette

Fjord Whisper Mist

Soft blues and greys evoke the tranquil ascent of mist over towering Nordic fjords at dawn.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B0C4DE#778899#F5F5F5#6A8EAE#D6E0EE

Palette guide

How to use Fjord Whisper Mist

Overview

The 'Fjord Whisper Mist' palette offers a serene and sophisticated collection of cool blues and soft greys, evoking the tranquil beauty of Nordic landscapes. Featuring the calming light blue of #B0C4DE, the muted grey of #778899, and the crisp near-white of #F5F5F5, this palette is ideal for creating designs that exude peace and clarity. Designers will find the deeper blue #6A8EAE provides a strong anchor, while #D6E0EE adds a lighter, airy touch. This versatile set is perfect for digital interfaces, corporate branding, or editorial layouts seeking a clean, minimalist aesthetic, ensuring a cohesive and professional visual experience.

Best used for

Minimalist website designs
Corporate and professional branding
Healthcare or wellness applications
Travel and tourism marketing (Nordic theme)
Editorial design for tranquil content
Interior design mood boards

Suggested color roles

primary

#6A8EAE - Use for main headings, primary call-to-action buttons, or key interactive elements to establish a calm yet authoritative presence.

secondary

#B0C4DE - Excellent for subheadings, secondary buttons, or large background sections requiring a soft, inviting blue tone.

accent

#778899 - A sophisticated grey for subtle accents, icons, dividers, or small informational text, providing quiet contrast without harshness.

background

#F5F5F5 - A clean, almost white background that ensures optimal readability and a sense of spaciousness and purity.

text

#778899 - Ideal for body text against lighter backgrounds like #F5F5F5, ensuring good readability. For higher contrast, consider a dark charcoal like #333333.

Accessibility notes

Ensure sufficient contrast between #778899 text and #F5F5F5 background, especially for smaller font sizes.
Use #6A8EAE for interactive elements and check its WCAG contrast ratios against adjacent background colors.
Avoid placing #D6E0EE text directly on #F5F5F5 for critical information due to potentially low contrast.
For extensive body copy, consider a darker text color like black or dark grey to enhance readability for all users.

Recommended combinations

Misty Horizon

For header banners or hero sections, creating a serene, open feel that draws the eye.

#6A8EAE · #B0C4DE · #F5F5F5

Calm Depth

Ideal for data visualizations or informational graphics, balancing depth with clarity and a cool tone.

#778899 · #6A8EAE · #D6E0EE

Soft Contrast

Effective for content cards, UI elements, or subtle branding where a light base needs soft, defined borders.

#F5F5F5 · #B0C4DE · #778899

CSS variables

:root {
  --fjord-whisper-mist-1: #B0C4DE;
  --fjord-whisper-mist-2: #778899;
  --fjord-whisper-mist-3: #F5F5F5;
  --fjord-whisper-mist-4: #6A8EAE;
  --fjord-whisper-mist-5: #D6E0EE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fjord-whisper-mist": {
        1: "#B0C4DE",
        2: "#778899",
        3: "#F5F5F5",
        4: "#6A8EAE",
        5: "#D6E0EE",
      }
    }
  }
}

Hex values

Color 1#B0C4DE

Color 2#778899

Color 3#F5F5F5

Color 4#6A8EAE

Color 5#D6E0EE

Accessibility

Contrast checker

2:1Fail

1.6:1Fail

1.9:1Fail

1.3:1Fail

2:1Fail

3.3:1AA18

1.1:1Fail

2.7:1Fail

1.6:1Fail

3.3:1AA18

3.2:1AA18

1.2:1Fail

1.9:1Fail

1.1:1Fail

3.2:1AA18

2.6:1Fail

1.3:1Fail

2.7:1Fail

1.2:1Fail

2.6:1Fail

Similar palettes

More like Fjord Whisper Mist