Back to palettes

Palette

Coastal Fog Drift

Whispers of the sea mist rolling over the coastline, creating a serene and muted natural tableau.

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

#8FBC8F#A9B2AC#B0E0E6#D3D3D3#6495ED

Palette guide

How to use Coastal Fog Drift

Overview

The Coastal Fog Drift palette whispers of sea mist rolling over the coastline, creating a serene and muted natural tableau. This calming collection features the soft sage of #8FBC8F, a unique green-grey #A9B2AC, the refreshing light blue of #B0E0E6, a versatile grey #D3D3D3, and a deeper blue #6495ED. Designers can leverage these shades to create designs that feel tranquil, harmonious, and subtly refreshing. It’s an ideal choice for projects seeking an organic, calming, and sophisticated aesthetic, from nature-inspired branding to serene digital interfaces, providing a balanced and inviting visual experience.

Best used for

  • Nature-inspired branding
  • Eco-tourism websites
  • Wellness app interfaces
  • Coastal landscape photography
  • Sustainable product design
  • Calm editorial layouts

Suggested color roles

primary

#A9B2AC - A versatile green-grey, excellent for main content areas or primary UI elements, offering a natural feel.

secondary

#B0E0E6 - A refreshing light blue, perfect for supporting sections, subtle headers, or background accents.

accent

#6495ED - The deepest blue, ideal for impactful calls-to-action, icons, or strong highlights, adding a touch of depth.

background

#D3D3D3 - A versatile light grey that provides a clean, neutral, and expansive canvas for design elements.

text

Use a dark charcoal or black for body text, or #6495ED for legible headings against lighter backgrounds.

Accessibility notes

  • Ensure sufficient contrast for text, especially when pairing lighter shades like #B0E0E6 with text.
  • Pair #D3D3D3 with #6495ED or black for text to comfortably meet WCAG AA contrast standards.
  • Avoid using #A9B2AC on #B0E0E6 for small text due to potential low contrast.
  • Verify contrast ratios for all interactive elements to ensure universal usability.

Recommended combinations

Misty Greens

Creates a soft, natural base, blending greys and greens for serene backgrounds.

#D3D3D3 · #A9B2AC · #8FBC8F

Ocean Breeze

Provides refreshing depth, ideal for headers, footers, or distinct content sections with cool tones.

#B0E0E6 · #6495ED · #A9B2AC

Calm Readability

Offers clear text legibility on a light background, with a strong blue and a soft green accent.

#D3D3D3 · #6495ED · #8FBC8F

CSS variables

:root {
  --coastal-fog-drift-4-1: #8FBC8F;
  --coastal-fog-drift-4-2: #A9B2AC;
  --coastal-fog-drift-4-3: #B0E0E6;
  --coastal-fog-drift-4-4: #D3D3D3;
  --coastal-fog-drift-4-5: #6495ED;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-fog-drift-4": {
        1: "#8FBC8F",
        2: "#A9B2AC",
        3: "#B0E0E6",
        4: "#D3D3D3",
        5: "#6495ED",
      }
    }
  }
}

Related searches

coastal mist palettemuted green blue schemecalm fog colorsserene ocean designnatural cool tones

Palette colors

Hex values

Color 1#8FBC8F
·
Color 2#A9B2AC
·
Color 3#B0E0E6
·
Color 4#D3D3D3
·
Color 5#6495ED
·

Accessibility

Contrast checker

1
2
3
4
5
1
1:1Fail
1.5:1Fail
1.4:1Fail
1.4:1Fail
2
1:1Fail
1.5:1Fail
1.5:1Fail
1.4:1Fail
3
1.5:1Fail
1.5:1Fail
1:1Fail
2.1:1Fail
4
1.4:1Fail
1.5:1Fail
1:1Fail
2:1Fail
5
1.4:1Fail
1.4:1Fail
2.1:1Fail
2:1Fail

Similar palettes

More like Coastal Fog Drift

View all cool
Coastal Fog Drift
Coastal Mist Horizon
Hidden Cove Shimmer
Misty Alpine Ridge
Aegean Isle Horizon
Alpine Lake Serene