Palette

Spring Dewdrop Greens

Fresh and light greens, glistening with the crisp beauty of spring dewdrops on new leaves.

coolnatural5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Spring Dewdrop Greens 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 Dewdrop Greens.

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

Data visualization

#3B7A57#5FA27A#8ACAA3#B8F2CD#E0FFF1

Palette guide

How to use Spring Dewdrop Greens

Overview

The Spring Dewdrop Greens palette offers a refreshing collection of greens, capturing the crisp, glistening beauty of spring dewdrops on new leaves. Ranging from the deep forest green #3B7A57 to the vibrant #5FA27A, the soft #8ACAA3, the light #B8F2CD, and the almost-white #E0FFF1, this palette provides a harmonious gradient. It's an excellent choice for designers aiming to create fresh, clean, and natural visuals. The progressive lightness of the greens makes it highly versatile for designs that require a sense of growth, tranquility, and organic purity, suitable for various digital and print applications.

Best used for

Eco-conscious brand identity and packaging
Health and wellness app interfaces
Nature-themed websites or environmental initiatives
Spa and relaxation promotional materials
Clean and minimalist UI/UX designs
Spring season marketing and editorial content

Suggested color roles

primary

Use #5FA27A as a primary accent for buttons or key headings, providing a fresh, inviting focal point.

secondary

Employ #3B7A57 for larger content blocks or important sections, offering a grounding and sophisticated depth.

accent

Introduce #B8F2CD for subtle highlights, icons, or interactive elements, adding a light, airy touch.

background

Utilize #E0FFF1 for clean, luminous backgrounds that ensure excellent readability for dark text.

text

For body text, a dark charcoal or black offers optimal readability. White text works exceptionally well on #3B7A57 and #5FA27A.

Accessibility notes

Ensure sufficient contrast for text on lighter greens like #B8F2CD and #E0FFF1; dark text is required.
White text provides excellent contrast on the darker greens (#3B7A57, #5FA27A, #8ACAA3); verify WCAG compliance.
Avoid using mid-tone greens for small text unless the background provides strong contrast.
Test all color combinations for interactive elements to ensure clear visual feedback and accessibility.

Recommended combinations

Fresh Cascade

Creates a light, airy, and refreshing gradient, perfect for soft backgrounds or delicate illustrations.

#E0FFF1 · #B8F2CD · #8ACAA3

Forest Dew

Offers a deeper, more grounded green spectrum, ideal for strong branding or impactful sections.

#3B7A57 · #5FA27A · #8ACAA3

Crisp Contrast

Provides a clean and striking contrast, excellent for highlighting key information or call-to-actions.

#E0FFF1 · #3B7A57 · #5FA27A

CSS variables

:root {
  --spring-dewdrop-greens-1: #3B7A57;
  --spring-dewdrop-greens-2: #5FA27A;
  --spring-dewdrop-greens-3: #8ACAA3;
  --spring-dewdrop-greens-4: #B8F2CD;
  --spring-dewdrop-greens-5: #E0FFF1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "spring-dewdrop-greens": {
        1: "#3B7A57",
        2: "#5FA27A",
        3: "#8ACAA3",
        4: "#B8F2CD",
        5: "#E0FFF1",
      }
    }
  }
}

Hex values

Color 1#3B7A57

Color 2#5FA27A

Color 3#8ACAA3

Color 4#B8F2CD

Color 5#E0FFF1

Accessibility

Contrast checker

1.7:1Fail

2.7:1Fail

4:1AA18

4.8:1AA

1.7:1Fail

1.6:1Fail

2.4:1Fail

2.8:1Fail

2.7:1Fail

1.6:1Fail

1.5:1Fail

1.8:1Fail

4:1AA18

2.4:1Fail

1.5:1Fail

1.2:1Fail

4.8:1AA

2.8:1Fail

1.8:1Fail

1.2:1Fail

Similar palettes

More like Spring Dewdrop Greens

View all cool

Dewdrop Emerald Vine

Emerald Bamboo Sway

Emerald Grove Sanctuary

Emerald Peak Summit

Emerald River Stone

Minty Spring