Palette

Seagrass Whisper Tones

Muted, soothing greens reminiscent of sun-drenched seagrass beds swaying in gentle currents.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2C5F2D#4F7942#8BC34A#BADA55#E7F0E0

Palette guide

How to use Seagrass Whisper Tones

Overview

The Seagrass Whisper Tones palette is a vibrant yet soothing collection of greens, reminiscent of sun-drenched seagrass beds swaying gently. With deep #2C5F2D, a lively #8BC34A, and the airy #E7F0E0, this palette exudes an organic, fresh, and natural feel. It's an ideal choice for designs aiming to convey health, vitality, and a strong connection to nature. Designers and developers can leverage these versatile hues to create engaging user interfaces, compelling branding for organic products, or invigorating digital experiences that resonate with an eco-conscious audience.

Best used for

Health and wellness applications
Organic food and beverage branding
Gardening and outdoor lifestyle websites
Eco-friendly product marketing
Nature conservation initiatives
Fresh and vibrant UI/UX designs

Suggested color roles

primary

Use #2C5F2D as a deep, strong natural anchor for branding, main headers, or significant graphical elements, conveying stability and organic depth.

secondary

Employ #4F7942 for rich, supporting green elements, background sections, or secondary navigation, maintaining an earthy feel.

accent

Apply #8BC34A as a vibrant, energetic highlight for interactive buttons, calls to action, or key informational cues, adding a lively pop.

background

Utilize #E7F0E0 as a clean, light base for pages or content blocks, providing ample whitespace and a fresh, airy feel.

text

For optimal legibility, #2C5F2D serves as the darkest and most effective text color against the lighter backgrounds, ensuring content is easily digestible.

Accessibility notes

Ensure #2C5F2D (text) provides strong contrast on #E7F0E0 (background) for primary content readability, meeting WCAG AA standards.
#BADA55 might be too light for text on most backgrounds; reserve it for larger elements, accents, or graphical features.
Test contrast for #8BC34A against both light and dark backgrounds to ensure it remains legible and accessible for interactive elements.
Avoid using #BADA55 and #8BC34A together for critical information if color differentiation is the sole method of conveying meaning, especially for color blind users.

Recommended combinations

Deep Roots

Excellent for strong branding, main content blocks, and interactive elements where a rich, natural green presence is desired.

#2C5F2D · #4F7942 · #8BC34A

Fresh Growth

Suitable for light backgrounds, subtle highlights, and secondary information, creating an airy and vibrant feel.

#E7F0E0 · #BADA55 · #4F7942

Vibrant Contrast

Creates a clean base, highlights main text with a deep green, and provides energetic calls to action with a lively accent.

#E7F0E0 · #2C5F2D · #8BC34A

CSS variables

:root {
  --seagrass-whisper-tones-1: #2C5F2D;
  --seagrass-whisper-tones-2: #4F7942;
  --seagrass-whisper-tones-3: #8BC34A;
  --seagrass-whisper-tones-4: #BADA55;
  --seagrass-whisper-tones-5: #E7F0E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "seagrass-whisper-tones": {
        1: "#2C5F2D",
        2: "#4F7942",
        3: "#8BC34A",
        4: "#BADA55",
        5: "#E7F0E0",
      }
    }
  }
}

Hex values

Color 1#2C5F2D

Color 2#4F7942

Color 3#8BC34A

Color 4#BADA55

Color 5#E7F0E0

Accessibility

Contrast checker

1.5:1Fail

3.6:1AA18

4.8:1AA

6.4:1AA

1.5:1Fail

2.4:1Fail

3.2:1AA18

4.3:1AA18

3.6:1AA18

2.4:1Fail

1.3:1Fail

1.8:1Fail

4.8:1AA

3.2:1AA18

1.3:1Fail

1.4:1Fail

6.4:1AA

4.3:1AA18

1.8:1Fail

1.4:1Fail

Similar palettes

More like Seagrass Whisper Tones

Botanical Sketch Green

Coastal Dune Grass