Palette

Shadowed Forest Realm

Deep, hushed greens capture the quiet, mysterious beauty of a dense forest floor, dappled with faint light.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Shadowed Forest Realm 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 Shadowed Forest Realm.

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

Data visualization

#1C2A20#3A4D3B#627D5F#A7C49C#DDE4CC

Palette guide

How to use Shadowed Forest Realm

Overview

The Shadowed Forest Realm palette offers a serene and earthy progression of deep, muted greens, capturing the quiet mystery of a dense forest floor. It begins with the profound #1C2A20, moving through the balanced #3A4D3B and the calming #627D5F, culminating in the soft, ethereal #A7C49C and #DDE4CC. This collection is ideal for designers and developers aiming to create interfaces or branding with an organic, calming, and natural feel. Its gentle transitions and harmonious tones, anchored by #1C2A20, provide an excellent foundation for projects seeking to evoke tranquility, sustainability, or a connection to nature without being overly vibrant.

Best used for

Eco-conscious brand identities
Meditation and wellness apps
Organic food and lifestyle websites
Nature documentary or educational platforms
Sustainable architecture portfolios
Craft and artisan product showcases

Suggested color roles

primary

#1C2A20 provides a deep, grounding foundation for backgrounds or dominant UI elements, establishing a calm, natural mood.

secondary

Utilize #3A4D3B for content panels, cards, or subtle dividers, adding depth and structure.

accent

#DDE4CC or #A7C49C can be used for highlights, interactive elements, or key information, offering a soft, natural glow.

background

#1C2A20 for a deep, immersive dark base, or #3A4D3B for a slightly lighter, rich green-gray.

text

For darker backgrounds, #DDE4CC or a light cream ensures excellent readability. On lighter shades like #DDE4CC, use #1C2A20 for contrast.

Accessibility notes

Ensure sufficient contrast between text and background, especially for mid-tones like #627D5F.
#DDE4CC on #1C2A20 should meet WCAG AA for normal text.
Avoid using #A7C49C or #627D5F for small text on backgrounds with similar lightness.
Test contrast ratios carefully, especially for interactive elements and small fonts.

Recommended combinations

Forest Canopy

Creates a deep, layered look with a bright accent for calls to action or key information.

#1C2A20 · #3A4D3B · #DDE4CC

Dappled Light

Generates a soft, atmospheric feel, ideal for secondary content blocks or subtle visual hierarchy.

#3A4D3B · #627D5F · #A7C49C

Woodland Path

A strong base with a balanced mid-tone and a soft highlight, versatile for various UI elements.

#1C2A20 · #627D5F · #DDE4CC

CSS variables

:root {
  --shadowed-forest-realm-1: #1C2A20;
  --shadowed-forest-realm-2: #3A4D3B;
  --shadowed-forest-realm-3: #627D5F;
  --shadowed-forest-realm-4: #A7C49C;
  --shadowed-forest-realm-5: #DDE4CC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "shadowed-forest-realm": {
        1: "#1C2A20",
        2: "#3A4D3B",
        3: "#627D5F",
        4: "#A7C49C",
        5: "#DDE4CC",
      }
    }
  }
}

Hex values

Color 1#1C2A20

Color 2#3A4D3B

Color 3#627D5F

Color 4#A7C49C

Color 5#DDE4CC

Accessibility

Contrast checker

1.6:1Fail

3.3:1AA18

7.9:1AAA

11.4:1AAA

1.6:1Fail

2:1Fail

4.8:1AA

7:1AA

3.3:1AA18

2:1Fail

2.4:1Fail

3.5:1AA18

7.9:1AAA

4.8:1AA

2.4:1Fail

1.5:1Fail

11.4:1AAA

7:1AA

3.5:1AA18

1.5:1Fail

Similar palettes

More like Shadowed Forest Realm

View all dark

Ancient Forest Depths

Ancient Woodland Path

Dark Forest Undergrowth

Dark Woodland Shade

Deep Forest Canopy

Deep Forest Hush