Palette

Coastal Fog Drift

A serene palette capturing the muted, cool tones of a misty morning by the rugged 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

#CBD4DA#A3ABB5#77808C#4B5664#2A313C

Palette guide

How to use Coastal Fog Drift

Overview

The Coastal Fog Drift palette captures the muted, cool tones of a misty morning by the rugged coastline, offering a serene and sophisticated aesthetic. This deep, cool collection ranges from the light grey-blue of #CBD4DA and #A3ABB5, through the balanced #77808C, to the rich, grounding shades of #4B5664 and #2A313C. Designers can leverage these shades to create designs that feel serious, elegant, and quietly powerful. It’s an ideal choice for projects seeking a modern, minimalist, and mature aesthetic, from corporate branding to luxury tech interfaces, providing a cohesive and impactful visual experience.

Best used for

Luxury tech branding
Corporate web design
High-end automotive interfaces
Minimalist fashion photography
Architectural firm portfolios
Professional services marketing

Suggested color roles

primary

#77808C - A versatile, cool mid-tone grey-blue, excellent for main content areas or primary UI elements.

secondary

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

accent

#2A313C - The deepest, most grounding color, ideal for impactful calls-to-action, icons, or strong textual emphasis.

background

#CBD4DA - A very light, cool grey-blue, providing an expansive, clean, and modern canvas.

text

Use #2A313C 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 shades like #A3ABB5 with text.
Pair #CBD4DA with #2A313C or black for text to comfortably meet WCAG AA contrast standards.
Avoid using #77808C on #A3ABB5 for small text due to potential low contrast.
Verify contrast ratios for all interactive elements to ensure universal usability.

Recommended combinations

Misty Gradient

Creates a subtle, cool gradient for backgrounds or layered content, offering a sophisticated feel.

#CBD4DA · #A3ABB5 · #77808C

Deep Ocean

Provides strong depth and elegance, ideal for headers, footers, or impactful sections.

#77808C · #4B5664 · #2A313C

Clean & Modern

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

#CBD4DA · #2A313C · #A3ABB5

CSS variables

:root {
  --coastal-fog-drift-5-1: #CBD4DA;
  --coastal-fog-drift-5-2: #A3ABB5;
  --coastal-fog-drift-5-3: #77808C;
  --coastal-fog-drift-5-4: #4B5664;
  --coastal-fog-drift-5-5: #2A313C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-fog-drift-5": {
        1: "#CBD4DA",
        2: "#A3ABB5",
        3: "#77808C",
        4: "#4B5664",
        5: "#2A313C",
      }
    }
  }
}

Hex values

Color 1#CBD4DA

Color 2#A3ABB5

Color 3#77808C

Color 4#4B5664

Color 5#2A313C

Accessibility

Contrast checker

1.5:1Fail

2.7:1Fail

5:1AA

8.7:1AAA

1.5:1Fail

1.7:1Fail

3.2:1AA18

5.6:1AA

2.7:1Fail

1.7:1Fail

1.9:1Fail

3.3:1AA18

5:1AA

3.2:1AA18

1.9:1Fail

1.8:1Fail

8.7:1AAA

5.6:1AA

3.3:1AA18

1.8:1Fail

Similar palettes

More like Coastal Fog Drift

Aegean Coast Serenity

Azure Coastline Calm

Azure Horizon