Palette

Spring Meadow Bloom

Delicate greens and gentle pastels, reflecting the soft, new growth and fresh feel of a spring meadow.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F0FFF0#98FB98#ADFF2F#3CB371#66CDAA

Palette guide

How to use Spring Meadow Bloom

Overview

The Spring Meadow Bloom palette offers a fresh and delicate array of greens, perfectly embodying the soft, new growth of springtime. This calm collection is centered around a spectrum of verdant hues, ranging from the very light, almost white #F0FFF0, which provides an airy foundation, to the deeper, more grounding #3CB371. The vibrant chartreuse #ADFF2F introduces a lively, energetic pop, while #98FB98 and #66CDAA offer gentle, soothing mid-tones. Designers and developers can leverage this palette to craft serene and natural aesthetics for various projects. It's especially suited for creating clean, organic interfaces, tranquil branding, or any design requiring a sense of freshness and calm, leveraging its pastel yet lively character.

Best used for

Eco-conscious brand identity
Health and wellness app interfaces
Botanical garden website design
Sustainable product packaging
Minimalist nature photography portfolios
Interior design concepts for serene spaces

Suggested color roles

primary

#3CB371 - A solid, vibrant medium green that can anchor designs, suitable for main interactive elements, logos, or hero sections.

secondary

#66CDAA - This calming teal-green works well for supporting elements, secondary navigation, or complementary graphics, adding depth.

accent

#ADFF2F - Deploy this bright, energetic chartreuse sparingly for call-to-action buttons, alerts, or to highlight key information with a fresh pop.

background

#F0FFF0 - An excellent, almost pure white background, ensuring maximum readability and a clean, expansive feel.

text

This light green is generally too light for body text. Use a dark charcoal like #333333 or black. #98FB98 can be used for decorative headings on a dark background.

Accessibility notes

The very light background #F0FFF0 requires dark text (e.g., black or dark gray) for optimal readability and WCAG compliance.
Avoid placing #98FB98 or #ADFF2F text on light backgrounds like #F0FFF0, as contrast will be insufficient.
#3CB371 and #66CDAA can support white text, but always verify contrast, especially for smaller font sizes.
Ensure interactive elements are clearly distinguishable; rely on sufficient color contrast and not just hue differences.

Recommended combinations

Fresh & Clean

Create a crisp, modern look with a clean background, strong primary green, and a lively accent.

#F0FFF0 · #3CB371 · #ADFF2F

Calm Depths

Ideal for layered designs or gradients, providing a soothing, harmonious blend of green tones.

#66CDAA · #3CB371 · #98FB98

Vibrant Highlight

Use for emphasizing key elements or calls-to-action against a light background with a supportive secondary.

#F0FFF0 · #66CDAA · #ADFF2F

CSS variables

:root {
  --spring-meadow-bloom-1: #F0FFF0;
  --spring-meadow-bloom-2: #98FB98;
  --spring-meadow-bloom-3: #ADFF2F;
  --spring-meadow-bloom-4: #3CB371;
  --spring-meadow-bloom-5: #66CDAA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "spring-meadow-bloom": {
        1: "#F0FFF0",
        2: "#98FB98",
        3: "#ADFF2F",
        4: "#3CB371",
        5: "#66CDAA",
      }
    }
  }
}

Hex values

Color 1#F0FFF0

Color 2#98FB98

Color 3#ADFF2F

Color 4#3CB371

Color 5#66CDAA

Accessibility

Contrast checker

1.2:1Fail

2.6:1Fail

1.9:1Fail

1.2:1Fail

1:1Fail

2.1:1Fail

1.5:1Fail

1.2:1Fail

1:1Fail

2.2:1Fail

1.6:1Fail

2.6:1Fail

2.1:1Fail

2.2:1Fail

1.4:1Fail

1.9:1Fail

1.5:1Fail

1.6:1Fail

1.4:1Fail

Similar palettes

More like Spring Meadow Bloom

Spring Meadow Bloom

See it in context.

Ready when you are.

Built with Spring Meadow Bloom.

How to use Spring Meadow Bloom

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Fresh & Clean

Calm Depths

Vibrant Highlight

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Spring Meadow Bloom