Back to palettes

Palette

Coastal Fog Morning

Reflects the soft, muted tones of a misty morning by the tranquil sea.

NeutralCalm5 colors
More Neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coastal Fog Morning 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 Morning.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#A9A9A9#708090#D3D3D3#B0C4DE#F0F8FF

Palette guide

How to use Coastal Fog Morning

Overview

The Coastal Fog Morning palette reflects the soft, muted tones of a misty morning by the tranquil sea. This serene collection features the very light #F0F8FF, the versatile light grey #D3D3D3, the calming blue-grey of #B0C4DE, and the grounding greys of #A9A9A9 and #708090 (SlateGray). Designers can leverage these shades to create designs that feel peaceful, sophisticated, and subtly melancholic. It’s an ideal choice for projects seeking a clean, minimalist, and tranquil aesthetic, from corporate branding to luxury interiors, 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

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

accent

#708090 - The deepest, most grounding slate 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 #708090 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 #D3D3D3 with text.
  • Pair #F0F8FF with #708090 or black for text to comfortably meet WCAG AA contrast standards.
  • Avoid using #B0C4DE on #D3D3D3 for small text due to potential low contrast.
  • Verify contrast ratios for all interactive elements to ensure universal usability.

Recommended combinations

Misty Foundation

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

#F0F8FF · #D3D3D3 · #B0C4DE

Deep Grey

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

#A9A9A9 · #708090 · #D3D3D3

Calm Readability

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

#F0F8FF · #708090 · #A9A9A9

CSS variables

:root {
  --coastal-fog-morning-2-1: #A9A9A9;
  --coastal-fog-morning-2-2: #708090;
  --coastal-fog-morning-2-3: #D3D3D3;
  --coastal-fog-morning-2-4: #B0C4DE;
  --coastal-fog-morning-2-5: #F0F8FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-fog-morning-2": {
        1: "#A9A9A9",
        2: "#708090",
        3: "#D3D3D3",
        4: "#B0C4DE",
        5: "#F0F8FF",
      }
    }
  }
}

Related searches

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

Palette colors

Hex values

Color 1#A9A9A9
·
Color 2#708090
·
Color 3#D3D3D3
·
Color 4#B0C4DE
·
Color 5#F0F8FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
1.6:1Fail
1.3:1Fail
2.2:1Fail
2
1.7:1Fail
2.7:1Fail
2.3:1Fail
3.8:1AA18
3
1.6:1Fail
2.7:1Fail
1.2:1Fail
1.4:1Fail
4
1.3:1Fail
2.3:1Fail
1.2:1Fail
1.7:1Fail
5
2.2:1Fail
3.8:1AA18
1.4:1Fail
1.7:1Fail

Similar palettes

More like Coastal Fog Morning

View all Neutral
Misty Morning Haze
Whispering Meadow Mist
Clouded Moon Reflection
Foggy Pine Retreat
Oceanic Driftwood Shore
Pebble Shore