Back to palettes

Palette

Coastal Dune Breeze

Gentle, muted tones capturing the serene interaction of wind, sand, and light on a coastal dune.

earthnatural5 colors
More earth 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

#EBDACF#DBCBBF#C8B6A8#B4A194#9C8A7B

Palette guide

How to use Coastal Dune Breeze

Overview

The Coastal Dune Breeze palette offers a collection of gentle, muted earth tones perfect for creating serene and natural designs. Inspired by the subtle interaction of wind, sand, and light on a coastal dune, this palette features warm beiges and soft browns. Key colors include the airy light beige #EBDACF, the slightly deeper #DBCBBF, the balanced #C8B6A8, the grounding #B4A194, and the rich anchor #9C8A7B. Designers can leverage these shades to evoke a sense of calm, warmth, and understated elegance. Ideal for projects seeking a natural, organic feel, it provides a harmonious foundation for branding, web interfaces, and interior design, offering a tranquil visual experience.

Best used for

  • Nature-inspired branding (eco-friendly products)
  • Minimalist website design
  • Interior decor for calming spaces
  • Relaxation app interfaces
  • E-commerce for artisanal goods
  • Editorial layouts with natural themes

Suggested color roles

primary

#C8B6A8 - A balanced, versatile mid-tone for main content areas or large UI elements.

secondary

#DBCBBF - A lighter, softer shade for supporting sections, backgrounds, or subtle accents.

accent

#9C8A7B - The deepest tone, excellent for subtle call-to-action buttons or important highlights.

background

#EBDACF - A very light, airy base that provides a clean, open feel for pages.

text

Use a dark charcoal or near-black for body text, ensuring readability against lighter backgrounds, or #9C8A7B for headings.

Accessibility notes

  • Ensure sufficient contrast between #EBDACF and #9C8A7B for text readability.
  • Pair lighter shades like #DBCBBF with dark text (e.g., #9C8A7B or black) to meet WCAG AA standards.
  • Avoid using adjacent light tones (e.g., #EBDACF on #DBCBBF) for small text or critical UI elements.
  • Use a contrast checker for all text and interactive elements to confirm accessibility.

Recommended combinations

Soft Foundation

Ideal for clean, airy backgrounds and primary content blocks, creating a gentle gradient.

#EBDACF · #DBCBBF · #C8B6A8

Grounded Elegance

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

#C8B6A8 · #B4A194 · #9C8A7B

Subtle Contrast

A high-contrast pairing for text on background, softened by a secondary lighter tone.

#EBDACF · #9C8A7B · #DBCBBF

CSS variables

:root {
  --coastal-dune-breeze-1: #EBDACF;
  --coastal-dune-breeze-2: #DBCBBF;
  --coastal-dune-breeze-3: #C8B6A8;
  --coastal-dune-breeze-4: #B4A194;
  --coastal-dune-breeze-5: #9C8A7B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-dune-breeze": {
        1: "#EBDACF",
        2: "#DBCBBF",
        3: "#C8B6A8",
        4: "#B4A194",
        5: "#9C8A7B",
      }
    }
  }
}

Related searches

calm sand color palettenatural earth tones designserene beach colorsmuted coastal palettewarm neutral color scheme

Palette colors

Hex values

Color 1#EBDACF
·
Color 2#DBCBBF
·
Color 3#C8B6A8
·
Color 4#B4A194
·
Color 5#9C8A7B
·

Accessibility

Contrast checker

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

Similar palettes

More like Coastal Dune Breeze

View all earth