Back to palettes

Palette

Coastal Dune Grass

Soft greens and sandy beiges reflect the natural beauty of windswept grasses along a peaceful coast.

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

#87A18D#AAC0A4#D6E5D7#F8F5EF#C2B59B

Palette guide

How to use Coastal Dune Grass

Overview

The Coastal Dune Grass palette features soft greens and sandy beiges, reflecting the natural beauty of windswept grasses along a peaceful coast. This serene collection includes the calming green of #87A18D, the lighter #AAC0A4, and the very airy #D6E5D7, complemented by the warm, almost-white #F8F5EF and the grounding sand tone #C2B59B. Designers can use these shades to evoke a sense of tranquility, natural elegance, and understated charm. It’s an ideal choice for projects seeking an organic, gentle, and refreshing aesthetic, from wellness and eco-brands to serene digital interfaces.

Best used for

  • Wellness and spa branding
  • Eco-friendly product design
  • Nature-inspired web layouts
  • Botanical garden signage
  • Calm digital art backgrounds
  • Interior decor for tranquil spaces

Suggested color roles

primary

#87A18D - A calming, versatile green, excellent for main content blocks or primary UI elements.

secondary

#AAC0A4 - A lighter, airy green, perfect for supporting sections, subtle headers, or background accents.

accent

#C2B59B - A warm, sandy beige that adds a grounding contrast, ideal for calls-to-action or subtle highlights.

background

#F8F5EF - A very light, creamy off-white, providing a clean, expansive, and warm canvas.

text

Use a dark charcoal or black for body text, or #87A18D for legible headings on lighter backgrounds.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially for lighter pairs like #AAC0A4 on #F8F5EF.
  • Pair #F8F5EF with #87A18D or black for text to comfortably meet WCAG AA contrast standards.
  • Avoid using #AAC0A4 on #D6E5D7 for small text due to potential readability issues.
  • Verify contrast ratios for all interactive elements to ensure universal accessibility.

Recommended combinations

Breezy Base

Creates a very light, airy foundation, perfect for clean, minimalist interfaces.

#F8F5EF · #D6E5D7 · #AAC0A4

Grounded Greens

Provides a natural depth, blending greens with a warm sand tone for distinct sections.

#87A18D · #AAC0A4 · #C2B59B

Natural Readability

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

#F8F5EF · #87A18D · #C2B59B

CSS variables

:root {
  --coastal-dune-grass-7-1: #87A18D;
  --coastal-dune-grass-7-2: #AAC0A4;
  --coastal-dune-grass-7-3: #D6E5D7;
  --coastal-dune-grass-7-4: #F8F5EF;
  --coastal-dune-grass-7-5: #C2B59B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-dune-grass-7": {
        1: "#87A18D",
        2: "#AAC0A4",
        3: "#D6E5D7",
        4: "#F8F5EF",
        5: "#C2B59B",
      }
    }
  }
}

Related searches

calm green and beige palettewindswept coast colorsnatural earth green designserene dune grass schemelight organic color palette

Palette colors

Hex values

Color 1#87A18D
·
Color 2#AAC0A4
·
Color 3#D6E5D7
·
Color 4#F8F5EF
·
Color 5#C2B59B
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.1:1Fail
2.6:1Fail
1.4:1Fail
2
1.4:1Fail
1.5:1Fail
1.8:1Fail
1:1Fail
3
2.1:1Fail
1.5:1Fail
1.2:1Fail
1.5:1Fail
4
2.6:1Fail
1.8:1Fail
1.2:1Fail
1.9:1Fail
5
1.4:1Fail
1:1Fail
1.5:1Fail
1.9:1Fail

Similar palettes

More like Coastal Dune Grass

View all earth
Coastal Bluff Grass
Coastal Dune Grass
Seagrass Dune Sway
Ancient Forest Hearth
Ancient Grove Calm
Ancient Moss Rune