Palette

Forest Nymph Bloom

A lively blend of greens and soft pastels, reminiscent of an enchanted forest coming to life in spring, full of renewal and grace.

vibrantnatural5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Forest Nymph 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 Forest Nymph Bloom.

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

Data visualization

#3B704E#6EA07E#A0D0B4#D0EADF#2A5A40

Palette guide

How to use Forest Nymph Bloom

Overview

The Forest Nymph Bloom palette is a lively and refreshing blend of greens and soft pastels, evoking the spirit of an enchanted forest coming to life in spring. This palette, featuring vibrant #3B704E, soothing #6EA07E, and ethereal #A0D0B4, along with the very light #D0EADF and deep #2A5A40, is perfect for designers and developers aiming to convey renewal, grace, and natural beauty. Its range from deep, grounding greens to airy, almost transparent pastels allows for dynamic and harmonious compositions, ideal for projects seeking a fresh, optimistic, and organic aesthetic.

Best used for

Spring and summer fashion collections
Eco-friendly and sustainable brand identities
Children's book illustrations and educational apps
Wellness and mindfulness application interfaces
Garden design and botanical website themes
Packaging for fresh produce or organic cosmetics

Suggested color roles

primary

Use #3B704E as a strong, vibrant green for main branding, headers, or significant graphical elements, anchoring the design.

secondary

Apply #6EA07E for supporting content blocks, subheadings, or as a complementary background, offering a softer yet distinct green.

accent

Highlight with #A0D0B4 for interactive elements, calls-to-action, or delicate illustrations, providing a fresh and inviting pop.

background

Employ #D0EADF as a light, airy base for main content areas, ensuring excellent readability and a clean, refreshing feel.

text

For dark text on light backgrounds, #2A5A40 provides excellent contrast and maintains the palette's natural aesthetic. Alternatively, #3B704E works well.

Accessibility notes

Ensure sufficient contrast for text, especially when using lighter greens like #A0D0B4 on backgrounds close to #D0EADF.
The darkest color, #2A5A40, provides excellent readability for text against the lighter shades in the palette.
Avoid using #D0EADF for small text unless it is on a significantly darker background like #3B704E.
Consider larger font sizes or bolding for text set in #6EA07E on #D0EADF to enhance legibility.

Recommended combinations

Spring Fresh

Ideal for a primary brand identity, website hero sections, or a clean, vibrant interface with clear hierarchy.

#3B704E · #D0EADF · #A0D0B4

Nymph's Whisper

Perfect for secondary content, delicate patterns, or illustrations, combining soft and deep greens harmoniously.

#6EA07E · #A0D0B4 · #2A5A40

Growth & Bloom

Excellent for text-heavy sections or information design, providing strong contrast and a natural, grounded feel.

#2A5A40 · #D0EADF · #3B704E

CSS variables

:root {
  --forest-nymph-bloom-1: #3B704E;
  --forest-nymph-bloom-2: #6EA07E;
  --forest-nymph-bloom-3: #A0D0B4;
  --forest-nymph-bloom-4: #D0EADF;
  --forest-nymph-bloom-5: #2A5A40;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "forest-nymph-bloom": {
        1: "#3B704E",
        2: "#6EA07E",
        3: "#A0D0B4",
        4: "#D0EADF",
        5: "#2A5A40",
      }
    }
  }
}

Hex values

Color 1#3B704E

Color 2#6EA07E

Color 3#A0D0B4

Color 4#D0EADF

Color 5#2A5A40

Accessibility

Contrast checker

1.9:1Fail

3.4:1AA18

4.6:1AA

1.4:1Fail

1.9:1Fail

1.7:1Fail

2.4:1Fail

2.7:1Fail

3.4:1AA18

1.7:1Fail

1.4:1Fail

4.6:1AA

2.4:1Fail

1.4:1Fail

6.3:1AA

1.4:1Fail

2.7:1Fail

4.6:1AA

6.3:1AA

Similar palettes

More like Forest Nymph Bloom

Forest Nymph Bloom

See it in context.

Ready when you are.

Built with Forest Nymph Bloom.

How to use Forest Nymph Bloom

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Spring Fresh

Nymph's Whisper

Growth & Bloom

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Forest Nymph Bloom