Back to palettes

Palette

Coastal Dune Grass

The subtle, calming colors of windswept coastal dunes and hardy grasses, natural and soothing.

neutralnatural5 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

#F5DEB3#9BB3B6#AEC6CF#D2B48C#A9A9A9

Palette guide

How to use Coastal Dune Grass

Overview

The Coastal Dune Grass palette offers a subtle, calming collection of colors inspired by windswept coastal dunes and hardy grasses. This soothing palette features the warm, light sand of #F5DEB3, the gentle blue-greys of #9BB3B6 and #AEC6CF, a grounding beige #D2B48C, and a versatile grey #A9A9A9. Designers can use these shades to create designs that feel natural, serene, and quietly sophisticated. It's an excellent choice for projects requiring a soft, harmonious aesthetic, from wellness applications to interior design schemes, providing a tranquil and inviting visual experience.

Best used for

  • Wellness brand identity
  • Coastal-themed interiors
  • Relaxation app interfaces
  • Minimalist web design
  • Eco-friendly product packaging
  • Photography portfolio backgrounds

Suggested color roles

primary

#D2B48C - A warm, inviting sand beige, ideal for main content areas or as a soft base color.

secondary

#AEC6CF - A gentle, muted blue-grey, perfect for supporting sections, headers, or subtle UI elements.

accent

#9BB3B6 - A slightly deeper blue-grey, effective for soft calls-to-action or important, calming highlights.

background

#F5DEB3 - A very light, creamy sand tone, providing an airy and warm canvas for design elements.

text

Use a dark charcoal or black for body text, or #A9A9A9 for a softer, legible option against lighter backgrounds.

Accessibility notes

  • Ensure sufficient contrast between #F5DEB3 and text, especially when using lighter palette colors.
  • Pair #F5DEB3 with #A9A9A9 or a darker blue-grey for text to meet WCAG AA contrast standards.
  • Avoid placing #9BB3B6 or #AEC6CF text on #D2B48C without careful contrast verification.
  • Check contrast for all interactive elements to ensure usability for all users.

Recommended combinations

Sandy Horizon

Creates a warm, natural base with a grounding grey for clean, readable layouts.

#F5DEB3 · #D2B48C · #A9A9A9

Coastal Calm

Blends cool and warm tones for a balanced, serene feel, ideal for headers or feature blocks.

#AEC6CF · #9BB3B6 · #D2B48C

Breezy Interface

Offers a fresh, light interface with clear blue-grey accents and readable text.

#F5DEB3 · #AEC6CF · #A9A9A9

CSS variables

:root {
  --coastal-dune-grass-5-1: #F5DEB3;
  --coastal-dune-grass-5-2: #9BB3B6;
  --coastal-dune-grass-5-3: #AEC6CF;
  --coastal-dune-grass-5-4: #D2B48C;
  --coastal-dune-grass-5-5: #A9A9A9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-dune-grass-5": {
        1: "#F5DEB3",
        2: "#9BB3B6",
        3: "#AEC6CF",
        4: "#D2B48C",
        5: "#A9A9A9",
      }
    }
  }
}

Related searches

calm coastal palettenatural beige blue schemesubtle dune colorsneutral nature designserene beach hues

Palette colors

Hex values

Color 1#F5DEB3
·
Color 2#9BB3B6
·
Color 3#AEC6CF
·
Color 4#D2B48C
·
Color 5#A9A9A9
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
1.4:1Fail
1.5:1Fail
1.8:1Fail
2
1.7:1Fail
1.2:1Fail
1.1:1Fail
1.1:1Fail
3
1.4:1Fail
1.2:1Fail
1.1:1Fail
1.3:1Fail
4
1.5:1Fail
1.1:1Fail
1.1:1Fail
1.2:1Fail
5
1.8:1Fail
1.1:1Fail
1.3:1Fail
1.2:1Fail

Similar palettes

More like Coastal Dune Grass

View all neutral
Sunlit Coastal Cliff
Coastal Cliff Path
Coastal Pottery Sand
Dusty Plains Serene
Limestone Cliff Coast
Seaside Grass Whisper