Palette

Enchanted Forest Glow

Rich greens and soft mossy tones create a serene and mystical atmosphere, like an enchanted woodland.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Enchanted Forest Glow 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 Enchanted Forest Glow.

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

Data visualization

#1F3B2A#3A6B4C#6D9A7C#B0C7AE#DFE8DD

Palette guide

How to use Enchanted Forest Glow

Overview

The Enchanted Forest Glow palette offers a tranquil journey into serene woodlands. Dominated by rich, earthy greens and soft mossy tones, it creates a mystical and calming atmosphere. Key hues include the deep forest green #1F3B2A, a vibrant moss green #3A6B4C, and the airy, almost-white #DFE8DD. Designers and developers can leverage this palette for projects aiming to evoke natural beauty, peace, and a touch of subtle magic, perfect for eco-conscious branding or meditative digital spaces. Its harmonious blend ensures a cohesive and visually soothing experience.

Best used for

Nature-inspired branding
Eco-friendly product design
Meditation and wellness apps
Serene website interfaces
Botanical illustrations and art
Calming interior design elements

Suggested color roles

primary

Use #1F3B2A as a deep, grounding primary color for headers, main sections, or dominant elements.

secondary

Apply #3A6B4C for supportive elements, subheadings, or backgrounds that need a richer green tone.

accent

Introduce #6D9A7C for subtle accents, interactive elements, or highlights that offer a gentle organic pop.

background

Utilize #DFE8DD for clean, airy backgrounds, providing a soft canvas that allows other colors to breathe.

text

Pair #1F3B2A or a dark charcoal for primary text on light backgrounds like #DFE8DD. Use white for text on darker hues.

Accessibility notes

Ensure sufficient contrast when placing #6D9A7C text on #DFE8DD backgrounds for readability.
White text provides excellent contrast against the deep #1F3B2A, making it suitable for headings.
Avoid using light greens like #B0C7AE or #DFE8DD for small text sizes against similar light backgrounds.
Test color pairings, especially between #3A6B4C and #6D9A7C, to ensure adequate visual separation for users with color vision deficiencies.

Recommended combinations

Deep Woodland

Ideal for a grounding primary layout, with the lightest shade providing contrast for text or subtle details.

#1F3B2A · #3A6B4C · #DFE8DD

Mossy Serenity

Excellent for secondary sections or cards, offering a harmonious gradient of mid-tone greens.

#3A6B4C · #6D9A7C · #B0C7AE

Ethereal Glow

Perfect for backgrounds with a light, airy feel, using the darkest green for prominent text or icons.

#DFE8DD · #B0C7AE · #1F3B2A

CSS variables

:root {
  --enchanted-forest-glow-2-1: #1F3B2A;
  --enchanted-forest-glow-2-2: #3A6B4C;
  --enchanted-forest-glow-2-3: #6D9A7C;
  --enchanted-forest-glow-2-4: #B0C7AE;
  --enchanted-forest-glow-2-5: #DFE8DD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "enchanted-forest-glow-2": {
        1: "#1F3B2A",
        2: "#3A6B4C",
        3: "#6D9A7C",
        4: "#B0C7AE",
        5: "#DFE8DD",
      }
    }
  }
}

Hex values

Color 1#1F3B2A

Color 2#3A6B4C

Color 3#6D9A7C

Color 4#B0C7AE

Color 5#DFE8DD

Accessibility

Contrast checker

2:1Fail

3.8:1AA18

6.8:1AA

9.7:1AAA

2:1Fail

1.9:1Fail

3.4:1AA18

4.9:1AA

3.8:1AA18

1.9:1Fail

1.8:1Fail

2.5:1Fail