Back to palettes

Palette

Coastal Dune Grass

A subtle, sandy palette inspired by the swaying grasses and muted tones of coastal dunes.

earthcalm5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#BDB76B#C2B280#D2B48C#EEDD82#F5DEB3

Palette guide

How to use Coastal Dune Grass

Overview

The Coastal Dune Grass palette offers a subtle, sandy collection inspired by the swaying grasses and muted tones of coastal dunes. This warm, earthy palette features a gradient from the golden-green of #BDB76B, through the inviting #C2B280 and #D2B48C, to the lighter, airy shades of #EEDD82 and #F5DEB3. Designers can leverage these natural tones to evoke a sense of calm, warmth, and organic authenticity. It’s an ideal choice for projects seeking a gentle, sun-kissed aesthetic, from eco-friendly branding to serene digital interfaces, providing a harmonious and inviting visual experience.

Best used for

  • Eco-conscious brand identity
  • Nature-themed web design
  • Wellness product packaging
  • Artisanal craft e-commerce
  • Interior decor for rustic spaces
  • Relaxation app backgrounds

Suggested color roles

primary

#D2B48C - A warm, versatile sand beige, excellent for main content areas or as a soft base color.

secondary

#C2B280 - A slightly deeper, golden beige, perfect for supporting sections, headers, or subtle details.

accent

#BDB76B - A distinctive golden-green, used sparingly for impactful calls-to-action or key highlights.

background

#F5DEB3 - A very light, creamy sand tone, providing an airy, warm, and expansive canvas.

text

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

Accessibility notes

  • Ensure sufficient contrast between text and background, especially for lighter pairs like #EEDD82 on #F5DEB3.
  • Pair #F5DEB3 with #BDB76B or a pure black for text to meet WCAG AA contrast standards.
  • Avoid using #C2B280 on #D2B48C for small text due to potential low contrast.
  • Verify contrast ratios for all interactive elements to ensure universal accessibility.

Recommended combinations

Sun-Kissed Base

Creates a light, warm, and inviting foundation, perfect for clean, natural interfaces.

#F5DEB3 · #EEDD82 · #D2B48C

Golden Earth

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

#D2B48C · #C2B280 · #BDB76B

Soft Contrast

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

#F5DEB3 · #BDB76B · #D2B48C

CSS variables

:root {
  --coastal-dune-grass-1: #BDB76B;
  --coastal-dune-grass-2: #C2B280;
  --coastal-dune-grass-3: #D2B48C;
  --coastal-dune-grass-4: #EEDD82;
  --coastal-dune-grass-5: #F5DEB3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-dune-grass": {
        1: "#BDB76B",
        2: "#C2B280",
        3: "#D2B48C",
        4: "#EEDD82",
        5: "#F5DEB3",
      }
    }
  }
}

Related searches

sandy dune palettegolden beige color schemenatural grass tonescalm earthy designwarm coastal neutrals

Palette colors

Hex values

Color 1#BDB76B
·
Color 2#C2B280
·
Color 3#D2B48C
·
Color 4#EEDD82
·
Color 5#F5DEB3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1:1Fail
1:1Fail
1.5:1Fail
1.6:1Fail
2
1:1Fail
1.1:1Fail
1.5:1Fail
1.6:1Fail
3
1:1Fail
1.1:1Fail
1.4:1Fail
1.5:1Fail
4
1.5:1Fail
1.5:1Fail
1.4:1Fail
1:1Fail
5
1.6:1Fail
1.6:1Fail
1.5:1Fail
1:1Fail

Similar palettes

More like Coastal Dune Grass

View all earth
Coastal Dune Grass
Seagrass Dune Sway
Wheat Dune Whisper
Whispering Dune Breeze
Whispering Dune Breeze
Whispering Dune Sands