Back to palettes

Palette

Coastal Fog Retreat

Soft, muted tones evoking the quiet calm of a foggy morning by the serene coast.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#778899#A9A9A9#B0C4DE#D3D3D3#F5F5F5

Palette guide

How to use Coastal Fog Retreat

Overview

The Coastal Fog Retreat palette offers a serene collection of cool greys and muted blues, capturing the essence of a tranquil, misty morning. This palette features inviting shades like the soft blue-grey #B0C4DE, the versatile mid-grey #A9A9A9, and the grounding deep blue-grey #778899. Complemented by the airy #D3D3D3 and the near-white #F5F5F5, these colors are perfect for creating designs that convey calm, sophistication, and a sense of peaceful retreat. Developers will find them excellent for crafting elegant user interfaces, luxurious branding, and soothing digital environments that prioritize a gentle and refined aesthetic.

Best used for

  • Wellness and spa branding
  • Luxury lifestyle websites
  • Editorial layouts for tranquil content
  • Minimalist interior design concepts
  • Calm mobile application themes
  • High-end product packaging

Suggested color roles

primary

Use #B0C4DE as a prominent, calming blue-grey for main sections, headers, or large graphical elements.

secondary

Apply #A9A9A9 for secondary information, subtle navigation, or to add a neutral, balancing tone to layouts.

accent

Employ #778899 for impactful but soft calls-to-action, important text, or as a sophisticated border color to provide gentle depth.

background

The lightest shade, #F5F5F5, is ideal for clean, expansive backgrounds, offering an ethereal and airy canvas.

text

For optimal readability, use #778899 on lighter backgrounds like #F5F5F5, or a dark grey like #444444 for stronger contrast.

Accessibility notes

  • Ensure sufficient contrast for #778899 text against #F5F5F5 or #D3D3D3 backgrounds.
  • Avoid using #D3D3D3 or #A9A9A9 for small text on #F5F5F5, as contrast may be insufficient.
  • Always test color combinations with a WCAG contrast checker for compliance.
  • This palette leans towards low contrast, so prioritize text readability carefully and consider accessibility features.

Recommended combinations

Gentle Fade

Create subtle, atmospheric gradients or layered background effects for a soft visual transition.

#F5F5F5 · #D3D3D3 · #B0C4DE

Deep Calm

Ideal for main content blocks, with a primary blue-grey, secondary neutral, and a grounding darker accent.

#B0C4DE · #A9A9A9 · #778899

Soft Emphasis

Use for clear text on a clean background, with a mid-tone for supporting elements or subtle dividers.

#F5F5F5 · #778899 · #A9A9A9

CSS variables

:root {
  --coastal-fog-retreat-1: #778899;
  --coastal-fog-retreat-2: #A9A9A9;
  --coastal-fog-retreat-3: #B0C4DE;
  --coastal-fog-retreat-4: #D3D3D3;
  --coastal-fog-retreat-5: #F5F5F5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-fog-retreat": {
        1: "#778899",
        2: "#A9A9A9",
        3: "#B0C4DE",
        4: "#D3D3D3",
        5: "#F5F5F5",
      }
    }
  }
}

Related searches

calm blue grey paletteserene coastal retreatmuted cool toneselegant grey blue schemesubtle web design colors

Palette colors

Hex values

Color 1#778899
·
Color 2#A9A9A9
·
Color 3#B0C4DE
·
Color 4#D3D3D3
·
Color 5#F5F5F5
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2:1Fail
2.4:1Fail
3.3:1AA18
2
1.5:1Fail
1.3:1Fail
1.6:1Fail
2.2:1Fail
3
2:1Fail
1.3:1Fail
1.2:1Fail
1.6:1Fail
4
2.4:1Fail
1.6:1Fail
1.2:1Fail
1.4:1Fail
5
3.3:1AA18
2.2:1Fail
1.6:1Fail
1.4:1Fail

Similar palettes

More like Coastal Fog Retreat

View all cool
Cloudy Dawn Whisper
Coastal Cliff Retreat
Aegean Isle Horizon
Alpine Morning Mist
Azure Coast Serenity
Celestial Dreamscape