Back to palettes

Palette

Shadowed Forest Realm

Deep, shadowy greens and blues invoke the mysterious quietude of an untouched forest realm.

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

#A8C6AE#7A9B8F#4D736A#2D4C4A#1C2B2A

Palette guide

How to use Shadowed Forest Realm

Overview

The Shadowed Forest Realm palette (version 2) presents a sophisticated gradient of muted greens and teal-grays, capturing the quietude of a deep, untouched forest. It flows from the light, airy #A8C6AE through the balanced mid-tones of #7A9B8F and #4D736A, descending into the profound depths of #2D4C4A and the near-black #1C2B2A. This collection is perfect for designers and developers creating serene, nature-inspired interfaces or branding that requires a sense of calm strength. The subtle shifts in hue provide excellent visual hierarchy, allowing for rich layering and a cohesive, tranquil user experience, whether for dark or light themes.

Best used for

  • Eco-friendly product websites
  • Wellness and mindfulness apps
  • Nature conservation initiatives
  • Botanical garden branding
  • Sustainable fashion e-commerce
  • Photography showcasing natural landscapes

Suggested color roles

primary

#1C2B2A serves as a deep, anchoring background for immersive dark themes, or as a strong accent on lighter elements.

secondary

Utilize #2D4C4A for content panels, cards, or navigation, providing depth against the darkest primary.

accent

#A8C6AE can be used for highlights, calls to action, or interactive elements, offering a fresh, natural contrast.

background

#1C2B2A for a deep, dark base, or #4D736A for a rich, mid-tone green-gray.

text

On darker backgrounds (#1C2B2A, #2D4C4A), #A8C6AE or a light off-white ensures readability. On #A8C6AE, use #1C2B2A for strong contrast.

Accessibility notes

  • Ensure sufficient contrast for text, especially when using #7A9B8F on #4D736A.
  • #A8C6AE on #1C2B2A should meet WCAG AA for normal text.
  • Avoid using #4D736A or #7A9B8F as text on backgrounds with similar lightness.
  • Prioritize high contrast for critical UI elements and small text sizes to ensure readability.

Recommended combinations

Deep Forest

Creates a strong dark base with a lighter accent for clear hierarchy and calls to action.

#1C2B2A · #2D4C4A · #A8C6AE

Woodland Canopy

For softer, layered designs, perfect for cards or sections where a gentle gradient is desired.

#4D736A · #7A9B8F · #A8C6AE

Tranquil Path

Offers a harmonious blend of mid-tones for a calm, sophisticated feel in content areas.

#2D4C4A · #4D736A · #7A9B8F

CSS variables

:root {
  --shadowed-forest-realm-2-1: #A8C6AE;
  --shadowed-forest-realm-2-2: #7A9B8F;
  --shadowed-forest-realm-2-3: #4D736A;
  --shadowed-forest-realm-2-4: #2D4C4A;
  --shadowed-forest-realm-2-5: #1C2B2A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "shadowed-forest-realm-2": {
        1: "#A8C6AE",
        2: "#7A9B8F",
        3: "#4D736A",
        4: "#2D4C4A",
        5: "#1C2B2A",
      }
    }
  }
}

Related searches

muted green palettedark teal ui colorsserene nature themeforest inspired web designtranquil green gray palette

Palette colors

Hex values

Color 1#A8C6AE
·
Color 2#7A9B8F
·
Color 3#4D736A
·
Color 4#2D4C4A
·
Color 5#1C2B2A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.9:1Fail
5.1:1AA
7.9:1AAA
2
1.6:1Fail
1.7:1Fail
3.1:1AA18
4.8:1AA
3
2.9:1Fail
1.7:1Fail
1.8:1Fail
2.8:1Fail
4
5.1:1AA
3.1:1AA18
1.8:1Fail
1.6:1Fail
5
7.9:1AAA
4.8:1AA
2.8:1Fail
1.6:1Fail

Similar palettes

More like Shadowed Forest Realm

View all dark
Ancient Woodland Path
Dark Forest Canopy
Dark Woodland Shade
Deep Forest Canopy
Deep Forest Murmur
Midnight Forest Trail