Back to palettes

Palette

Coastal Dune Grass

Soft, muted tones of sand and weathered grass, capturing the quiet serenity of a windswept coastal dune.

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

#FFFDE7#EFEBE9#BCAAA4#9E9E9E#6D4C41

Palette guide

How to use Coastal Dune Grass

Overview

The Coastal Dune Grass palette captures the quiet serenity of a windswept coastal dune, featuring soft, muted tones of sand and weathered grass. This tranquil collection ranges from the near-white #FFFDE7 and soft beige #EFEBE9, to the warm grey #BCAAA4 and true grey #9E9E9E, culminating in the deep, grounding brown of #6D4C41. Designers can utilize these shades to evoke a sense of calm, natural elegance, and timelessness. It is particularly effective for projects that require a sophisticated, understated, and organic aesthetic, from luxury branding to serene digital experiences.

Best used for

  • Luxury coastal branding
  • High-end interior design
  • Minimalist photography websites
  • Sustainable lifestyle products
  • Artisanal craft marketplaces
  • Elegant digital interfaces

Suggested color roles

primary

#BCAAA4 - A warm, versatile mid-tone grey-beige, ideal for main content blocks or subtle backgrounds.

secondary

#EFEBE9 - A light, soft beige, perfect for supporting sections, headers, or a clean canvas.

accent

#6D4C41 - The deepest, most grounding brown, excellent for impactful calls-to-action, icons, or strong textual emphasis.

background

#FFFDE7 - An almost-white, creamy tone that provides a bright, expansive, and natural-feeling base.

text

Use #6D4C41 or a classic black for body text, ensuring superior readability against the lighter palette colors.

Accessibility notes

  • Ensure sufficient contrast when pairing lighter shades like #EFEBE9 with text, especially for smaller fonts.
  • Pair #FFFDE7 with #6D4C41 or a pure black for text to easily meet WCAG AA standards.
  • Avoid using #BCAAA4 on #EFEBE9 for small or critical text due to potential low contrast.
  • Verify contrast ratios for all interactive elements, ensuring they are clearly distinguishable.

Recommended combinations

Soft Sands

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

#FFFDE7 · #EFEBE9 · #BCAAA4

Grounded Neutrals

Provides depth and sophistication, ideal for headers, footers, or distinct content sections.

#BCAAA4 · #9E9E9E · #6D4C41

Clear Readability

Ensures strong text contrast on a light background, with a warm neutral accent for visual hierarchy.

#FFFDE7 · #6D4C41 · #BCAAA4

CSS variables

:root {
  --coastal-dune-grass-8-1: #FFFDE7;
  --coastal-dune-grass-8-2: #EFEBE9;
  --coastal-dune-grass-8-3: #BCAAA4;
  --coastal-dune-grass-8-4: #9E9E9E;
  --coastal-dune-grass-8-5: #6D4C41;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-dune-grass-8": {
        1: "#FFFDE7",
        2: "#EFEBE9",
        3: "#BCAAA4",
        4: "#9E9E9E",
        5: "#6D4C41",
      }
    }
  }
}

Related searches

calm neutral palettesandy grey color schemenatural coastal neutralsserene beach tonesearthy elegant colors

Palette colors

Hex values

Color 1#FFFDE7
·
Color 2#EFEBE9
·
Color 3#BCAAA4
·
Color 4#9E9E9E
·
Color 5#6D4C41
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
2.2:1Fail
2.6:1Fail
7.4:1AAA
2
1.2:1Fail
1.9:1Fail
2.3:1Fail
6.4:1AA
3
2.2:1Fail
1.9:1Fail
1.2:1Fail
3.4:1AA18
4
2.6:1Fail
2.3:1Fail
1.2:1Fail
2.8:1Fail
5
7.4:1AAA
6.4:1AA
3.4:1AA18
2.8:1Fail

Similar palettes

More like Coastal Dune Grass

View all Neutral
Coastal Seagrass Whisper
Coastal Linen Sands
Oceanic Driftwood Shore
Pebble Shore
Pebble Shore Drift
Sandy Beach Driftwood