Palette

Verdant Floor Embrace

A rich spectrum of greens capturing the deep, fertile beauty of a forest floor teeming with life.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Verdant Floor Embrace 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 Floor Embrace.

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

Data visualization

#4F7942#8BC34A#556B2F#7C9A6C#A4B29E

Palette guide

How to use Verdant Floor Embrace

Overview

The Verdant Floor Embrace palette captures the deep, fertile beauty of a forest floor teeming with life, offering a rich spectrum of earthy greens. Featuring the foundational `#4F7942`, the vibrant `#8BC34A`, and the deepest `#556B2F`, this collection exudes a natural, lush, and grounding feel. The muted `#A4B29E` provides a soft, natural base, allowing the richer greens to stand out. Designers and developers can leverage these hex codes to create robust, organic interfaces or brand identities that connect with authenticity and the enduring power of nature, perfect for both digital and physical applications.

Best used for

Agricultural or organic farming branding
Earth-friendly product packaging and labels
Garden design and landscaping services
Educational content on botany or ecosystems
Rustic cafe or restaurant interiors
Hiking and outdoor activity websites

Suggested color roles

primary

Use `#4F7942` as the rich, foundational green, conveying growth and stability.

secondary

Employ `#556B2F` for the deepest elements, providing a strong, earthy anchor.

accent

Apply `#8BC34A` for bright, energetic highlights, interactive elements, or key calls to action.

background

Utilize `#A4B29E` as a muted, natural background that complements the richer greens.

text

Choose `#556B2F` for primary text on light backgrounds for excellent readability and an organic feel.

Accessibility notes

Ensure `#556B2F` and `#4F7942` text on `#A4B29E` provides strong contrast, meeting WCAG AA standards.
Use `#8BC34A` for accents or large headings, but avoid for small body text on lighter greens due to potential low contrast.
Verify that interactive elements using `#8BC34A` have sufficient contrast against their background.
Always check all text and UI element contrast ratios to ensure accessibility for all users.

Recommended combinations

Earthy Contrast

Creates a vibrant, grounded contrast, ideal for hero sections or key feature areas.

#556B2F · #8BC34A · #A4B29E

Lush Layers

Excellent for showcasing depth and texture, perfect for illustrations or infographics.

#4F7942 · #7C9A6C · #556B2F

Fresh Growth

Ideal for soft backgrounds, headers, or elements that need a delicate, refreshing touch.

#8BC34A · #7C9A6C · #A4B29E

CSS variables

:root {
  --verdant-floor-embrace-1: #4F7942;
  --verdant-floor-embrace-2: #8BC34A;
  --verdant-floor-embrace-3: #556B2F;
  --verdant-floor-embrace-4: #7C9A6C;
  --verdant-floor-embrace-5: #A4B29E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "verdant-floor-embrace": {
        1: "#4F7942",
        2: "#8BC34A",
        3: "#556B2F",
        4: "#7C9A6C",
        5: "#A4B29E",
      }
    }
  }
}

Hex values

Color 1#4F7942

Color 2#8BC34A

Color 3#556B2F

Color 4#7C9A6C

Color 5#A4B29E

Accessibility

Contrast checker

2.4:1Fail

1.2:1Fail

1.6:1Fail

2.3:1Fail

2.4:1Fail

2.8:1Fail

1.5:1Fail

1.1:1Fail

1.2:1Fail

2.8:1Fail

1.9:1Fail

2.7:1Fail