Palette

Emerald Moss Canopy

Deep and inviting greens reflecting a dense, healthy forest canopy, rich with ancient moss.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Emerald Moss Canopy 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 Emerald Moss Canopy.

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

Data visualization

#4C7D54#73A07A#9ABDA2#3B5F42#608867

Palette guide

How to use Emerald Moss Canopy

Overview

The Emerald Moss Canopy palette delves into a dense, healthy forest, rich with ancient moss, offering deep and inviting greens. Featuring grounding tones like #3B5F42 and #4C7D54, it transitions through the balanced #608867 and #73A07A, culminating in the lighter, airy #9ABDA2. This collection is perfect for designs seeking to convey natural tranquility, organic growth, and a sense of timeless calm. Ideal for eco-friendly brands, botanical designs, or any digital interface that benefits from a harmonious, earthy, and soothing aesthetic. The subtle variations within this green spectrum provide excellent visual flow and depth, creating an immersive user experience.

Best used for

Botanical garden branding
Eco-conscious product packaging
Nature and hiking app interfaces
Sustainable agriculture marketing
Forestry and conservation websites
Relaxation and meditation content

Suggested color roles

primary

Use #3B5F42 as the deepest, most stable color for main headers, branding, or strong UI elements.

secondary

Employ #4C7D54 as a supportive deep green for subheadings, important text, or active states.

accent

Apply #73A07A as a refreshing, subtle accent for interactive elements or gentle highlights.

background

Utilize #9ABDA2 as a light, airy background for clean content areas, providing a calm and clear base.

text

Pair #3B5F42 with light backgrounds for strong contrast, or use white/light gray on darker backgrounds.

Accessibility notes

#9ABDA2 may require darker text (e.g., #3B5F42 or black) to ensure readability against lighter backgrounds.
Pair #3B5F42 or #4C7D54 with white or off-white text for optimal legibility on dark backgrounds.
Avoid using #608867 directly on #73A07A for small text due to potential low contrast.
Always verify WCAG AA contrast standards for all text and background combinations.

Recommended combinations

Forest Floor

Creates a strong, grounding foundation for primary branding or elegant dark mode interfaces.

#3B5F42 · #4C7D54 · #608867

Mossy Light

Ideal for clean, inviting layouts with light backgrounds and clear, readable text.

#9ABDA2 · #73A07A · #3B5F42

Canopy Layers

Suitable for interactive elements, progress indicators, or subtle informational displays.

#608867 · #73A07A · #4C7D54

CSS variables

:root {
  --emerald-moss-canopy-2-1: #4C7D54;
  --emerald-moss-canopy-2-2: #73A07A;
  --emerald-moss-canopy-2-3: #9ABDA2;
  --emerald-moss-canopy-2-4: #3B5F42;
  --emerald-moss-canopy-2-5: #608867;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "emerald-moss-canopy-2": {
        1: "#4C7D54",
        2: "#73A07A",
        3: "#9ABDA2",
        4: "#3B5F42",
        5: "#608867",
      }
    }
  }
}

Hex values

Color 1#4C7D54

Color 2#73A07A

Color 3#9ABDA2

Color 4#3B5F42

Color 5#608867

Accessibility

Contrast checker

1.6:1Fail

2.3:1Fail

1.5:1Fail

1.2:1Fail

1.6:1Fail

1.4:1Fail

2.4:1Fail

1.3:1Fail

2.3:1Fail

1.4:1Fail

3.5:1AA18

2:1Fail

1.5:1Fail

2.4:1Fail

3.5:1AA18

1.8:1Fail

1.2:1Fail

1.3:1Fail

2:1Fail

1.8:1Fail

Similar palettes

More like Emerald Moss Canopy

View all earth

Verdant Forest Canopy

Enchanted Forest Canopy

Enchanted Forest Glade

Enchanted Grove

Forest Fern Canopy

Jade Canopy Gaze