Back to palettes

Palette

Verdant Forest Floor

A lush and calming blend, like sunlight filtering through the dense, green forest canopy.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2E513F#47795C#6FA67A#9BB98E#D0DED4

Palette guide

How to use Verdant Forest Floor

Overview

The Verdant Forest Floor palette offers a lush and calming blend, reminiscent of sunlight filtering through a dense, green forest canopy. This serene collection features the grounding `#2E513F`, the balanced `#47795C`, and the gentle `#6FA67A`, all harmonized by the soft, airy `#D0DED4`. Designers and developers can leverage these hex codes to craft interfaces and brands that convey tranquility, botanical richness, and natural harmony. It's particularly effective for projects aiming for a peaceful, inviting aesthetic that resonates with sustainable practices and the quiet beauty of nature across digital and print mediums.

Best used for

  • Botanical product packaging and branding
  • Sustainable living blogs and websites
  • Yoga or mindfulness studio branding
  • Home and garden decor concepts
  • Educational apps on plant life
  • Calm and inviting website interfaces

Suggested color roles

primary

Use `#47795C` as the balanced, calming main green, conveying natural serenity.

secondary

Employ `#2E513F` for the deepest elements, providing a strong, grounding anchor.

accent

Apply `#6FA67A` for gentle highlights, interactive elements, or secondary calls to action.

background

Utilize `#D0DED4` as a soft, light, airy background, enhancing the palette's calming feel.

text

Choose `#2E513F` for primary text on light backgrounds for excellent readability and a sophisticated touch.

Accessibility notes

  • Ensure `#2E513F` and `#47795C` text on `#D0DED4` provides excellent contrast, meeting WCAG AA standards.
  • Use `#9BB98E` for larger headings or accents, but avoid for small body text on light backgrounds due to potential low contrast.
  • Verify that interactive elements using lighter shades have sufficient contrast against their background.
  • Always check all text and UI element contrast ratios to ensure accessibility for all users.

Recommended combinations

Deep Calm

Creates a strong, calming contrast, ideal for hero sections or impactful visual statements.

#2E513F · #6FA67A · #D0DED4

Lush Layers

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

#47795C · #9BB98E · #2E513F

Gentle Light

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

#6FA67A · #9BB98E · #D0DED4

CSS variables

:root {
  --verdant-forest-floor-2-1: #2E513F;
  --verdant-forest-floor-2-2: #47795C;
  --verdant-forest-floor-2-3: #6FA67A;
  --verdant-forest-floor-2-4: #9BB98E;
  --verdant-forest-floor-2-5: #D0DED4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "verdant-forest-floor-2": {
        1: "#2E513F",
        2: "#47795C",
        3: "#6FA67A",
        4: "#9BB98E",
        5: "#D0DED4",
      }
    }
  }
}

Related searches

lush green calm paletteforest floor color schemeserene botanical designsustainable web colorsnatural green branding

Palette colors

Hex values

Color 1#2E513F
·
Color 2#47795C
·
Color 3#6FA67A
·
Color 4#9BB98E
·
Color 5#D0DED4
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
3.1:1AA18
4.1:1AA18
6.4:1AA
2
1.8:1Fail
1.8:1Fail
2.3:1Fail
3.6:1AA18
3
3.1:1AA18
1.8:1Fail
1.3:1Fail
2:1Fail
4
4.1:1AA18
2.3:1Fail
1.3:1Fail
1.6:1Fail
5
6.4:1AA
3.6:1AA18
2:1Fail
1.6:1Fail

Similar palettes

More like Verdant Forest Floor

View all earth