Back to palettes

Palette

Coastal Dune Grass

Muted greens and sandy browns depict the subtle, resilient beauty of grasses growing on coastal dunes.

earthnatural5 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#ADFF2F#8FBC8F#A9A9A9#D2B48C

Palette guide

How to use Coastal Dune Grass

Overview

The Coastal Dune Grass palette showcases muted greens and sandy browns, depicting the subtle, resilient beauty of grasses growing on coastal dunes. This earthy collection features the golden-green of #BDB76B, a vibrant yet natural #ADFF2F (LimeGreen), the soft sage of #8FBC8F, a grounding grey #A9A9A9, and the warm sand tone #D2B48C. Designers can leverage these shades to evoke a sense of natural vitality, organic authenticity, and calm resilience. It’s an excellent choice for projects that require a fresh, natural, and subtly energetic aesthetic, from outdoor brands to eco-conscious designs.

Best used for

  • Eco-friendly product branding
  • Outdoor adventure websites
  • Sustainable agriculture visuals
  • Nature photography platforms
  • Organic food packaging
  • Trail guide applications

Suggested color roles

primary

#BDB76B - A versatile golden-green, ideal for main content areas or distinctive headers, providing natural warmth.

secondary

#8FBC8F - A softer, muted green, perfect for supporting sections, background textures, or subtle UI elements.

accent

#ADFF2F - A vibrant, fresh green, use sparingly for impactful calls-to-action, alerts, or key highlights.

background

#D2B48C - A warm, inviting sand beige that provides a natural and comforting canvas for design elements.

text

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

Accessibility notes

  • Ensure #ADFF2F has sufficient contrast against its background, especially for text.
  • Pair #D2B48C with #A9A9A9 or a darker green for text to meet WCAG AA contrast standards.
  • Avoid using #BDB76B or #8FBC8F for small text on #D2B48C without thorough contrast checking.
  • The bright #ADFF2F may require careful application to avoid visual strain, especially for large blocks.

Recommended combinations

Earthy Foundation

Creates a warm, natural base with a grounding golden-green and subtle grey for text.

#D2B48C · #BDB76B · #A9A9A9

Vibrant Accent

Highlights natural energy, ideal for interactive elements or visual focal points.

#BDB76B · #ADFF2F · #8FBC8F

Muted Contrast

Offers a calm, readable interface with soft greens and a reliable grey for text.

#D2B48C · #8FBC8F · #A9A9A9

CSS variables

:root {
  --coastal-dune-grass-9-1: #BDB76B;
  --coastal-dune-grass-9-2: #ADFF2F;
  --coastal-dune-grass-9-3: #8FBC8F;
  --coastal-dune-grass-9-4: #A9A9A9;
  --coastal-dune-grass-9-5: #D2B48C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-dune-grass-9": {
        1: "#BDB76B",
        2: "#ADFF2F",
        3: "#8FBC8F",
        4: "#A9A9A9",
        5: "#D2B48C",
      }
    }
  }
}

Related searches

dune grass green palettenatural coastal sand colorsmuted green yellow schemeearthy vibrant designorganic nature color palette

Palette colors

Hex values

Color 1#BDB76B
·
Color 2#ADFF2F
·
Color 3#8FBC8F
·
Color 4#A9A9A9
·
Color 5#D2B48C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
1:1Fail
1.1:1Fail
1:1Fail
2
1.7:1Fail
1.8:1Fail
1.9:1Fail
1.6:1Fail
3
1:1Fail
1.8:1Fail
1.1:1Fail
1.1:1Fail
4
1.1:1Fail
1.9:1Fail
1.1:1Fail
1.2:1Fail
5
1:1Fail
1.6:1Fail
1.1:1Fail
1.2:1Fail

Similar palettes

More like Coastal Dune Grass

View all earth
Coastal Dune Grass
Aegean Cliffside Home
Antique Sage Study
Cactus Garden Earth
Canyon Bloom Whisper
Coastal Clay Path