Back to palettes

Palette

Coastal Fog Drift

Soft, ethereal greys capture the muted calm and mysterious beauty of a dense fog rolling over a serene 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

#EBEBEB#D9D9D9#B0B0B0#8F8F8F#6E6E6E

Palette guide

How to use Coastal Fog Drift

Overview

The Coastal Fog Drift palette features soft, ethereal greys that capture the muted calm and mysterious beauty of a dense fog rolling over a serene coastline. This monochromatic collection ranges from the very light #EBEBEB and #D9D9D9, through the balanced #B0B0B0 and #8F8F8F, to the deep, grounding #6E6E6E. Designers can leverage these shades to create designs that feel sophisticated, minimalist, and quietly powerful. It’s an ideal choice for projects seeking a clean, modern, and understated aesthetic, from high-tech interfaces to contemporary branding, providing a versatile and elegant visual experience.

Best used for

  • High-tech brand identity
  • Minimalist web interfaces
  • Contemporary art gallery sites
  • Luxury product packaging
  • Architectural portfolios
  • Corporate communication materials

Suggested color roles

primary

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

secondary

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

accent

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

background

#EBEBEB - A very light, almost-white grey, providing an expansive, clean, and minimalist canvas.

text

Use #6E6E6E or a pure black for body text, ensuring excellent readability against the lighter palette colors.

Accessibility notes

  • Ensure robust contrast for text, especially when pairing lighter greys like #D9D9D9 with text.
  • Pair #EBEBEB with #6E6E6E or black for text to comfortably meet WCAG AA contrast standards.
  • Avoid using #B0B0B0 on #D9D9D9 for small text due to potential low contrast.
  • Verify contrast ratios for all interactive elements to ensure universal usability.

Recommended combinations

Light Monochrome

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

#EBEBEB · #D9D9D9 · #B0B0B0

Deep Grey

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

#B0B0B0 · #8F8F8F · #6E6E6E

Clean Contrast

Offers clear text legibility on a light background, with a strong dark grey accent for visual interest.

#EBEBEB · #6E6E6E · #B0B0B0

CSS variables

:root {
  --coastal-fog-drift-2-1: #EBEBEB;
  --coastal-fog-drift-2-2: #D9D9D9;
  --coastal-fog-drift-2-3: #B0B0B0;
  --coastal-fog-drift-2-4: #8F8F8F;
  --coastal-fog-drift-2-5: #6E6E6E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-fog-drift-2": {
        1: "#EBEBEB",
        2: "#D9D9D9",
        3: "#B0B0B0",
        4: "#8F8F8F",
        5: "#6E6E6E",
      }
    }
  }
}

Related searches

monochromatic grey palettecalm fog colorsminimalist grey designcoastal mist aestheticsubtle neutral color scheme

Palette colors

Hex values

Color 1#EBEBEB
·
Color 2#D9D9D9
·
Color 3#B0B0B0
·
Color 4#8F8F8F
·
Color 5#6E6E6E
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.8:1Fail
2.7:1Fail
4.3:1AA18
2
1.2:1Fail
1.5:1Fail
2.3:1Fail
3.6:1AA18
3
1.8:1Fail
1.5:1Fail
1.5:1Fail
2.4:1Fail
4
2.7:1Fail
2.3:1Fail
1.5:1Fail
1.6:1Fail
5
4.3:1AA18
3.6:1AA18
2.4:1Fail
1.6:1Fail

Similar palettes

More like Coastal Fog Drift

View all neutral
Coastal Driftwood Grey
Coastal Fog Drift
Seaside Cottage Grey
Coastal Driftwood Grey
Coastal Dune Grass
Coastal Dune Haze