Palette

Coastal Dune Grass

Soft, muted greens and sandy beiges inspired by wind-swept dune grasses found along tranquil coastlines.

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

#EFEFEF#C2C7B9#A5AB96#878D73#6C7359

Palette guide

How to use Coastal Dune Grass

Overview

The Coastal Dune Grass palette presents a sophisticated blend of soft, muted greens and sandy beiges, inspired by resilient grasses on tranquil coastlines. Starting with the near-white #EFEFEF, it progresses through the subtle #C2C7B9 and #A5AB96, culminating in the deeper, grounding shades of #878D73 and #6C7359. This palette is perfect for designers aiming to create an atmosphere of natural calm, understated elegance, and organic authenticity. It's particularly well-suited for brands that value sustainability, serenity, and a connection to nature, offering a versatile foundation for various design applications.

Best used for

Sustainable brand identity
Minimalist website layouts
Eco-conscious product design
Nature photography portfolios
Wellness and mindfulness apps
Interior design for serene spaces

Suggested color roles

primary

#A5AB96 - A balanced, versatile muted green-grey, suitable for primary content sections and UI elements.

secondary

#C2C7B9 - A lighter, airy tone, ideal for supporting information, secondary backgrounds, or subtle details.

accent

#6C7359 - The deepest, most grounding color, perfect for calls-to-action, important icons, or strong highlights.

background

#EFEFEF - A clean, almost white base that provides excellent contrast and a fresh, open feel.

text

Use a dark charcoal or black for body text, or #6C7359 for headings, ensuring strong legibility.

Accessibility notes

Ensure sufficient contrast for text, especially when using colors like #C2C7B9 on #EFEFEF.
Pair #EFEFEF with #878D73 or #6C7359 for text to easily meet WCAG AA contrast standards.
Avoid using #A5AB96 on #C2C7B9 for small text due to potential low contrast.
Verify contrast ratios for all interactive elements to ensure universal accessibility.

Recommended combinations

Light & Airy

Creates a fresh, minimalist foundation for clean interfaces and subtle transitions.

#EFEFEF · #C2C7B9 · #A5AB96

Natural Depth

Provides a rich, organic feel for headers, footers, or distinct content areas, adding visual weight.

#A5AB96 · #878D73 · #6C7359

Subtle Readability

Ensures strong text contrast on a light background, with a secondary color for hierarchy.

#EFEFEF · #6C7359 · #A5AB96

CSS variables

:root {
  --coastal-dune-grass-3-1: #EFEFEF;
  --coastal-dune-grass-3-2: #C2C7B9;
  --coastal-dune-grass-3-3: #A5AB96;
  --coastal-dune-grass-3-4: #878D73;
  --coastal-dune-grass-3-5: #6C7359;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-dune-grass-3": {
        1: "#EFEFEF",
        2: "#C2C7B9",
        3: "#A5AB96",
        4: "#878D73",
        5: "#6C7359",
      }
    }
  }
}

Hex values

Color 1#EFEFEF

Color 2#C2C7B9

Color 3#A5AB96

Color 4#878D73

Color 5#6C7359

Accessibility

Contrast checker

1.5:1Fail

2.1:1Fail

3:1AA18

4.3:1AA18

1.5:1Fail

1.4:1Fail

2:1Fail

2.9:1Fail

2.1:1Fail

1.4:1Fail

1.5:1Fail

2.1:1Fail

3:1AA18

2:1Fail

1.5:1Fail

1.4:1Fail

4.3:1AA18

2.9:1Fail

2.1:1Fail

1.4:1Fail

Similar palettes

More like Coastal Dune Grass

Coastal Dune Grass

See it in context.

Ready when you are.

Built with Coastal Dune Grass.

How to use Coastal Dune Grass

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Light & Airy

Natural Depth

Subtle Readability

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Coastal Dune Grass