Palette

Verdant Vine Retreat

Inspired by a hidden garden overgrown with lush, vibrant vines, creating a peaceful, natural escape.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Verdant Vine Retreat 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 Vine Retreat.

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

Data visualization

#2E502B#537E4C#8BC181#C3E6BD#4B6E4A

Palette guide

How to use Verdant Vine Retreat

Overview

The Verdant Vine Retreat palette offers a serene and organic collection of greens, perfect for evoking nature's tranquility. Dominated by deep forest shades like #2E502B and #4B6E4A, it transitions smoothly through a vibrant mid-green #537E4C to lighter, airy tones such as #8BC181 and #C3E6BD. This cohesive spectrum is ideal for designs aiming for a natural, refreshing, and calming aesthetic. Designers will find these hues versatile for creating depth and harmony, mimicking the lushness of a secret garden. Developers can apply this palette to build user interfaces that feel grounded and inviting, fostering a sense of peace and growth.

Best used for

Eco-friendly brand identities
Wellness and spa website designs
Nature photography portfolios
Outdoor living product packaging
Gardening app interfaces
Sustainable fashion lookbooks

Suggested color roles

primary

Use #2E502B as a grounding primary for large sections, headers, or main brand elements, providing a deep, stable foundation.

secondary

Apply #537E4C for supporting elements, subheadings, or background patterns, offering a lush, natural contrast to the primary.

accent

Highlight key calls-to-action or interactive elements with #8BC181, its brighter tone drawing attention effectively without being jarring.

background

Employ #C3E6BD for clean, airy backgrounds, allowing content to stand out while maintaining the palette's natural feel.

text

For optimal readability, use a dark color like charcoal or black for body text, or #2E502B for larger headings, against lighter backgrounds like #C3E6BD.

Accessibility notes

Ensure sufficient contrast when pairing #2E502B or #4B6E4A with lighter shades like #C3E6BD for text.
Avoid using #8BC181 on #C3E6BD for small text, as contrast may be insufficient for WCAG AA.
Consider using a starker dark gray or black for body text on any of the lighter greens for maximum readability.
Test color combinations with accessibility checkers, especially for interactive elements using accent colors.

Recommended combinations

Deep Forest Calm

Ideal for sophisticated branding or large content blocks, offering depth and serenity.

#2E502B · #537E4C · #C3E6BD

Garden Fresh

Perfect for refreshing UI elements, icons, or illustrations that need a vibrant touch.

#537E4C · #8BC181 · #C3E6BD

Earthy Contrast

Creates a strong, natural hierarchy suitable for headers, footers, and call-out boxes.

#4B6E4A · #2E502B · #8BC181

CSS variables

:root {
  --verdant-vine-retreat-1: #2E502B;
  --verdant-vine-retreat-2: #537E4C;
  --verdant-vine-retreat-3: #8BC181;
  --verdant-vine-retreat-4: #C3E6BD;
  --verdant-vine-retreat-5: #4B6E4A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "verdant-vine-retreat": {
        1: "#2E502B",
        2: "#537E4C",
        3: "#8BC181",
        4: "#C3E6BD",
        5: "#4B6E4A",
      }
    }
  }
}

Hex values

Color 1#2E502B

Color 2#537E4C

Color 3#8BC181

Color 4#C3E6BD

Color 5#4B6E4A

Accessibility

Contrast checker

1.9:1Fail

4.4:1AA18

6.7:1AA

1.6:1Fail

1.9:1Fail

2.3:1Fail

3.4:1AA18

1.2:1Fail

4.4:1AA18

2.3:1Fail

1.5:1Fail

2.8:1Fail

6.7:1AA

3.4:1AA18

1.5:1Fail

4.2:1AA18

1.6:1Fail

1.2:1Fail

2.8:1Fail

4.2:1AA18

Similar palettes

More like Verdant Vine Retreat

View all earth

Apothecary Bloom Green

Botanical Bloom Burst

Botanical Herb Garden

Desert Succulent Array

Earthy Herb Garden

Enchanted Forest Canopy