Palette

Coastal Seagrass Dunes

Muted greens and soft greys reflect the hardy seagrass growing on tranquil coastal dunes.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coastal Seagrass Dunes 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 Seagrass Dunes.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#EBECE8#CED8CE#AFBCAD#92A68F#728570

Palette guide

How to use Coastal Seagrass Dunes

Overview

The Coastal Seagrass Dunes palette offers a muted, earthy collection of greens and soft greys, perfectly capturing the serene landscape of coastal dunes. With light, airy tones like #EBECE8 and #CED8CE, it provides a clean, natural base. The palette deepens through the harmonious #AFBCAD and #92A68F, culminating in the rich, grounding #728570. This sophisticated blend is ideal for designers seeking to evoke a sense of quiet nature, stability, and organic elegance. It's particularly well-suited for projects that emphasize environmental consciousness, natural textures, and a calming, understated aesthetic.

Best used for

Sustainable product branding
Organic food and beverage packaging
Eco-tourism websites
Botanical garden branding
Natural skincare and cosmetics
Interior design for serene living spaces

Suggested color roles

primary

Utilize #AFBCAD as a dominant, calming green for main sections or branding elements.

secondary

Employ #CED8CE for secondary content blocks, navigation, or subtle graphical elements, adding lightness.

accent

Introduce #EBECE8 as a bright, clean accent for highlights, icons, or delicate decorative touches.

background

Choose #EBECE8 for a light, airy background, or #CED8CE for a slightly more saturated yet soft canvas.

text

Use #728570 or #92A68F for body text and headings for excellent readability against lighter palette colors.

Accessibility notes

The darker #728570 provides excellent contrast for text on #EBECE8, #CED8CE, and #AFBCAD.
Ensure sufficient contrast when using #EBECE8 for text on any background, as it is very light.
Avoid using #CED8CE for text on #AFBCAD backgrounds; opt for a darker or lighter contrasting color.
Check contrast ratios for all text pairings, especially for large blocks of content to ensure readability.

Recommended combinations

Dune Path

Create a sophisticated, deep-to-light gradient for headers, main content, and bright accents in web design.

#728570 · #92A68F · #EBECE8

Seagrass Whisper

Ideal for clean, minimalist interfaces with a very light background, a soft mid-tone, and strong dark text.

#EBECE8 · #CED8CE · #728570

Earth Layers

Use for subtle visual layering, combining mid-tone greens for depth and a lighter one for highlights.

#AFBCAD · #92A68F · #CED8CE

CSS variables

:root {
  --coastal-seagrass-dunes-1: #EBECE8;
  --coastal-seagrass-dunes-2: #CED8CE;
  --coastal-seagrass-dunes-3: #AFBCAD;
  --coastal-seagrass-dunes-4: #92A68F;
  --coastal-seagrass-dunes-5: #728570;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-seagrass-dunes": {
        1: "#EBECE8",
        2: "#CED8CE",
        3: "#AFBCAD",
        4: "#92A68F",
        5: "#728570",
      }
    }
  }
}

Hex values

Color 1#EBECE8

Color 2#CED8CE

Color 3#AFBCAD

Color 4#92A68F

Color 5#728570

Accessibility

Contrast checker

1.2:1Fail

1.7:1Fail

2.2:1Fail

3.3:1AA18

1.2:1Fail

1.4:1Fail

1.8:1Fail

2.7:1Fail

1.7:1Fail

1.4:1Fail

1.3:1Fail

2:1Fail

2.2:1Fail

1.8:1Fail

1.3:1Fail

1.5:1Fail

3.3:1AA18

2.7:1Fail

2:1Fail

1.5:1Fail

Similar palettes

More like Coastal Seagrass Dunes

Whispering Bamboo Grove