Back to palettes

Palette

Coastal Fog Drift

Soft, ethereal blues and grays that capture the tranquil mood of a misty coastline.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coastal Fog Drift 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 Coastal Fog Drift.

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

Data visualization

#6A7F8E#9BB0BD#C7D9E0#F0F4F7#4D6470

Palette guide

How to use Coastal Fog Drift

Overview

The Coastal Fog Drift palette features soft, ethereal blues and grays that capture the tranquil mood of a misty coastline. This calming collection ranges from the very light #F0F4F7, through the airy #C7D9E0 and #9BB0BD, to the deeper, grounding blues of #6A7F8E and #4D6470. Designers can leverage these shades to create designs that feel serene, sophisticated, and subtly profound. It’s an ideal choice for projects seeking a clean, modern, and tranquil aesthetic, from corporate branding to architectural visualizations, providing a refreshing yet understated visual experience.

Best used for

  • Corporate branding for tech
  • Architectural visualization
  • Luxury travel agencies
  • Mindfulness and wellness apps
  • Environmental advocacy websites
  • Modern interior design

Suggested color roles

primary

#9BB0BD - A versatile, calming blue-grey, excellent for main content areas or primary UI elements.

secondary

#C7D9E0 - A lighter, airy blue-grey, perfect for supporting sections, subtle headers, or background accents.

accent

#4D6470 - The deepest, most grounding blue-grey, ideal for impactful calls-to-action, icons, or strong textual emphasis.

background

#F0F4F7 - A very light, almost-white blue-grey, providing an expansive, clean, and ethereal canvas.

text

Use #4D6470 or a dark charcoal for body text, ensuring excellent readability against lighter backgrounds.

Accessibility notes

  • Ensure robust contrast for text, especially when pairing lighter shades like #C7D9E0 with text.
  • Pair #F0F4F7 with #4D6470 or black for text to comfortably meet WCAG AA contrast standards.
  • Avoid using #9BB0BD on #C7D9E0 for small text due to potential low contrast.
  • Verify contrast ratios for all interactive elements to ensure universal usability.

Recommended combinations

Misty Horizon

Creates a very light, ethereal foundation, perfect for clean, minimalist interfaces.

#F0F4F7 · #C7D9E0 · #9BB0BD

Deep Ocean

Provides sophisticated depth, ideal for headers, footers, or distinct content sections.

#9BB0BD · #6A7F8E · #4D6470

Clear Serenity

Offers clear text legibility on a light background, with a strong dark blue-grey accent.

#F0F4F7 · #4D6470 · #9BB0BD

CSS variables

:root {
  --coastal-fog-drift-3-1: #6A7F8E;
  --coastal-fog-drift-3-2: #9BB0BD;
  --coastal-fog-drift-3-3: #C7D9E0;
  --coastal-fog-drift-3-4: #F0F4F7;
  --coastal-fog-drift-3-5: #4D6470;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-fog-drift-3": {
        1: "#6A7F8E",
        2: "#9BB0BD",
        3: "#C7D9E0",
        4: "#F0F4F7",
        5: "#4D6470",
      }
    }
  }
}

Related searches

coastal fog blue palettemuted grey blue schemecalm ocean mist colorsserene minimalist designethereal cool tones

Palette colors

Hex values

Color 1#6A7F8E
·
Color 2#9BB0BD
·
Color 3#C7D9E0
·
Color 4#F0F4F7
·
Color 5#4D6470
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
2.9:1Fail
3.8:1AA18
1.5:1Fail
2
1.9:1Fail
1.5:1Fail
2:1Fail
2.8:1Fail
3
2.9:1Fail
1.5:1Fail
1.3:1Fail
4.3:1AA18
4
3.8:1AA18
2:1Fail
1.3:1Fail
5.6:1AA
5
1.5:1Fail
2.8:1Fail
4.3:1AA18
5.6:1AA

Similar palettes

More like Coastal Fog Drift

View all cool
Misty Moors
Seagull Sky Gaze
Azure Coast Serenity
Coastal Breeze Mist
Coastal Fog Drift
Coastal Fog Morning