Palette

Mystic Grove

Enchanting greens and soft, shadowy tones evoke a hidden, ancient forest grove.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F3B2C#5C7A52#90A57C#C4D0AF#3A4D32

Palette guide

How to use Mystic Grove

Overview

The "Mystic Grove" palette conjures the tranquil essence of an ancient, hidden forest grove, rich with enchanting greens and soft, shadowy tones. From the profound depth of #2F3B2C and #3A4D32 to the supportive mid-tones of #5C7A52 and #90A57C, this collection is deeply rooted in nature. The light, airy #C4D0AF adds a touch of filtered sunlight, creating a harmonious and serene atmosphere. This palette is perfect for designs that aim to evoke peace, natural beauty, and a sense of calm, making it ideal for brands seeking an organic and grounded aesthetic.

Best used for

Nature-focused brand identity and packaging
Environmental conservation campaigns
Wellness and mindfulness app interfaces
Organic food and sustainable product lines
Tranquil website design for retreats or spas
Editorial content related to ecology or gardening

Suggested color roles

primary

Utilize #2F3B2C as the deepest, most grounding green, ideal for main headings, logos, or large background areas to establish a strong natural presence.

secondary

Employ #3A4D32 for supporting elements, subheadings, or as a darker accent, offering a rich, complementary tone to the primary.

accent

Apply #5C7A52 or #90A57C for highlights, interactive elements, or graphic details, introducing a lighter, more vibrant touch of green.

background

Use #C4D0AF for a soft, airy background, providing excellent contrast for darker text and creating an open, natural feel.

text

For optimal readability on lighter backgrounds, use #2F3B2C or #3A4D32. On darker backgrounds, a crisp white or very light grey provides clear contrast.

Accessibility notes

Ensure sufficient contrast between #2F3B2C text and #C4D0AF backgrounds for WCAG AA compliance.
Avoid using #90A57C or #C4D0AF for small text on similarly light backgrounds; opt for larger font sizes or bolder weights.
Test text legibility for #5C7A52 on #C4D0AF backgrounds, especially for body text, to ensure readability.
Provide clear focus states for interactive elements, differentiating them from static content when using similar tonal values.

Recommended combinations

Deep Grove Essence

Excellent for a primary brand presence: deep base, light background, and a harmonious mid-tone accent for calls to action.

#2F3B2C · #C4D0AF · #5C7A52

Sunlit Foliage

Ideal for secondary content blocks or subtle gradients, blending a rich green with a lighter, sun-dappled tone and a dark anchor.

#3A4D32 · #90A57C · #2F3B2C

Whispering Leaves

Perfect for serene UI elements or illustrations, using a light base with harmonizing greens for depth and detail.

#C4D0AF · #5C7A52 · #90A57C

CSS variables

:root {
  --mystic-grove-1: #2F3B2C;
  --mystic-grove-2: #5C7A52;
  --mystic-grove-3: #90A57C;
  --mystic-grove-4: #C4D0AF;
  --mystic-grove-5: #3A4D32;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mystic-grove": {
        1: "#2F3B2C",
        2: "#5C7A52",
        3: "#90A57C",
        4: "#C4D0AF",
        5: "#3A4D32",
      }
    }
  }
}

Hex values

Color 1#2F3B2C

Color 2#5C7A52

Color 3#90A57C

Color 4#C4D0AF

Color 5#3A4D32

Accessibility

Contrast checker

2.4:1Fail

4.4:1AA18

7.3:1AAA

1.3:1Fail

2.4:1Fail

1.8:1Fail

3:1Fail

1.9:1Fail

4.4:1AA18

1.8:1Fail

1.7:1Fail

3.4:1AA18

7.3:1AAA

3:1Fail

1.7:1Fail

5.7:1AA

1.3:1Fail

1.9:1Fail

3.4:1AA18

5.7:1AA

Similar palettes

More like Mystic Grove

View all earth

Emerald Moss Canopy

Enchanted Forest Canopy

Enchanted Forest Glade

Enchanted Forest Realm

Enchanted Grove

Mystic Glade Light