Back to palettes

Palette

Coastal Fog Drift

Soft, muted grays and hazy whites create a tranquil atmosphere, like a gentle fog rolling in over a calm coastline.

neutralcalm5 colors
More neutral 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

#778899#A9A9A9#B0C4DE#DCDCDC#F0F8FF

Palette guide

How to use Coastal Fog Drift

Overview

The Coastal Fog Drift palette features soft, muted grays and hazy whites, creating a tranquil atmosphere, like a gentle fog rolling in over a calm coastline. This serene collection ranges from the very light #F0F8FF and #DCDCDC, through the balanced #B0C4DE and #A9A9A9, to the grounding blue-grey of #778899 (LightSlateGrey). Designers can leverage these shades to create designs that feel peaceful, sophisticated, and subtly profound. It’s an ideal choice for projects seeking a clean, minimalist, and tranquil aesthetic, from corporate branding to architectural visualizations, providing a refreshing yet understated visual experience.

Best used for

  • Corporate branding
  • Minimalist web design
  • Relaxation app interfaces
  • Architectural firm websites
  • High-end product showcases
  • Serene editorial layouts

Suggested color roles

primary

#A9A9A9 - A versatile mid-tone grey, excellent for main content areas or primary UI elements, offering a clean feel.

secondary

#B0C4DE - A soft, cool blue-grey, perfect for supporting sections, subtle headers, or background accents.

accent

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

background

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

text

Use #778899 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 #DCDCDC with text.
  • Pair #F0F8FF with #778899 or black for text to comfortably meet WCAG AA contrast standards.
  • Avoid using #B0C4DE on #DCDCDC for small text due to potential low contrast.
  • Verify contrast ratios for all interactive elements to ensure universal usability.

Recommended combinations

Hazy Foundation

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

#F0F8FF · #DCDCDC · #B0C4DE

Deep Mist

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

#B0C4DE · #A9A9A9 · #778899

Calm Readability

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

#F0F8FF · #778899 · #A9A9A9

CSS variables

:root {
  --coastal-fog-drift-1: #778899;
  --coastal-fog-drift-2: #A9A9A9;
  --coastal-fog-drift-3: #B0C4DE;
  --coastal-fog-drift-4: #DCDCDC;
  --coastal-fog-drift-5: #F0F8FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-fog-drift": {
        1: "#778899",
        2: "#A9A9A9",
        3: "#B0C4DE",
        4: "#DCDCDC",
        5: "#F0F8FF",
      }
    }
  }
}

Related searches

coastal fog grey palettemuted grey blue schemecalm mist colorsserene minimalist designethereal neutral color scheme

Palette colors

Hex values

Color 1#778899
·
Color 2#A9A9A9
·
Color 3#B0C4DE
·
Color 4#DCDCDC
·
Color 5#F0F8FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2:1Fail
2.7:1Fail
3.4:1AA18
2
1.5:1Fail
1.3:1Fail
1.7:1Fail
2.2:1Fail
3
2:1Fail
1.3:1Fail
1.3:1Fail
1.7:1Fail
4
2.7:1Fail
1.7:1Fail
1.3:1Fail
1.3:1Fail
5
3.4:1AA18
2.2:1Fail
1.7:1Fail
1.3:1Fail

Similar palettes

More like Coastal Fog Drift

View all neutral
Coastal Fog Drift
Misty Mountain Trail
Cloud Forest Mist
Coastal Driftwood Grey
Coastal Driftwood Grey
Coastal Dune Grass