Back to palettes

Palette

Coastal Dune Breeze

Soft, muted tones of sand and dried grasses reflect the serene tranquility of coastal dunes.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F0EAD6#D4CDB7#B8B29C#9CAD98#82928C

Palette guide

How to use Coastal Dune Breeze

Overview

The "Coastal Dune Breeze" palette offers a serene collection of soft, muted tones of sand and dried grasses, perfectly reflecting the tranquil beauty of coastal dunes. From the light, airy #F0EAD6 to the deeper, grounding #82928C, this palette provides a harmonious gradient. The intermediate shades of #D4CDB7, #B8B29C, and #9CAD98 introduce varied warmth and subtle green undertones, ideal for creating organic and calming designs. This collection is perfect for designers seeking to convey natural authenticity, peacefulness, and a timeless connection to the earth, evoking a sense of quiet calm and understated elegance.

Best used for

  • Eco-friendly product branding
  • Nature-inspired interior design
  • Spa and wellness marketing materials
  • E-commerce for sustainable goods
  • Photography portfolios (landscape, natural)
  • Mindfulness and meditation app interfaces

Suggested color roles

primary

Use #B8B29C for main sections, headers, or prominent UI elements, establishing a stable, warm-neutral foundation.

secondary

Apply #9CAD98 for supporting content blocks, subheadings, or subtle background variations, adding a muted green touch.

accent

The darkest shade, #82928C, serves well for strong accents, important icons, or call-to-action elements, ensuring high impact and readability.

background

Employ #F0EAD6 as the primary background color, providing a clean, expansive, and softly illuminated canvas.

text

Use #82928C for body text and navigation links to ensure excellent readability against the lighter backgrounds.

Accessibility notes

  • Ensure #82928C text has excellent contrast against #F0EAD6, #D4CDB7, and #B8B29C backgrounds for WCAG AA compliance.
  • Avoid using #F0EAD6 or #D4CDB7 for text directly, as they are too light for general readability.
  • When using text on darker shades, ensure a very light text color (e.g., white or #F0EAD6) is used for optimal contrast.
  • This palette offers good contrast opportunities within its range, making accessible pairings straightforward.

Recommended combinations

Dune Grass

Creates a strong, natural contrast, perfect for headers, footers, or sections needing a grounded yet fresh presence.

#82928C · #F0EAD6 · #9CAD98

Sandy Breeze

Ideal for soft, inviting backgrounds or layered UI elements, evoking the calm of sun-drenched dunes.

#D4CDB7 · #F0EAD6 · #B8B29C

Earthy Gradient

Best for demonstrating depth and texture, suitable for complex data visualizations or multi-tiered navigation.

#B8B29C · #9CAD98 · #82928C

CSS variables

:root {
  --coastal-dune-breeze-2-1: #F0EAD6;
  --coastal-dune-breeze-2-2: #D4CDB7;
  --coastal-dune-breeze-2-3: #B8B29C;
  --coastal-dune-breeze-2-4: #9CAD98;
  --coastal-dune-breeze-2-5: #82928C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-dune-breeze-2": {
        1: "#F0EAD6",
        2: "#D4CDB7",
        3: "#B8B29C",
        4: "#9CAD98",
        5: "#82928C",
      }
    }
  }
}

Related searches

coastal dune color palettenatural sand green hexcalm earthy neutralsserene beach design colorsmuted green beige scheme

Palette colors

Hex values

Color 1#F0EAD6
·
Color 2#D4CDB7
·
Color 3#B8B29C
·
Color 4#9CAD98
·
Color 5#82928C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.8:1Fail
2:1Fail
2.7:1Fail
2
1.3:1Fail
1.3:1Fail
1.5:1Fail
2.1:1Fail
3
1.8:1Fail
1.3:1Fail
1.1:1Fail
1.5:1Fail
4
2:1Fail
1.5:1Fail
1.1:1Fail
1.4:1Fail
5
2.7:1Fail
2.1:1Fail
1.5:1Fail
1.4:1Fail

Similar palettes

More like Coastal Dune Breeze

View all neutral
Sandy Beach Drift
Coastal Driftwood Grey
Coastal Dune Grass
Coastal Dune Serenity
Coastal Pebble Beach
Coastal Sands Aura