Back to palettes

Palette

Shadowed Forest Depths

A deep, muted range of greens and grays, like the shadowed, mysterious depths of a dense forest.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1C282C#2E3A3F#424F53#556064#3B474B

Palette guide

How to use Shadowed Forest Depths

Overview

The Shadowed Forest Depths palette offers a captivating array of deep, muted blue-greens and grays, perfectly capturing the elusive atmosphere of a dense, shadowy forest. Grounded by the profound #1C282C, it subtly transitions through the rich #2E3A3F and #3B474B, leading to the softer, atmospheric #424F53 and #556064. This palette is invaluable for designers and developers seeking to evoke a sense of calm, mystery, or understated sophistication. Its cohesive, natural tones are ideal for creating immersive digital environments, robust branding, or user interfaces that require a grounding, organic feel without being overtly bright.

Best used for

  • Environmental or conservation websites
  • Outdoor adventure and gear brands
  • Calm, meditative app interfaces
  • Scientific or educational platforms
  • Luxury wellness and spa branding
  • Nature photography showcases

Suggested color roles

primary

#1C282C provides a deep, stable foundation for backgrounds or dominant UI elements, establishing a calm mood.

secondary

Use #2E3A3F or #3B474B for secondary panels, cards, or subtle borders to add texture and depth.

accent

#556064 can be used sparingly for subtle highlights or interactive elements that need a gentle lift.

background

#1C282C for a very dark, immersive canvas, or #2E3A3F for a slightly softer dark mode.

text

A very light gray or near-white works best for primary text on #1C282C or #2E3A3F. For secondary text on #424F53, #1C282C offers good contrast.

Accessibility notes

  • Ensure sufficient contrast for text, especially when using mid-tones like #424F53 as text on #556064.
  • #556064 or a light gray on #1C282C should meet WCAG AA for normal text.
  • Avoid using #3B474B or #424F53 for small text on similar background shades without testing.
  • Always prioritize legibility, especially for critical information, using higher contrast pairings.

Recommended combinations

Forest Canopy

Creates a layered, deep aesthetic, ideal for backgrounds and content blocks with subtle highlights.

#1C282C · #2E3A3F · #556064

Woodland Haze

Generates a soft, atmospheric feel, perfect for overlays, modals, or secondary information panels.

#2E3A3F · #424F53 · #556064

Deep Roots

Combines the deepest tones with a balanced mid-tone for a stable and sophisticated structure.

#1C282C · #3B474B · #424F53

CSS variables

:root {
  --shadowed-forest-depths-1: #1C282C;
  --shadowed-forest-depths-2: #2E3A3F;
  --shadowed-forest-depths-3: #424F53;
  --shadowed-forest-depths-4: #556064;
  --shadowed-forest-depths-5: #3B474B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "shadowed-forest-depths": {
        1: "#1C282C",
        2: "#2E3A3F",
        3: "#424F53",
        4: "#556064",
        5: "#3B474B",
      }
    }
  }
}

Related searches

deep forest color palettemuted green gray themecalm natural ui colorsdark earthy web designmysterious woodland palette

Palette colors

Hex values

Color 1#1C282C
·
Color 2#2E3A3F
·
Color 3#424F53
·
Color 4#556064
·
Color 5#3B474B
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.8:1Fail
2.3:1Fail
1.6:1Fail
2
1.3:1Fail
1.4:1Fail
1.8:1Fail
1.2:1Fail
3
1.8:1Fail
1.4:1Fail
1.3:1Fail
1.1:1Fail
4
2.3:1Fail
1.8:1Fail
1.3:1Fail
1.5:1Fail
5
1.6:1Fail
1.2:1Fail
1.1:1Fail
1.5:1Fail

Similar palettes

More like Shadowed Forest Depths

View all dark