Palette

Emerald Canopy Hush

This palette captures the serene and muted tones of a deep, ancient forest floor, rich with moss and decaying leaves.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2A362B#405C49#7D9B82#BFCCB5#D0B195

Palette guide

How to use Emerald Canopy Hush

Overview

The Emerald Canopy Hush palette captures the serene and muted tones of a deep, ancient forest floor, rich with moss and decaying leaves. This tranquil collection features a very dark muted green (#2A362B), a dark muted green (#405C49), a softer medium green (#7D9B82), a light muted green (#BFCCB5), and a warm muted beige-brown (#D0B195). Ideal for designers and developers seeking a natural, understated, and calming aesthetic, this palette is perfect for projects that convey a sense of peace, stability, and organic beauty, much like the quiet, untouched floor of a timeless woodland.

Best used for

Sustainable living blogs or websites
Eco-friendly product packaging
Wellness and mindfulness app interfaces
Interior design for serene, natural spaces
Digital art depicting misty forest scenes
Brand identities for organic or handmade goods

Suggested color roles

primary

Very dark muted green (#2A362B) serves as a grounding primary, perfect for headers, navigation, or strong brand elements, providing deep stability.

secondary

Dark muted green (#405C49) acts as an earthy secondary, ideal for subheadings, interactive components, or sections needing a subtle, natural feel.

accent

Warm muted beige-brown (#D0B195) offers an organic contrast accent, perfect for highlights, small icons, or decorative details that add a touch of natural warmth.

background

Light muted green (#BFCCB5) provides a soft, expansive background, excellent for content areas or large sections where readability and a calm feel are desired.

text

Very dark muted green (#2A362B) works well for body text on lighter backgrounds, ensuring high readability with a cohesive, natural aesthetic, or use deep charcoal for contrast.

Accessibility notes

Very dark muted green (#2A362B) provides excellent contrast against light muted green (#BFCCB5) for readable body text.
Ensure sufficient contrast if using dark muted green (#405C49) for text on the light muted green (#BFCCB5) background.
Always verify that all text and interactive element contrasts meet WCAG 2.1 AA standards for optimal accessibility.
Avoid placing softer medium green (#7D9B82) on light muted green (#BFCCB5) for critical text due to potential low contrast.

Recommended combinations

Forest Floor Calm

Creates a deep, tranquil visual hierarchy, ideal for backgrounds, main content sections, or sophisticated graphic elements.

#2A362B · #405C49 · #BFCCB5

Moss & Earth

Excellent for highlights, interactive elements, or bringing a subtle warmth and organic contrast to the design.

#D0B195 · #7D9B82 · #2A362B

Shaded Serenity

Provides a balanced and calming combination for subheadings, descriptive text, or subtle background patterns.

#405C49 · #BFCCB5 · #D0B195

CSS variables

:root {
  --emerald-canopy-hush-1: #2A362B;
  --emerald-canopy-hush-2: #405C49;
  --emerald-canopy-hush-3: #7D9B82;
  --emerald-canopy-hush-4: #BFCCB5;
  --emerald-canopy-hush-5: #D0B195;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "emerald-canopy-hush": {
        1: "#2A362B",
        2: "#405C49",
        3: "#7D9B82",
        4: "#BFCCB5",
        5: "#D0B195",
      }
    }
  }
}

Hex values

Color 1#2A362B

Color 2#405C49

Color 3#7D9B82

Color 4#BFCCB5

Color 5#D0B195

Accessibility

Contrast checker

1.7:1Fail

4.1:1AA18

7.5:1AAA

6.3:1AA

1.7:1Fail

2.4:1Fail

4.4:1AA18

3.7:1AA18

4.1:1AA18

2.4:1Fail

1.8:1Fail

1.5:1Fail