Palette

Coastal Fog Morning

Soft, muted tones reflecting the serene and ethereal beauty of a foggy coastal morning.

coolcalm5 colors

More cool 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

#9EA8AF#BFC7CB#DDE3E6#848D93#A5B0B5

Palette guide

How to use Coastal Fog Morning

Overview

The Coastal Fog Morning palette offers a tranquil and ethereal collection of cool, muted tones perfect for evoking serenity. With a primary focus on soft greys and subtle blues, this palette features shades like #9EA8AF (a muted blue-grey), #BFC7CB (a lighter, airy grey), and #DDE3E6 (an almost white fog hue). These colors are ideal for creating designs that exude calm, clarity, and understated elegance. Developers will find them versatile for backgrounds, subtle UI elements, and overall branding where a peaceful, sophisticated aesthetic is desired. The darker #848D93 provides grounding, while #A5B0B5 acts as a gentle mid-tone. This palette is excellent for projects aiming for a soft, professional, and soothing visual experience.

Best used for

Serene website backgrounds
Minimalist brand identities
Spa and wellness marketing materials
Calm mobile app interfaces
Editorial layouts with soft imagery
Interior design mood boards

Suggested color roles

primary

Use #9EA8AF as a foundational color for large sections, navigation bars, or primary UI elements to establish a calm and sophisticated base.

secondary

Apply #BFC7CB for secondary content areas, subtle dividers, or background elements that need to feel light and airy without being stark white.

accent

Employ #848D93 sparingly for subtle highlights, calls-to-action that need a soft emphasis, or icons where a gentle contrast is desired.

background

Ideal for main page backgrounds, modals, or large canvas areas, #DDE3E6 provides a clean, expansive, and ethereal foundation.

text

For readability, use #848D93 for body text on lighter backgrounds, or a dark charcoal like #333333 for stronger contrast against very light shades like #DDE3E6.

Accessibility notes

Ensure sufficient contrast between #848D93 text and lighter backgrounds like #DDE3E6.
Avoid using #BFC7CB text on #DDE3E6 backgrounds due to low contrast for most users.
Use a tool to check WCAG compliance, especially for interactive elements.
Consider providing a high-contrast mode for users with visual impairments, as this palette is generally low contrast.

Recommended combinations

Soft Contrast

Excellent for clean hero sections with dark text on a light background, softened by a mid-tone element.

#DDE3E6 · #848D93 · #A5B0B5

Misty Gradient

Create subtle, atmospheric gradients or visual transitions in UI elements and banners.

#9EA8AF · #BFC7CB · #DDE3E6

Layered Calm

Use for layering content blocks, where each shade denotes a slight hierarchical shift or depth.

#BFC7CB · #A5B0B5 · #9EA8AF

CSS variables

:root {
  --coastal-fog-morning-1: #9EA8AF;
  --coastal-fog-morning-2: #BFC7CB;
  --coastal-fog-morning-3: #DDE3E6;
  --coastal-fog-morning-4: #848D93;
  --coastal-fog-morning-5: #A5B0B5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-fog-morning": {
        1: "#9EA8AF",
        2: "#BFC7CB",
        3: "#DDE3E6",
        4: "#848D93",
        5: "#A5B0B5",
      }
    }
  }
}

Hex values

Color 1#9EA8AF

Color 2#BFC7CB

Color 3#DDE3E6

Color 4#848D93

Color 5#A5B0B5

Accessibility

Contrast checker

1.4:1Fail

1.9:1Fail

1.4:1Fail

1.1:1Fail

1.4:1Fail

1.3:1Fail

2:1Fail

1.3:1Fail

1.9:1Fail

1.3:1Fail

2.6:1Fail

1.7:1Fail

1.4:1Fail

2:1Fail

2.6:1Fail

1.5:1Fail

1.1:1Fail

1.3:1Fail

1.7:1Fail

1.5:1Fail

Similar palettes

More like Coastal Fog Morning

Coastal Fog Morning

See it in context.

Ready when you are.

Built with Coastal Fog Morning.

How to use Coastal Fog Morning

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Soft Contrast

Misty Gradient

Layered Calm

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Coastal Fog Morning