Back to palettes

Palette

Coastal Fog Drift

Soft, atmospheric colors of a foggy morning by the sea, peaceful and slightly melancholic.

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

#D8D8D8#A3B2BB#5F9EA0#BBA697#708090

Palette guide

How to use Coastal Fog Drift

Overview

The Coastal Fog Drift palette offers soft, atmospheric colors of a foggy morning by the sea, peaceful and slightly melancholic. This versatile collection includes the light grey #D8D8D8, the cool blue-grey #A3B2BB, a striking blue-green #5F9EA0 (CadetBlue), a warm beige #BBA697, and a grounding grey #708090. Designers can leverage these shades to create designs that feel tranquil, contemplative, and subtly sophisticated. It’s an ideal choice for projects seeking a balanced, modern, and atmospheric aesthetic, from conceptual art to thoughtful branding, providing a unique and inviting visual experience.

Best used for

  • Conceptual art websites
  • Thoughtful branding projects
  • Meditation app interfaces
  • Coastal tourism marketing
  • Interior design for calm spaces
  • Editorial design with natural themes

Suggested color roles

primary

#A3B2BB - A versatile, cool blue-grey, excellent for main content areas or primary UI elements, offering a serene touch.

secondary

#BBA697 - A warm, grounding beige, perfect for supporting sections, subtle headers, or complementary accents.

accent

#5F9EA0 - A distinctive blue-green, used sparingly for impactful calls-to-action, icons, or refreshing highlights.

background

#D8D8D8 - A clean, light grey that provides an expansive, neutral, and modern canvas.

text

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

Accessibility notes

  • Ensure sufficient contrast between lighter shades like #D8D8D8 and text, recommending darker options.
  • Pair #D8D8D8 with #708090 or black for text to comfortably meet WCAG AA contrast standards.
  • Avoid using #A3B2BB on #D8D8D8 for small text due to potential low contrast.
  • Verify contrast ratios for all interactive elements, especially the accent color #5F9EA0.

Recommended combinations

Misty Morning

Creates a light, atmospheric foundation, blending cool greys and a warm beige.

#D8D8D8 · #A3B2BB · #BBA697

Ocean Depth

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

#A3B2BB · #5F9EA0 · #708090

Balanced Contrast

Offers clear text legibility on a light background, with a grounding grey and a vibrant blue-green accent.

#D8D8D8 · #708090 · #5F9EA0

CSS variables

:root {
  --coastal-fog-drift-6-1: #D8D8D8;
  --coastal-fog-drift-6-2: #A3B2BB;
  --coastal-fog-drift-6-3: #5F9EA0;
  --coastal-fog-drift-6-4: #BBA697;
  --coastal-fog-drift-6-5: #708090;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-fog-drift-6": {
        1: "#D8D8D8",
        2: "#A3B2BB",
        3: "#5F9EA0",
        4: "#BBA697",
        5: "#708090",
      }
    }
  }
}

Related searches

atmospheric coastal palettemuted blue green schemecalm foggy ocean colorsserene melancholic designbalanced cool warm palette

Palette colors

Hex values

Color 1#D8D8D8
·
Color 2#A3B2BB
·
Color 3#5F9EA0
·
Color 4#BBA697
·
Color 5#708090
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.1:1Fail
1.6:1Fail
2.8:1Fail
2
1.5:1Fail
1.4:1Fail
1.1:1Fail
1.9:1Fail
3
2.1:1Fail
1.4:1Fail
1.3:1Fail
1.3:1Fail
4
1.6:1Fail
1.1:1Fail
1.3:1Fail
1.7:1Fail
5
2.8:1Fail
1.9:1Fail
1.3:1Fail
1.7:1Fail

Similar palettes

More like Coastal Fog Drift

View all cool
Shoreline Serenity Mist
Aegean Isle Horizon
Azure Coast Serenity
Coastal Breeze Mist
Coastal Cliff Retreat
Coastal Seafoam Spray