Back to palettes

Palette

Mossy Undergrowth

A serene palette capturing the tranquil, earthy tones of a quiet forest floor.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Mossy Undergrowth 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 Mossy Undergrowth.

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

Data visualization

#4F6D55#88AB7F#D2B78D#6B4E3E#A0A58B

Palette guide

How to use Mossy Undergrowth

Overview

The Mossy Undergrowth palette delivers a serene blend of forest greens, earthy browns, and subtle golden-beige, capturing the tranquil essence of a quiet woodland floor. This collection features the calming deep green of #4F6D55, the refreshing lighter green #88AB7F, and the grounding, rich brown of #6B4E3E. The warm, inviting #D2B78D and the muted #A0A58B add a touch of light and organic texture, reminiscent of sun-dappled earth. It's a versatile palette for designs aiming to evoke natural beauty, rustic charm, and a sense of peaceful authenticity. Designers can leverage its harmonious balance for both digital and physical applications, creating a warm and inviting atmosphere.

Best used for

  • artisanal craft branding
  • farm-to-table restaurant menus
  • nature photography websites
  • eco-friendly product packaging
  • garden center branding
  • rustic wedding invitations

Suggested color roles

primary

Use #4F6D55 as a primary color for main headers or key UI elements, offering a strong, natural green anchor.

secondary

Apply #88AB7F for secondary backgrounds, illustrations, or content blocks, bringing a lighter, fresh green tone.

accent

Introduce #6B4E3E as a grounding accent for important details or strong calls to action, providing rich depth.

background

Employ #D2B78D for a warm, inviting background, or #A0A58B for a slightly cooler, natural canvas.

text

For optimal readability, use #6B4E3E for body text on lighter backgrounds like #D2B78D or #A0A58B, or a dark charcoal.

Accessibility notes

  • Ensure sufficient contrast when pairing #6B4E3E text with #D2B78D or #A0A58B backgrounds for WCAG AA compliance.
  • Avoid using #88AB7F for small text on #A0A58B as contrast may be insufficient.
  • Pair #4F6D55 with #D2B78D for larger text or graphical elements to ensure good visibility.
  • Consider a dark charcoal or black for critical text elements on very light backgrounds for maximum readability.

Recommended combinations

Forest Canopy

Ideal for creating depth in illustrations or layered UI elements, evoking a dense woodland feel.

#4F6D55 · #88AB7F · #6B4E3E

Earthy Path

Excellent for body content, using #D2B78D as background, #A0A58B for secondary elements, and #6B4E3E for headings.

#D2B78D · #A0A58B · #6B4E3E

Moss & Stone

Suitable for subtle branding elements or icons, showcasing the natural green-gray harmony.

#88AB7F · #A0A58B · #4F6D55

CSS variables

:root {
  --mossy-undergrowth-1: #4F6D55;
  --mossy-undergrowth-2: #88AB7F;
  --mossy-undergrowth-3: #D2B78D;
  --mossy-undergrowth-4: #6B4E3E;
  --mossy-undergrowth-5: #A0A58B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mossy-undergrowth": {
        1: "#4F6D55",
        2: "#88AB7F",
        3: "#D2B78D",
        4: "#6B4E3E",
        5: "#A0A58B",
      }
    }
  }
}

Related searches

forest green brown paletterustic earthy color schemenatural woodland tonesorganic green beige colorsserene nature palette

Palette colors

Hex values

Color 1#4F6D55
·
Color 2#88AB7F
·
Color 3#D2B78D
·
Color 4#6B4E3E
·
Color 5#A0A58B
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
3:1Fail
1.3:1Fail
2.3:1Fail
2
2.2:1Fail
1.3:1Fail
2.9:1Fail
1:1Fail
3
3:1Fail
1.3:1Fail
3.9:1AA18
1.3:1Fail
4
1.3:1Fail
2.9:1Fail
3.9:1AA18
3:1Fail
5
2.3:1Fail
1:1Fail
1.3:1Fail
3:1Fail

Similar palettes

More like Mossy Undergrowth

View all earth