Back to palettes

Palette

Coastal Dune Grass

Soft and calming greens and beiges reflecting the subtle hues of seaside dune grasses.

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

#C8D1BB#A5B892#7A8D77#E9E7D4#B0BFB0

Palette guide

How to use Coastal Dune Grass

Overview

The Coastal Dune Grass palette offers a tranquil blend of soft greens and warm beiges, evoking the serene atmosphere of seaside landscapes. Featuring the delicate #E9E7D4 as a primary light tone, it transitions through the gentle #C8D1BB and #B0BFB0, to the more grounded greens of #A5B892 and #7A8D77. This palette is ideal for designers seeking to convey natural beauty, calmness, and understated elegance. It’s particularly effective for designs that require an organic, earthy feel, from wellness brands to eco-conscious products, providing a refreshing yet sophisticated visual experience.

Best used for

  • Eco-friendly product packaging
  • Nature-themed web design
  • Wellness and spa branding
  • Organic food market visuals
  • Educational materials on ecology
  • Minimalist home decor applications

Suggested color roles

primary

#A5B892 - A versatile, muted green perfect for main content blocks and primary UI elements, offering a natural feel.

secondary

#C8D1BB - A lighter, airy green-beige, excellent for supporting panels, subtle headers, or secondary information.

accent

#7A8D77 - The deepest green, use sparingly for impactful call-to-actions, icons, or important highlights.

background

#E9E7D4 - A soft, creamy off-white that provides a clean and expansive canvas, enhancing the natural feel.

text

Use a dark charcoal or near-black for body text, or #7A8D77 for headings, ensuring optimal readability.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using lighter greens like #C8D1BB.
  • Pair #E9E7D4 with darker tones like #7A8D77 for text to meet WCAG AA contrast guidelines.
  • Avoid placing light text on #C8D1BB or #B0BFB0 without careful contrast checking.
  • Test all interactive elements for sufficient color contrast, particularly buttons and links.

Recommended combinations

Fresh Foundation

Creates a light, airy base, ideal for backgrounds and subtle content separation.

#E9E7D4 · #C8D1BB · #B0BFB0

Earthy Depth

Provides a natural depth for main sections, offering a gentle yet distinct contrast.

#A5B892 · #7A8D77 · #C8D1BB

Subtle Harmony

Excellent for showcasing content with a clean background and clear, natural text hierarchy.

#E9E7D4 · #A5B892 · #7A8D77

CSS variables

:root {
  --coastal-dune-grass-2-1: #C8D1BB;
  --coastal-dune-grass-2-2: #A5B892;
  --coastal-dune-grass-2-3: #7A8D77;
  --coastal-dune-grass-2-4: #E9E7D4;
  --coastal-dune-grass-2-5: #B0BFB0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-dune-grass-2": {
        1: "#C8D1BB",
        2: "#A5B892",
        3: "#7A8D77",
        4: "#E9E7D4",
        5: "#B0BFB0",
      }
    }
  }
}

Related searches

calm green palettenatural dune colorsmuted earth green designserene coastal greensorganic calm color scheme

Palette colors

Hex values

Color 1#C8D1BB
·
Color 2#A5B892
·
Color 3#7A8D77
·
Color 4#E9E7D4
·
Color 5#B0BFB0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2.3:1Fail
1.3:1Fail
1.2:1Fail
2
1.3:1Fail
1.7:1Fail
1.7:1Fail
1.1:1Fail
3
2.3:1Fail
1.7:1Fail
2.9:1Fail
1.9:1Fail
4
1.3:1Fail
1.7:1Fail
2.9:1Fail
1.5:1Fail
5
1.2:1Fail
1.1:1Fail
1.9:1Fail
1.5:1Fail

Similar palettes

More like Coastal Dune Grass

View all neutral
Ancient Grove Hush
Coastal Dune Breeze
Coastal Pebble Beach
Coastal Seagrass Sway
Green Tea Serene
Jade Tea Ritual