Back to palettes

Palette

Serene Coastal Fog

Soft, ethereal blues and greys blend seamlessly, creating the hushed tranquility of a foggy shoreline morning.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A2ADB6#BDC8CF#DAE1E7#F2F5F7#85959E

Palette guide

How to use Serene Coastal Fog

Overview

The Serene Coastal Fog palette blends soft, ethereal blues and greys, seamlessly creating the hushed tranquility of a foggy shoreline morning. With muted tones ranging from the grounding #85959E to the light #F2F5F7, and including the versatile #A2ADB6, this collection offers a sophisticated, calming foundation for any design. Designers can leverage its subtle elegance for branding that seeks a peaceful, understated appeal. Developers will find these hex codes ideal for creating user interfaces that evoke a sense of calm, spaciousness, and gentle sophistication, avoiding harsh contrasts for a harmonious visual experience.

Best used for

  • Coastal-themed interior design websites
  • Wellness and meditation apps
  • Minimalist photography portfolios
  • Spa or retreat branding
  • Calm corporate websites
  • Weather or atmospheric data visualizations

Suggested color roles

primary

Use #85959E for main navigation, sturdy headers, or primary content blocks to establish a grounded, calm feel.

secondary

Apply #A2ADB6 for subheadings, borders, or secondary information, offering gentle depth and clarity.

accent

Employ #BDC8CF sparingly for subtle highlights or interactive elements that need a touch of emphasis without being jarring.

background

Utilize #F2F5F7 as a soft, almost white background to provide a clean, readable, and airy canvas.

text

For body text, #85959E offers excellent readability on lighter backgrounds; a dark charcoal can also be used for maximum contrast.

Accessibility notes

  • Ensure sufficient contrast when using #85959E or #A2ADB6 for text on lighter backgrounds like #F2F5F7.
  • Avoid pairing #BDC8CF with #DAE1E7 for small text to maintain readability due to potential low contrast.
  • Use #F2F5F7 as the primary background for content to ensure maximum legibility for most users.
  • Always verify color combinations against WCAG guidelines, especially for interactive elements and form fields.

Recommended combinations

Foggy Horizon

Ideal for clear headings on a light background with a supporting element, creating a gentle hierarchy.

#85959E · #F2F5F7 · #A2ADB6

Muted Depths

Creates a sophisticated, layered look suitable for content sections or subtle graphic elements.

#A2ADB6 · #DAE1E7 · #85959E

Ethereal Gradient

Excellent for background gradients or large visual elements that require a soft, ethereal quality.

#BDC8CF · #DAE1E7 · #F2F5F7

CSS variables

:root {
  --serene-coastal-fog-1: #A2ADB6;
  --serene-coastal-fog-2: #BDC8CF;
  --serene-coastal-fog-3: #DAE1E7;
  --serene-coastal-fog-4: #F2F5F7;
  --serene-coastal-fog-5: #85959E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "serene-coastal-fog": {
        1: "#A2ADB6",
        2: "#BDC8CF",
        3: "#DAE1E7",
        4: "#F2F5F7",
        5: "#85959E",
      }
    }
  }
}

Related searches

coastal grey blue paletteserene muted colorsfoggy landscape web designcalm blue grey hex codespeaceful ocean tones

Palette colors

Hex values

Color 1#A2ADB6
·
Color 2#BDC8CF
·
Color 3#DAE1E7
·
Color 4#F2F5F7
·
Color 5#85959E
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.7:1Fail
2.1:1Fail
1.4:1Fail
2
1.3:1Fail
1.3:1Fail
1.6:1Fail
1.8:1Fail
3
1.7:1Fail
1.3:1Fail
1.2:1Fail
2.3:1Fail
4
2.1:1Fail
1.6:1Fail
1.2:1Fail
2.8:1Fail
5
1.4:1Fail
1.8:1Fail
2.3:1Fail
2.8:1Fail

Similar palettes

More like Serene Coastal Fog

View all cool
Coastal Fog Drift
Aegean Isle Horizon
Azure Coast Serenity
Coastal Cliff Retreat
Coastal Fog
Coastal Fog Drift