Back to palettes

Palette

Coastal Seagrass Whisper

Soft, muted greens and tranquil grays capturing the gentle sway of seagrass along a peaceful, sunlit coastline.

NeutralCalm5 colors
More Neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#7F8C8D#BCCCDC#E3F2FD#A2D5AB#6DB68B

Palette guide

How to use Coastal Seagrass Whisper

Overview

The Coastal Seagrass Whisper palette (version 2) is a sophisticated blend of muted greens and tranquil grays, evoking the gentle sway of seagrass on a sunlit coastline. Featuring the grounding #7F8C8D and the airy #BCCCDC, it establishes a serene foundation. The crisp #E3F2FD provides a clean, bright canvas, while #A2D5AB and #6DB68B introduce refreshing, organic green tones that breathe life into the palette. This collection is ideal for designers seeking to create a calm, natural, and subtly elegant aesthetic, perfect for projects that emphasize tranquility, sustainability, and a quiet connection to the natural world.

Best used for

  • Sustainable lifestyle branding
  • Eco-friendly product packaging
  • Wellness and mindfulness app interfaces
  • Modern farmhouse interior design
  • Nature photography portfolios
  • Artisan craft websites

Suggested color roles

primary

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

secondary

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

accent

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

background

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

text

Use #7F8C8D or #6DB68B for body text and headings for excellent readability against lighter palette colors.

Accessibility notes

  • The darker #7F8C8D and #6DB68B provide excellent contrast for text on #BCCCDC and #E3F2FD.
  • Ensure sufficient contrast when using #E3F2FD for text on any background, as it is very light.
  • Avoid using #BCCCDC for text on #A2D5AB 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

Seagrass Harmony

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

#7F8C8D · #A2D5AB · #E3F2FD

Coastal Mist

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

#E3F2FD · #BCCCDC · #6DB68B

Dune Greens

Use for subtle visual layering, combining mid-tone greens for depth and a grounding gray for contrast.

#6DB68B · #A2D5AB · #7F8C8D

CSS variables

:root {
  --coastal-seagrass-whisper-2-1: #7F8C8D;
  --coastal-seagrass-whisper-2-2: #BCCCDC;
  --coastal-seagrass-whisper-2-3: #E3F2FD;
  --coastal-seagrass-whisper-2-4: #A2D5AB;
  --coastal-seagrass-whisper-2-5: #6DB68B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-seagrass-whisper-2": {
        1: "#7F8C8D",
        2: "#BCCCDC",
        3: "#E3F2FD",
        4: "#A2D5AB",
        5: "#6DB68B",
      }
    }
  }
}

Related searches

muted green grey paletteseagrass coastal colorscalm natural green schemeserene organic designlight cool earth tones

Palette colors

Hex values

Color 1#7F8C8D
·
Color 2#BCCCDC
·
Color 3#E3F2FD
·
Color 4#A2D5AB
·
Color 5#6DB68B
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.1:1Fail
3:1AA18
2.1:1Fail
1.4:1Fail
2
2.1:1Fail
1.4:1Fail
1:1Fail
1.5:1Fail
3
3:1AA18
1.4:1Fail
1.5:1Fail
2.1:1Fail
4
2.1:1Fail
1:1Fail
1.5:1Fail
1.5:1Fail
5
1.4:1Fail
1.5:1Fail
2.1:1Fail
1.5:1Fail

Similar palettes

More like Coastal Seagrass Whisper

View all Neutral