Palette

Enchanted Forest Ring

Lush, vibrant greens mimic a hidden circle of moss, hinting at a whimsical, magical forest.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3D4C3A#5A7A55#7D9F7D#A1C4A1#C3E7C3

Palette guide

How to use Enchanted Forest Ring

Overview

The Enchanted Forest Ring palette conjures images of a hidden circle of moss, hinting at a whimsical, magical forest with its lush, vibrant greens. Ranging from the deep #3D4C3A to the fresh #C3E7C3, and featuring a balanced #7D9F7D, this collection is full of natural vitality. It's an excellent choice for designers and developers creating eco-friendly branding, serene web interfaces, or children's nature books. The harmonious progression of greens offers a sense of growth, tranquility, and understated magic, perfect for projects seeking an organic yet enchanting feel.

Best used for

Eco-friendly and organic branding
Serene web and app interfaces
Children's nature books and media
Garden design concepts and landscaping
Tranquil lifestyle blogs and content
Botanical illustrations and art

Suggested color roles

primary

Use #3D4C3A as a deep, grounding primary color for headers, main sections, or dominant branding elements.

secondary

Apply #5A7A55 for supportive mossy green elements, larger content blocks, or backgrounds with a natural feel.

accent

Introduce #A1C4A1 as a fresh, gentle highlight for interactive elements, subtle details, or calls-to-action.

background

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

text

Pair #3D4C3A or a dark charcoal for primary text on light backgrounds like #C3E7C3. White text works well on #3D4C3A.

Accessibility notes

Ensure sufficient contrast for text on #C3E7C3; darker colors like #3D4C3A are highly recommended.
White text provides excellent readability on #3D4C3A and #5A7A55 for headings and important information.
Avoid using #A1C4A1 for small text on #C3E7C3 as contrast may be too low for accessibility.
All colors are greens, so carefully choose pairings to ensure enough contrast, especially for visual hierarchy.

Recommended combinations

Mossy Depths

Ideal for a layered, natural look in primary sections, balancing deep tones with a fresh highlight.

#3D4C3A · #5A7A55 · #A1C4A1

Fresh Growth

Use for lighter sections or backgrounds, evoking new growth and freshness, with deeper greens for content.

#C3E7C3 · #7D9F7D · #5A7A55

Whimsical Blend

Combine for accents or illustrations, using the lightest green as a focal point against deeper, grounding hues.

#A1C4A1 · #3D4C3A · #7D9F7D

CSS variables

:root {
  --enchanted-forest-ring-1: #3D4C3A;
  --enchanted-forest-ring-2: #5A7A55;
  --enchanted-forest-ring-3: #7D9F7D;
  --enchanted-forest-ring-4: #A1C4A1;
  --enchanted-forest-ring-5: #C3E7C3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "enchanted-forest-ring": {
        1: "#3D4C3A",
        2: "#5A7A55",
        3: "#7D9F7D",
        4: "#A1C4A1",
        5: "#C3E7C3",
      }
    }
  }
}

Hex values

Color 1#3D4C3A

Color 2#5A7A55

Color 3#7D9F7D

Color 4#A1C4A1

Color 5#C3E7C3

Accessibility

Contrast checker

1.9:1Fail

3.1:1AA18

4.8:1AA

6.8:1AA

1.9:1Fail

1.6:1Fail

2.5:1Fail

3.6:1AA18