Back to palettes

Palette

Coastal Dune Grass

Natural tones of sand, dry grass, and muted greens found along a tranquil 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 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

#D2B48C#BDB76B#8FBC8F#A9A9A9#E6E6FA

Palette guide

How to use Coastal Dune Grass

Overview

The Coastal Dune Grass palette captures the natural tones of sand, dry grass, and muted greens found along a tranquil coastal dune. This versatile palette includes the warm sand of #D2B48C, the earthy green-yellow of #BDB76B, the soft sage of #8FBC8F, a grounding grey #A9A9A9, and the very light #E6E6FA. Designers can leverage these shades to evoke a sense of natural authenticity, calm, and subtle vibrancy. It’s particularly effective for projects that aim for an organic, understated aesthetic, from lifestyle blogs to natural product packaging, providing a harmonious and inviting visual experience.

Best used for

  • Nature-inspired branding
  • Eco-tourism website design
  • Sustainable fashion showcases
  • Outdoor lifestyle blogs
  • Artisanal craft e-commerce
  • Botanical illustration backgrounds

Suggested color roles

primary

#D2B48C - A warm, inviting sand tone, excellent for main content areas or background sections.

secondary

#8FBC8F - A soft, muted green, perfect for supporting elements, headers, or secondary UI components.

accent

#BDB76B - A unique olive-gold, used sparingly for impactful call-to-action buttons or subtle highlights.

background

#E6E6FA - A very light, airy lavender-white, providing a clean and soft canvas for design elements.

text

Use a dark grey like #A9A9A9 or a near-black for body text, or #8FBC8F for softer headings, ensuring good contrast.

Accessibility notes

  • Ensure sufficient contrast between #E6E6FA and #A9A9A9 for text readability.
  • Pair lighter colors (e.g., #D2B48C, #E6E6FA) with darker tones (e.g., #A9A9A9, black) for all text.
  • Avoid using #BDB76B or #8FBC8F for small text on #E6E6FA without checking contrast ratios.
  • Verify that interactive elements have clear visual distinction and sufficient contrast.

Recommended combinations

Sandy Base

Creates a light, spacious background with a warm, grounding base and subtle grey for text.

#E6E6FA · #D2B48C · #A9A9A9

Natural Accent

Highlights natural elements, ideal for banners or product displays, with a vibrant yet muted touch.

#D2B48C · #BDB76B · #8FBC8F

Calm Interface

Offers a fresh look for UI, with clear greens and readable grey text on a soft background.

#E6E6FA · #8FBC8F · #A9A9A9

CSS variables

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

Tailwind config

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

Related searches

dune grass color palettenatural coastal greensearthy sand tonesmuted green yellow schemecalm nature inspired colors

Palette colors

Hex values

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

Accessibility

Contrast checker

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

Similar palettes

More like Coastal Dune Grass

View all earth
Coastal Dune Grass
Coastal Dune Breeze
Golden Aegean Sands
Sandy Shore Retreat
Whispering Dune Grass
Aegean Cliffside Home