Back to palettes

Palette

Coastal Fog Blanket

Soft, ethereal greys and blues mirroring the hushed atmosphere of a coastal landscape enveloped in a gentle morning fog.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B0C4DE#D3D3D3#F5F5DC#708090#92A8D1

Palette guide

How to use Coastal Fog Blanket

Overview

The Coastal Fog Blanket palette offers soft, ethereal greys and blues, mirroring the hushed atmosphere of a coastal landscape enveloped in a gentle morning fog. This serene collection features the cool blue-grey of #B0C4DE, the versatile greys of #D3D3D3 and #708090 (SlateGray), the warm, almost-white #F5F5DC, and a deeper blue #92A8D1. Designers can leverage these shades to create designs that feel calm, sophisticated, and subtly melancholic. It’s an ideal choice for projects seeking a tranquil, minimalist, and elegant aesthetic, from corporate branding to luxury interiors.

Best used for

  • Corporate branding
  • Luxury interior design
  • Minimalist art platforms
  • Financial services websites
  • High-end product packaging
  • Architectural visualization

Suggested color roles

primary

#B0C4DE - A soft, cool blue-grey, excellent for main content areas or primary UI elements, providing a serene touch.

secondary

#D3D3D3 - A versatile light grey, perfect for supporting sections, subtle backgrounds, or secondary information.

accent

#708090 - A grounding slate grey, ideal for impactful calls-to-action, icons, or strong textual emphasis.

background

#F5F5DC - A warm, creamy off-white, providing an expansive, clean, and inviting 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 #D3D3D3 and text, recommending darker options.
  • Pair #F5F5DC 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

Hushed Base

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

#F5F5DC · #D3D3D3 · #B0C4DE

Foggy Depth

Provides subtle depth and sophistication, ideal for headers, footers, or distinct content sections.

#B0C4DE · #708090 · #92A8D1

Clear Calm

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

#F5F5DC · #708090 · #B0C4DE

CSS variables

:root {
  --coastal-fog-blanket-1: #B0C4DE;
  --coastal-fog-blanket-2: #D3D3D3;
  --coastal-fog-blanket-3: #F5F5DC;
  --coastal-fog-blanket-4: #708090;
  --coastal-fog-blanket-5: #92A8D1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-fog-blanket": {
        1: "#B0C4DE",
        2: "#D3D3D3",
        3: "#F5F5DC",
        4: "#708090",
        5: "#92A8D1",
      }
    }
  }
}

Related searches

coastal fog color palettemuted grey blue schemecalm minimalist designethereal neutral colorsserene morning haze

Palette colors

Hex values

Color 1#B0C4DE
·
Color 2#D3D3D3
·
Color 3#F5F5DC
·
Color 4#708090
·
Color 5#92A8D1
·

Accessibility

Contrast checker

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

Similar palettes

More like Coastal Fog Blanket

View all neutral
Coastal Driftwood Grey
Coastal Fog Drift
Coastal Fog Drift
Quiet Mountain Haze
Silent Harbor Mist
Coastal Driftwood Grey