Palette

Enchanted Forest Realm

Lush greens and magical, lighter tones evoke a mystical forest where wonder and enchantment dwell.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1E3E2E#3A6B4F#6BA57F#9FDCB5#CFF5E0

Palette guide

How to use Enchanted Forest Realm

Overview

The Enchanted Forest Realm palette unveils a mystical forest where wonder and enchantment dwell, through lush greens and magical lighter tones. From the deep #1E3E2E to the airy #CFF5E0, including a vibrant #6BA57F, this collection offers a gradient of natural beauty. It's an excellent choice for designers and developers crafting fantasy game environments, nature-themed applications, or eco-conscious branding. The harmonious progression of greens creates a serene yet captivating visual experience, perfect for conveying growth, magic, and tranquility.

Best used for

Fantasy game environments and concepts
Nature-themed mobile applications
Children's storybooks and illustrations
Eco-conscious and sustainable branding
Serene web and app design
Botanical art and digital paintings

Suggested color roles

primary

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

secondary

Apply #3A6B4F for supportive green tones, larger content blocks, or backgrounds that need more depth.

accent

Introduce #9FDCB5 as a soft, ethereal highlight for interactive elements, subtle details, or calls-to-action.

background

Utilize #CFF5E0 for clean, airy backgrounds, providing a light and fresh canvas for content.

text

Pair #1E3E2E or a dark charcoal for primary text on light backgrounds like #CFF5E0. White text works well on #1E3E2E.

Accessibility notes

Ensure sufficient contrast for text on #CFF5E0; darker colors like #1E3E2E are recommended.
White text provides excellent readability on #1E3E2E and #3A6B4F for headings and important information.
Avoid using #9FDCB5 for small text on #CFF5E0 as contrast may be too low for accessibility.
Test combinations of mid-tones like #6BA57F and #9FDCB5 to ensure visual clarity for all users.

Recommended combinations

Deep Enchantment

A strong contrast for hero sections, balancing deep green with ethereal lightness and a vibrant mid-tone.

#1E3E2E · #CFF5E0 · #6BA57F

Realm Layers

Create harmonious green layers, ideal for content blocks, illustrations, or subtle gradients.

#3A6B4F · #9FDCB5 · #6BA57F

Ethereal Glow

Use for light, airy backgrounds, with the darkest green providing grounding for text or key elements.

#CFF5E0 · #9FDCB5 · #1E3E2E

CSS variables

:root {
  --enchanted-forest-realm-2-1: #1E3E2E;
  --enchanted-forest-realm-2-2: #3A6B4F;
  --enchanted-forest-realm-2-3: #6BA57F;
  --enchanted-forest-realm-2-4: #9FDCB5;
  --enchanted-forest-realm-2-5: #CFF5E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "enchanted-forest-realm-2": {
        1: "#1E3E2E",
        2: "#3A6B4F",
        3: "#6BA57F",
        4: "#9FDCB5",
        5: "#CFF5E0",
      }
    }
  }
}

Hex values

Color 1#1E3E2E

Color 2#3A6B4F

Color 3#6BA57F

Color 4#9FDCB5

Color 5#CFF5E0

Accessibility

Contrast checker

1.9:1Fail

4.1:1AA18

7.5:1AAA

10:1AAA

1.9:1Fail

2.2:1Fail

3.9:1AA18

5.2:1AA

4.1:1AA18

2.2:1Fail

1.8:1Fail

2.4:1Fail

7.5:1AAA

3.9:1AA18

1.8:1Fail

1.3:1Fail

10:1AAA

5.2:1AA

2.4:1Fail

1.3:1Fail

Similar palettes

More like Enchanted Forest Realm

View all earth

Enchanted Forest Bloom

Enchanted Forest Canopy