Back to palettes

Palette

Mystic Forest Whisper

Envelops in the quiet, profound mystery of an ancient forest, whispering secrets through deep hues.

DarkDark5 colors
More Dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Mystic Forest Whisper 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 Mystic Forest Whisper.

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

Data visualization

#1F3A3A#3A5C5C#5E8282#89A6A6#BBD0D0

Palette guide

How to use Mystic Forest Whisper

Overview

The "Mystic Forest Whisper" palette evokes the deep, quiet mystery of an ancient woodland, perfect for designs seeking a profound, natural aesthetic. Dominated by a range of dark, muted greens and teals, from the profound depth of #1F3A3A to the serene coolness of #3A5C5C and the lighter, misty #BBD0D0, this collection provides a tranquil yet sophisticated feel. Designers can utilize these hues to create immersive digital experiences or tangible products that resonate with nature's unspoken stories. The interplay of these forest-inspired shades allows for subtle gradients and rich, layered compositions, crafting an atmosphere of calm and grounded elegance.

Best used for

  • Eco-conscious brand identity and packaging
  • Nature-themed websites or apps (e.g., meditation, outdoor adventure)
  • Luxury spa or wellness product design
  • Editorial layouts for environmental or historical content
  • Interior design accents for serene spaces
  • Artistic and conceptual design projects

Suggested color roles

primary

Use #1F3A3A as the foundational deep green, ideal for headers, primary buttons, or large background sections to establish a profound, stable presence.

secondary

Employ #3A5C5C for supporting elements, subheadings, or as a vibrant accent against the primary, offering a slightly lighter yet rich tone.

accent

Apply #5E8282 or #89A6A6 for highlights, interactive states, or small graphic details to introduce subtle contrast and visual interest without overpowering.

background

Utilize #BBD0D0 for clean, breathable backgrounds, offering a light, airy canvas that allows darker elements to stand out with clarity.

text

For optimal readability, use #1F3A3A or #3A5C5C on lighter backgrounds like #BBD0D0. For dark backgrounds, a light contrasting color like pure white or a very light grey is recommended.

Accessibility notes

  • Ensure sufficient contrast between #1F3A3A text and #BBD0D0 backgrounds for WCAG AA compliance.
  • Avoid using #89A6A6 or #BBD0D0 for small text on similarly light backgrounds; opt for larger font sizes or bolder weights.
  • Test color pairings like #3A5C5C on #BBD0D0 to ensure readability, especially for body text.
  • Provide clear focus states for interactive elements, differentiating them from static content when using similar tonal values.

Recommended combinations

Deep Forest Serenity

Ideal for a primary brand presence: deep base, light background, and a mid-tone accent for calls to action or key information.

#1F3A3A · #BBD0D0 · #5E8282

Misty Undergrowth

Great for secondary content blocks or subtle gradients, combining a rich green with a lighter, misty tone and a dark anchor.

#3A5C5C · #89A6A6 · #1F3A3A

Whispering Canopy

Excellent for serene UI elements or illustrations, offering a light base with harmonizing green-teals for depth and detail.

#BBD0D0 · #3A5C5C · #89A6A6

CSS variables

:root {
  --mystic-forest-whisper-1: #1F3A3A;
  --mystic-forest-whisper-2: #3A5C5C;
  --mystic-forest-whisper-3: #5E8282;
  --mystic-forest-whisper-4: #89A6A6;
  --mystic-forest-whisper-5: #BBD0D0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mystic-forest-whisper": {
        1: "#1F3A3A",
        2: "#3A5C5C",
        3: "#5E8282",
        4: "#89A6A6",
        5: "#BBD0D0",
      }
    }
  }
}

Related searches

dark green teal color schememysterious forest paletteserene nature branding colorsmuted green website designancient woodland color inspiration

Palette colors

Hex values

Color 1#1F3A3A
·
Color 2#3A5C5C
·
Color 3#5E8282
·
Color 4#89A6A6
·
Color 5#BBD0D0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.9:1Fail
4.7:1AA
7.6:1AAA
2
1.7:1Fail
1.7:1Fail
2.8:1Fail
4.6:1AA
3
2.9:1Fail
1.7:1Fail
1.6:1Fail
2.6:1Fail
4
4.7:1AA
2.8:1Fail
1.6:1Fail
1.6:1Fail
5
7.6:1AAA
4.6:1AA
2.6:1Fail
1.6:1Fail

Similar palettes

More like Mystic Forest Whisper

View all Dark
Deep Forest Murmur
Midnight Forest Whisper
Deep Woodland Shrine
Abyssal Seaweed Garden
Dark Academia Ink
Deep Space Void