Back to palettes

Palette

Coastal Seagrass Sway

Muted greens and soft blues, inspired by the gentle sway of seagrass under shallow, clear coastal waters.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8FBC8F#ADD8E6#B0C4DE#A9A9A9#778899

Palette guide

How to use Coastal Seagrass Sway

Overview

The Coastal Seagrass Sway palette offers a harmonious blend of muted greens, soft blues, and subtle grays, evoking the gentle movement of seagrass under clear coastal waters. The tranquil #8FBC8F and #ADD8E6 provide a fresh, airy feel, while #B0C4DE adds a slightly deeper, more classic blue. The grounding #A9A9A9 and #778899 introduce sophisticated neutral grays, offering stability and depth. This palette is perfect for designers seeking to create a serene, natural, and understated aesthetic. It's especially suited for projects that aim to convey calm, clarity, and a quiet connection to nature, ideal for sophisticated, organic branding.

Best used for

  • Eco-friendly product packaging
  • Nature-inspired home decor
  • Mindfulness and meditation apps
  • Sustainable lifestyle blogs
  • Coastal-themed cafes or restaurants
  • Artisan craft marketplaces

Suggested color roles

primary

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

secondary

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

accent

Introduce #B0C4DE as a soft blue accent for highlights, icons, or delicate decorative touches.

background

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

text

Use #778899 or #A9A9A9 for body text and headings for excellent readability against lighter palette colors, or a dark charcoal.

Accessibility notes

  • The darker #778899 and #A9A9A9 provide good contrast for text on #8FBC8F, #ADD8E6, and #B0C4DE.
  • Ensure sufficient contrast when using #ADD8E6 or #B0C4DE for text on light backgrounds.
  • Avoid using #8FBC8F for text on #ADD8E6 backgrounds; opt for a darker color for text.
  • Check contrast ratios for all text pairings, especially for large blocks of content to ensure readability.

Recommended combinations

Seagrass Depths

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

#778899 · #8FBC8F · #ADD8E6

Coastal Calm

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

#ADD8E6 · #B0C4DE · #778899

Dune Horizon

Use for subtle visual layering, combining a warm gray with a calming green and a soft blue for highlights.

#A9A9A9 · #8FBC8F · #B0C4DE

CSS variables

:root {
  --coastal-seagrass-sway-1: #8FBC8F;
  --coastal-seagrass-sway-2: #ADD8E6;
  --coastal-seagrass-sway-3: #B0C4DE;
  --coastal-seagrass-sway-4: #A9A9A9;
  --coastal-seagrass-sway-5: #778899;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-seagrass-sway": {
        1: "#8FBC8F",
        2: "#ADD8E6",
        3: "#B0C4DE",
        4: "#A9A9A9",
        5: "#778899",
      }
    }
  }
}

Related searches

muted green blue grey paletteseagrass inspired color schemecalm natural coastal tonesserene organic designsoft neutral beach palette

Palette colors

Hex values

Color 1#8FBC8F
·
Color 2#ADD8E6
·
Color 3#B0C4DE
·
Color 4#A9A9A9
·
Color 5#778899
·

Accessibility

Contrast checker

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

Similar palettes

More like Coastal Seagrass Sway

View all neutral
Coastal Driftwood Grey
Coastal Dune Grass
Ancient Grove Hush
Cloud Forest Mist
Coastal Driftwood Grey
Coastal Dune Breeze