Palette

Mystic Forest Dweller

Earthy greens and muted tones found deep within an ancient, enchanted forest, alive with hidden life.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3A4C40#5C6F5A#879C7B#ACBC9A#6E8B7A

Palette guide

How to use Mystic Forest Dweller

Overview

The Mystic Forest Dweller palette brings forth a collection of earthy greens and muted tones, reminiscent of a deep, ancient forest alive with hidden life. Shades like the rich #3A4C40, the balanced #5C6F5A, and the airy #ACBC9A create a harmonious and organic feel. This palette is perfect for projects seeking to convey natural authenticity, tranquility, and a connection to the environment. Designers and developers can utilize these colors to craft experiences that feel grounded, sustainable, and inviting, offering a visual journey into the heart of nature.

Best used for

Eco-friendly brand identities and packaging design
Nature-themed mobile applications and websites
Sustainable product lines and outdoor apparel branding
Rustic interior design visualizations and mood boards
Educational content focused on environmental themes
Digital illustrations evoking forests and natural landscapes

Suggested color roles

primary

Use #5C6F5A as a versatile, balanced green for main elements, representing the core natural essence of your design.

secondary

Employ #6E8B7A for supporting visual components, providing a slightly cooler, complementary green that adds subtle variation.

accent

Apply #ACBC9A as a light, airy accent, perfect for highlights, subtle backgrounds, or elements needing a fresh, natural touch.

background

Utilize #ACBC9A for a soft, inviting background that feels open and natural, allowing darker elements to stand out gently.

text

Choose #3A4C40 for primary body text, ensuring excellent readability and a deep, grounding presence against lighter shades.

Accessibility notes

Ensure sufficient contrast between text in #3A4C40 and lighter backgrounds like #ACBC9A or #879C7B.
Use #5C6F5A or #6E8B7A for interactive elements to ensure they are clearly discernible.
Avoid placing lighter text (e.g., #ACBC9A) on mid-tone backgrounds (e.g., #879C7B) without checking contrast ratios.
Design clear hover and active states for buttons, perhaps using a darker shade for the active state to indicate interaction.

Recommended combinations

Deep Canopy

Creates a rich, layered forest depth, ideal for hero sections or immersive visual narratives.

#3A4C40 · #5C6F5A · #6E8B7A

Sunlit Glade

Perfect for airy, natural gradients or sections that need to feel bright and expansive, like content cards.

#ACBC9A · #879C7B · #5C6F5A

Earthy Contrast

Provides strong readability with dark text on a light background, accented by a versatile mid-tone for details.

#3A4C40 · #ACBC9A · #879C7B

CSS variables

:root {
  --mystic-forest-dweller-1: #3A4C40;
  --mystic-forest-dweller-2: #5C6F5A;
  --mystic-forest-dweller-3: #879C7B;
  --mystic-forest-dweller-4: #ACBC9A;
  --mystic-forest-dweller-5: #6E8B7A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mystic-forest-dweller": {
        1: "#3A4C40",
        2: "#5C6F5A",
        3: "#879C7B",
        4: "#ACBC9A",
        5: "#6E8B7A",
      }
    }
  }
}

Hex values

Color 1#3A4C40

Color 2#5C6F5A

Color 3#879C7B

Color 4#ACBC9A

Color 5#6E8B7A

Accessibility

Contrast checker

1.7:1Fail

3.1:1AA18

4.6:1AA

2.5:1Fail

1.7:1Fail

1.8:1Fail

2.7:1Fail

1.5:1Fail

3.1:1AA18

1.8:1Fail

1.5:1Fail

1.3:1Fail

4.6:1AA

2.7:1Fail

1.5:1Fail

1.8:1Fail

2.5:1Fail

1.5:1Fail

1.3:1Fail

1.8:1Fail

Similar palettes

More like Mystic Forest Dweller

Mystic Forest Dweller

See it in context.

Ready when you are.

Built with Mystic Forest Dweller.

How to use Mystic Forest Dweller

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Canopy

Sunlit Glade

Earthy Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Mystic Forest Dweller