Palette

Verdant Blossom Whispers

Gentle green and cream tones reflecting a tranquil botanical garden awakening with new life.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Verdant Blossom Whispers 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 Verdant Blossom Whispers.

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

Data visualization

#2F4F2F#5F8C5E#90BC91#C2EBCA#E8F7EA

Palette guide

How to use Verdant Blossom Whispers

Overview

The Verdant Blossom Whispers palette captures the delicate essence of a peaceful botanical garden in spring. It transitions from a deep, grounding forest green #2F4F2F to lighter, airy tones like #90BC91 and the very soft #E8F7EA. This harmonious collection is perfect for designs that require a sense of tranquility, freshness, and understated elegance. Developers can utilize these shades to build interfaces that feel gentle and inviting, while designers will find them ideal for branding focused on natural beauty, sustainable practices, or serene user experiences, reflecting a calm awakening of new life.

Best used for

Floral or garden-related businesses
Sustainable fashion brands
Wellness and relaxation apps
Eco-conscious lifestyle blogs
Gentle skincare product packaging
Spring collection marketing materials

Suggested color roles

primary

A deep, sophisticated forest green #2F4F2F, providing excellent grounding for headers, navigation, or key brand elements.

secondary

A balanced, natural green #5F8C5E, suitable for subheadings, secondary buttons, or data visualization elements.

accent

A lighter, refreshing green #90BC91, perfect for subtle highlights, interactive states, or decorative flourishes.

background

An extremely light, almost off-white green #E8F7EA, offering a clean, airy canvas that enhances readability and a sense of calm.

text

A dark charcoal or black provides optimal contrast for body text on #E8F7EA. For headings, #2F4F2F ensures strong visual hierarchy.

Accessibility notes

#2F4F2F and #5F8C5E offer excellent contrast on #E8F7EA for text.
#90BC91 and #C2EBCA may require larger font sizes or bolding to meet WCAG AA contrast on very light backgrounds.
Ensure interactive elements like buttons have clear visual cues and sufficient contrast in all states.
Prioritize contrast for essential content to ensure readability for all users.

Recommended combinations

Deep Garden

Use for strong branding, primary calls to action, or elegant, high-contrast layouts.

#2F4F2F · #5F8C5E · #E8F7EA

Gentle Bloom

Ideal for soft, layered backgrounds, subtle UI elements, or calm informational sections.

#E8F7EA · #C2EBCA · #90BC91

Fresh Accents

Good for secondary buttons, highlighted text, or subtle decorative elements that draw attention.

#5F8C5E · #C2EBCA · #2F4F2F

CSS variables

:root {
  --verdant-blossom-whispers-1: #2F4F2F;
  --verdant-blossom-whispers-2: #5F8C5E;
  --verdant-blossom-whispers-3: #90BC91;
  --verdant-blossom-whispers-4: #C2EBCA;
  --verdant-blossom-whispers-5: #E8F7EA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "verdant-blossom-whispers": {
        1: "#2F4F2F",
        2: "#5F8C5E",
        3: "#90BC91",
        4: "#C2EBCA",
        5: "#E8F7EA",
      }
    }
  }
}

Hex values

Color 1#2F4F2F

Color 2#5F8C5E

Color 3#90BC91

Color 4#C2EBCA

Color 5#E8F7EA

Accessibility

Contrast checker

2.4:1Fail

4.3:1AA18

7:1AAA

8.3:1AAA

2.4:1Fail

1.8:1Fail

3:1Fail

3.5:1AA18

4.3:1AA18

1.8:1Fail

1.6:1Fail

1.9:1Fail

7:1AAA

3:1Fail

1.6:1Fail

1.2:1Fail

8.3:1AAA

3.5:1AA18

1.9:1Fail

1.2:1Fail

Similar palettes

More like Verdant Blossom Whispers