Back to palettes

Palette

Forest Floor Gems

Rich, deep greens and mossy tones mirroring the hidden beauty of the forest floor's small gems.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3D5A47#6B8E7B#9CD0AA#2A4434#5A7767

Palette guide

How to use Forest Floor Gems

Overview

The Forest Floor Gems palette unveils rich, deep greens and mossy tones, mirroring the hidden beauty of a forest's small treasures. Featuring grounding shades like #2A4434 and #3D5A47, it establishes a luxurious and serene foundation. Lighter, refreshing greens such as #5A7767, #6B8E7B, and the bright #9CD0AA introduce vitality and depth, reflecting dappled light on verdant moss. This palette is perfect for designers and developers seeking to create sophisticated, eco-conscious, or premium digital experiences, branding, or art. Its blend of deep and vibrant greens evokes a sense of natural elegance and tranquility, making it highly impactful.

Best used for

  • Luxury eco-tourism branding
  • High-end natural cosmetics packaging
  • Botanical garden website design
  • Sustainable fashion accent colors
  • Interior design for sophisticated natural spaces
  • Environmental conservation initiatives

Suggested color roles

primary

Utilize #2A4434 as a deep, luxurious primary color for headers, key branding, or impactful background elements.

secondary

Apply #3D5A47 for supportive text, subheadings, or larger UI components, offering a rich, balanced green.

accent

Introduce #9CD0AA as a bright, refreshing accent for calls-to-action, interactive elements, or illustrative highlights.

background

Employ #6B8E7B as a soft, natural background color that provides a calming base and good contrast.

text

Select #2A4434 or a deep charcoal for primary text, ensuring excellent legibility on lighter palette shades.

Accessibility notes

  • Ensure #2A4434 provides strong contrast for text when used on #9CD0AA to meet WCAG AA standards.
  • Use #3D5A47 for larger text or headings on lighter backgrounds, testing for sufficient contrast.
  • Avoid using #9CD0AA for small text due to its brightness and potential for lower contrast.
  • Carefully evaluate all text and background pairings, especially with mid-tone greens, for optimal readability.

Recommended combinations

Deep & Lush

Excellent for primary branding, key messaging, and vibrant accents that stand out.

#2A4434 · #9CD0AA · #3D5A47

Mossy Harmony

Ideal for illustrations, UI elements, or natural patterns that require a cohesive green gradient.

#3D5A47 · #5A7767 · #6B8E7B

Fresh Contrast

Perfect for call-to-action buttons, subtle highlights, or decorative elements that need gentle emphasis.

#2A4434 · #6B8E7B · #9CD0AA

CSS variables

:root {
  --forest-floor-gems-1: #3D5A47;
  --forest-floor-gems-2: #6B8E7B;
  --forest-floor-gems-3: #9CD0AA;
  --forest-floor-gems-4: #2A4434;
  --forest-floor-gems-5: #5A7767;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "forest-floor-gems": {
        1: "#3D5A47",
        2: "#6B8E7B",
        3: "#9CD0AA",
        4: "#2A4434",
        5: "#5A7767",
      }
    }
  }
}

Related searches

deep forest green palettemossy gem tonesluxurious nature colorstranquil green brandingrich woodland scheme

Palette colors

Hex values

Color 1#3D5A47
·
Color 2#6B8E7B
·
Color 3#9CD0AA
·
Color 4#2A4434
·
Color 5#5A7767
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.1:1Fail
4.4:1AA18
1.4:1Fail
1.6:1Fail
2
2.1:1Fail
2.1:1Fail
2.9:1Fail
1.4:1Fail
3
4.4:1AA18
2.1:1Fail
6.1:1AA
2.8:1Fail
4
1.4:1Fail
2.9:1Fail
6.1:1AA
2.2:1Fail
5
1.6:1Fail
1.4:1Fail
2.8:1Fail
2.2:1Fail

Similar palettes

More like Forest Floor Gems

View all earth