Back to palettes

Palette

Coastal Dune Grass

Subtle, muted greens and greys found in hardy dune grass swaying by the ocean.

neutralcalm5 colors
More neutral 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

#C2C7B8#A1A696#808575#5F6354#43473D

Palette guide

How to use Coastal Dune Grass

Overview

The Coastal Dune Grass palette captures the subtle, muted greens and greys found in hardy dune grass swaying by the ocean. This sophisticated and grounding palette features a gradient from the light #C2C7B8, through the balanced #A1A696 and #808575, to the deep, earthy tones of #5F6354 and #43473D. Designers seeking to convey a sense of natural resilience, understated elegance, and calm will find this palette highly effective. It’s particularly well-suited for masculine brands, outdoor apparel, or any design project aiming for a grounded, organic, and quietly powerful aesthetic.

Best used for

  • Outdoor adventure branding
  • Sustainable apparel design
  • Masculine product packaging
  • Nature-focused web interfaces
  • Architectural design renderings
  • Earthy editorial layouts

Suggested color roles

primary

#808575 - A strong, versatile mid-tone green-grey, excellent for main content areas and primary UI elements.

secondary

#A1A696 - A lighter, softer supporting tone, ideal for secondary backgrounds, headers, or subtle accents.

accent

#43473D - The darkest, most grounding color, perfect for impactful calls-to-action, icons, or strong textual emphasis.

background

#C2C7B8 - A very light, airy green-grey that provides a soft, clean base, allowing other colors to stand out.

text

Use #43473D or a near-black for body text, ensuring excellent readability against lighter background shades.

Accessibility notes

  • Ensure robust contrast when pairing lighter shades like #C2C7B8 with text, recommending #43473D or black.
  • The palette's darker colors offer good contrast for text on #C2C7B8; verify with a contrast checker.
  • Avoid using #A1A696 on #C2C7B8 for small text due to potential low contrast.
  • All interactive elements should have a minimum contrast ratio of 4.5:1 for text.

Recommended combinations

Subtle Gradient

Creates a gentle, harmonious flow for backgrounds or layered content, offering a sophisticated feel.

#C2C7B8 · #A1A696 · #808575

Deep Earth

Provides a strong, grounded feel, ideal for footers, headers, or impactful sections.

#808575 · #5F6354 · #43473D

Clean Read

Offers excellent text legibility on a light background, with a secondary accent for hierarchy.

#C2C7B8 · #43473D · #A1A696

CSS variables

:root {
  --coastal-dune-grass-6-1: #C2C7B8;
  --coastal-dune-grass-6-2: #A1A696;
  --coastal-dune-grass-6-3: #808575;
  --coastal-dune-grass-6-4: #5F6354;
  --coastal-dune-grass-6-5: #43473D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-dune-grass-6": {
        1: "#C2C7B8",
        2: "#A1A696",
        3: "#808575",
        4: "#5F6354",
        5: "#43473D",
      }
    }
  }
}

Related searches

muted green grey palettedark coastal colorsearthy calm designdune grass aestheticorganic natural color scheme

Palette colors

Hex values

Color 1#C2C7B8
·
Color 2#A1A696
·
Color 3#808575
·
Color 4#5F6354
·
Color 5#43473D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.2:1Fail
3.6:1AA18
5.5:1AA
2
1.4:1Fail
1.5:1Fail
2.5:1Fail
3.8:1AA18
3
2.2:1Fail
1.5:1Fail
1.6:1Fail
2.5:1Fail
4
3.6:1AA18
2.5:1Fail
1.6:1Fail
1.5:1Fail
5
5.5:1AA
3.8:1AA18
2.5:1Fail
1.5:1Fail

Similar palettes

More like Coastal Dune Grass

View all neutral
Coastal Seagrass Sway
Coastal Driftwood Grey
Coastal Driftwood Grey
Coastal Fog Drift
Coastal Fog Drift
Misty Morning Meadow