Palette

Whispering Meadow Breeze

Soft, airy greens evoking a gentle breeze rustling through a sunlit, blooming meadow.

PastelCalm5 colors

More Pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Whispering Meadow Breeze 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 Whispering Meadow Breeze.

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

Data visualization

#A1C49C#C2E0BD#E3F8DD#80AC7D#648A61

Palette guide

How to use Whispering Meadow Breeze

Overview

The Whispering Meadow Breeze palette offers a fresh and airy collection of light greens, evoking the gentle calm of a sunlit spring meadow. It features a soft sage #A1C49C, a delicate mint #C2E0BD, a very light, almost white green #E3F8DD, a deeper meadow green #80AC7D, and a grounded forest green #648A61. This palette is perfect for designers and developers seeking to create serene, natural, and inviting experiences. Its harmonious blend promotes feelings of tranquility, health, and freshness, making it ideal for applications across wellness, eco-friendly branding, or any project aiming for a light and uplifting aesthetic.

Best used for

Health and wellness app interfaces
Eco-conscious product branding
Baby and children's product design
Garden and landscape design websites
Fresh food packaging and marketing
Nature-themed educational content

Suggested color roles

primary

Use #80AC7D as a leading, inviting green for main sections, buttons, or hero elements, signifying nature and vitality.

secondary

Employ #A1C49C for supporting content blocks, secondary navigation, or as a lighter background for subtle contrast.

accent

Apply #648A61 for strong calls to action, important text, or as a grounding element, providing necessary depth and emphasis.

background

Utilize #E3F8DD as the primary background color, offering a clean, airy, and refreshing canvas that enhances the other greens.

text

For clear readability on lighter backgrounds, use #648A61 for body text or a standard dark charcoal/black.

Accessibility notes

Ensure sufficient contrast for text on very light backgrounds like #E3F8DD; use #648A61 or #80AC7D.
Lighter greens such as #C2E0BD may not provide enough contrast for small text when paired with other light colors.
For interactive elements, ensure they have sufficient contrast against their background, ideally using #648A61.
Consider larger font sizes or bolding for text using #A1C49C on mid-tone backgrounds to improve legibility.

Recommended combinations

Fresh Meadow Path

Ideal for soft, layered backgrounds, hero sections, or tranquil UI elements in health and wellness apps.

#E3F8DD · #C2E0BD · #A1C49C

Breezy Greens

Perfect for content blocks, card designs, or visual elements requiring a natural progression of green tones.

#A1C49C · #80AC7D · #648A61

Natural Contrast

Use for clean layouts with prominent, readable text and supportive accent elements, conveying freshness.

#E3F8DD · #648A61 · #80AC7D

CSS variables

:root {
  --whispering-meadow-breeze-2-1: #A1C49C;
  --whispering-meadow-breeze-2-2: #C2E0BD;
  --whispering-meadow-breeze-2-3: #E3F8DD;
  --whispering-meadow-breeze-2-4: #80AC7D;
  --whispering-meadow-breeze-2-5: #648A61;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "whispering-meadow-breeze-2": {
        1: "#A1C49C",
        2: "#C2E0BD",
        3: "#E3F8DD",
        4: "#80AC7D",
        5: "#648A61",
      }
    }
  }
}

Hex values

Color 1#A1C49C

Color 2#C2E0BD

Color 3#E3F8DD

Color 4#80AC7D

Color 5#648A61

Accessibility

Contrast checker

1.3:1Fail

1.7:1Fail

1.3:1Fail

2:1Fail

1.3:1Fail

1.8:1Fail

2.7:1Fail

1.7:1Fail

1.3:1Fail

2.3:1Fail

3.5:1AA18

1.3:1Fail

1.8:1Fail

2.3:1Fail

1.5:1Fail

2:1Fail

2.7:1Fail

3.5:1AA18

1.5:1Fail

Similar palettes

More like Whispering Meadow Breeze

Whispering Meadow Breeze

See it in context.

Ready when you are.

Built with Whispering Meadow Breeze.

How to use Whispering Meadow Breeze

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Fresh Meadow Path

Breezy Greens

Natural Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Whispering Meadow Breeze