Back to palettes

Palette

Coastal Dune Haze

Soft, muted tones evoking the hazy light and muted colors of coastal dunes on a foggy morning.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coastal Dune Haze 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 Dune Haze.

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

Data visualization

#B0C4DE#CFCFD0#D3D3D3#E6E6FA#A9A9A9

Palette guide

How to use Coastal Dune Haze

Overview

The Coastal Dune Haze palette offers soft, muted tones evoking the hazy light and muted colors of coastal dunes on a foggy morning. This serene collection features the cool blue-grey of #B0C4DE, alongside versatile greys #CFCFD0, #D3D3D3, and #A9A9A9, complemented by the very light #E6E6FA. Designers can leverage these shades to create designs that feel calm, ethereal, and subtly mysterious. It’s an ideal choice for projects seeking a tranquil, minimalist, and sophisticated aesthetic, from tech interfaces to contemporary branding, providing a refreshing yet understated visual experience.

Best used for

  • Minimalist tech interfaces
  • Contemporary branding
  • Relaxation app themes
  • Art gallery websites
  • Architectural visualization
  • Calm editorial layouts

Suggested color roles

primary

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

secondary

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

accent

#A9A9A9 - A medium grey that provides subtle depth, ideal for soft calls-to-action or important highlights.

background

#E6E6FA - A very light, airy lavender-white, providing a clean, expansive, and ethereal canvas.

text

Use a dark charcoal or black for body text, or #A9A9A9 for legible headings against lighter backgrounds.

Accessibility notes

  • Ensure sufficient contrast between lighter shades like #CFCFD0 and text, recommending darker options.
  • Pair #E6E6FA with #A9A9A9 or black for text to comfortably meet WCAG AA contrast standards.
  • Avoid using #CFCFD0 on #D3D3D3 for small text due to potential low contrast.
  • Verify contrast ratios for all interactive elements to ensure universal usability.

Recommended combinations

Hazy Base

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

#E6E6FA · #D3D3D3 · #CFCFD0

Cool Depth

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

#B0C4DE · #A9A9A9 · #D3D3D3

Clear Calm

Offers clear text legibility on a light background, with a cool accent for visual interest.

#E6E6FA · #A9A9A9 · #B0C4DE

CSS variables

:root {
  --coastal-dune-haze-1: #B0C4DE;
  --coastal-dune-haze-2: #CFCFD0;
  --coastal-dune-haze-3: #D3D3D3;
  --coastal-dune-haze-4: #E6E6FA;
  --coastal-dune-haze-5: #A9A9A9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-dune-haze": {
        1: "#B0C4DE",
        2: "#CFCFD0",
        3: "#D3D3D3",
        4: "#E6E6FA",
        5: "#A9A9A9",
      }
    }
  }
}

Related searches

foggy coastal palettemuted grey blue schemecalm minimalist designethereal neutral colorsserene haze color scheme

Palette colors

Hex values

Color 1#B0C4DE
·
Color 2#CFCFD0
·
Color 3#D3D3D3
·
Color 4#E6E6FA
·
Color 5#A9A9A9
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.2:1Fail
1.4:1Fail
1.3:1Fail
2
1.1:1Fail
1:1Fail
1.3:1Fail
1.5:1Fail
3
1.2:1Fail
1:1Fail
1.2:1Fail
1.6:1Fail
4
1.4:1Fail
1.3:1Fail
1.2:1Fail
1.9:1Fail
5
1.3:1Fail
1.5:1Fail
1.6:1Fail
1.9:1Fail

Similar palettes

More like Coastal Dune Haze

View all neutral
Coastal Driftwood Grey
Coastal Driftwood Hues
Coastal Fog Drift
Coastal Fog Drift
Coastal Pebble Beach
Coastal Stone Haze