Palette

Seagrass Dune Sway

Evokes the gentle movement of seagrasses on coastal dunes, blending soft greens with sandy neutrals.

earthcalm5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Seagrass Dune Sway 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 Seagrass Dune Sway.

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

Data visualization

#8FBC8F#D8D2C2#A2BCCC#6C6B5E#E6F0E6

Palette guide

How to use Seagrass Dune Sway

Overview

The Seagrass Dune Sway palette captures the gentle, earthy essence of coastal dunes, blending soft greens with sandy neutrals for a truly calming and minimalist aesthetic. Featuring harmonious tones like the muted green #8FBC8F, the warm neutral #D8D2C2, and the grounding #6C6B5E, this collection is perfect for designs that prioritize tranquility, natural textures, and understated elegance. Designers and developers can leverage these colors to create serene user interfaces, sustainable brand identities, or sophisticated digital experiences that evoke the quiet beauty of a windswept shore.

Best used for

Minimalist web design and portfolios
Sustainable fashion and organic product branding
Calm and natural interior design themes
Landscape photography presentation
Wellness and mindfulness applications
Eco-conscious lifestyle blogs

Suggested color roles

primary

Use #8FBC8F as the core brand color for a soft, natural presence, ideal for main headings or significant graphic elements.

secondary

Employ #D8D2C2 as a warm, sandy neutral for background sections, content blocks, or secondary UI elements, providing a gentle contrast.

accent

Apply #A2BCCC as a subtle cool accent for interactive elements, highlights, or graphical details, adding a touch of freshness.

background

Utilize #E6F0E6 as the lightest, airy base for pages, ensuring a clean and spacious feel that enhances readability.

text

For clear legibility, #6C6B5E serves as an excellent earthy dark text color against the lighter backgrounds, ensuring content is easily readable.

Accessibility notes

Ensure #6C6B5E (text) provides sufficient contrast on #E6F0E6 (background) and #D8D2C2 (secondary) for optimal readability.
The lighter shades like #D8D2C2 and #E6F0E6 are unsuitable for small text; use them for backgrounds or larger elements.
Test contrast between #8FBC8F and #A2BCCC if they are used as foreground/background elements to ensure differentiation.
Consider a slightly darker text color if #6C6B5E feels too light for extended reading on #E6F0E6 to meet WCAG AA standards.

Recommended combinations

Dune Base

Ideal for creating light, spacious backgrounds, content areas, and soft feature sections that feel natural and inviting.

#E6F0E6 · #D8D2C2 · #8FBC8F

Coastal Depth

Use for main elements, headers, and strong calls to action, providing a grounded feel with clear hierarchy.

#D8D2C2 · #8FBC8F · #6C6B5E

Airy Accents

Perfect for subtle highlights, secondary information, or decorative elements that require a fresh, understated touch.

#E6F0E6 · #A2BCCC · #8FBC8F

CSS variables

:root {
  --seagrass-dune-sway-1: #8FBC8F;
  --seagrass-dune-sway-2: #D8D2C2;
  --seagrass-dune-sway-3: #A2BCCC;
  --seagrass-dune-sway-4: #6C6B5E;
  --seagrass-dune-sway-5: #E6F0E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "seagrass-dune-sway": {
        1: "#8FBC8F",
        2: "#D8D2C2",
        3: "#A2BCCC",
        4: "#6C6B5E",
        5: "#E6F0E6",
      }
    }
  }
}

Hex values

Color 1#8FBC8F

Color 2#D8D2C2

Color 3#A2BCCC

Color 4#6C6B5E

Color 5#E6F0E6

Accessibility

Contrast checker

1.4:1Fail

1.1:1Fail

2.5:1Fail

1.8:1Fail

1.4:1Fail

1.3:1Fail

3.6:1AA18

1.3:1Fail

1.1:1Fail

1.3:1Fail

2.7:1Fail

1.7:1Fail

2.5:1Fail

3.6:1AA18

2.7:1Fail

4.6:1AA

1.8:1Fail

1.3:1Fail

1.7:1Fail

4.6:1AA

Similar palettes

More like Seagrass Dune Sway

Seagrass Dune Sway

See it in context.

Ready when you are.

Built with Seagrass Dune Sway.

How to use Seagrass Dune Sway

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Dune Base

Coastal Depth

Airy Accents

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Seagrass Dune Sway