Back to palettes

Palette

Spring Bloom Whisper

A delicate collection of fresh greens and soft blues, evoking a quiet spring morning and new botanical growth.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Spring Bloom 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 Spring Bloom Whisper.

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

Data visualization

#D3F9EE#A7DBD8#E0F2E9#8ECCAE#5B9F8D

Palette guide

How to use Spring Bloom Whisper

Overview

The Spring Bloom Whisper palette unveils a delicate collection of fresh greens and soft blues, ideal for projects seeking a serene and natural aesthetic. With shades like the airy #D3F9EE, the calming #A7DBD8, and the grounding #5B9F8D, this palette evokes the tranquility of a quiet spring morning and new botanical growth. Designers and developers can leverage these cool, muted tones to craft refreshing user interfaces, sustainable brand identities, or calming digital experiences. It's an excellent choice for conveying freshness, eco-consciousness, and a gentle connection to nature.

Best used for

  • Eco-friendly and sustainable brand identities
  • Wellness and spa website designs
  • Nature-inspired product packaging
  • Minimalist and calming UI/UX design
  • Garden-themed marketing materials
  • Health and organic food branding

Suggested color roles

primary

Employ #8ECCAE (Medium Aquamarine) for main content areas, offering a fresh, inviting anchor.

secondary

Utilize #A7DBD8 (Light Seafoam) for secondary elements, adding a soothing, complementary layer.

accent

Reserve #5B9F8D (Deep Sage) for impactful accents or important calls-to-action, providing depth and contrast.

background

Choose #D3F9EE (Pale Aqua Green) or #E0F2E9 (Mint Cream) for light, airy backgrounds that promote a sense of calm.

text

Opt for a dark forest green or deep charcoal for body text to ensure excellent readability against the light backgrounds.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using lighter shades like #D3F9EE.
  • Use darker colors like #5B9F8D for critical text elements to meet WCAG contrast standards.
  • Avoid placing light-colored text on #A7DBD8 or #8ECCAE without careful contrast checks.
  • Pair the lightest background colors with a very dark text color, such as black or dark brown, for optimal readability.

Recommended combinations

Fresh Air

Creates an airy, open feel suitable for web headers or serene graphic elements.

#D3F9EE · #A7DBD8 · #8ECCAE

Grounded Nature

Excellent for conveying depth and a connection to nature in logos or detailed illustrations.

#E0F2E9 · #8ECCAE · #5B9F8D

Calm Balance

Provides a balanced visual with a strong accent, ideal for key messages or interactive components.

#D3F9EE · #5B9F8D · #A7DBD8

CSS variables

:root {
  --spring-bloom-whisper-1: #D3F9EE;
  --spring-bloom-whisper-2: #A7DBD8;
  --spring-bloom-whisper-3: #E0F2E9;
  --spring-bloom-whisper-4: #8ECCAE;
  --spring-bloom-whisper-5: #5B9F8D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "spring-bloom-whisper": {
        1: "#D3F9EE",
        2: "#A7DBD8",
        3: "#E0F2E9",
        4: "#8ECCAE",
        5: "#5B9F8D",
      }
    }
  }
}

Related searches

fresh spring green palettenature inspired colorsserene garden huesmint and teal schemecalm botanical palette

Palette colors

Hex values

Color 1#D3F9EE
·
Color 2#A7DBD8
·
Color 3#E0F2E9
·
Color 4#8ECCAE
·
Color 5#5B9F8D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1:1Fail
1.6:1Fail
2.7:1Fail
2
1.3:1Fail
1.3:1Fail
1.2:1Fail
2:1Fail
3
1:1Fail
1.3:1Fail
1.6:1Fail
2.7:1Fail
4
1.6:1Fail
1.2:1Fail
1.6:1Fail
1.7:1Fail
5
2.7:1Fail
2:1Fail
2.7:1Fail
1.7:1Fail

Similar palettes

More like Spring Bloom Whisper

View all cool