Back to palettes

Palette

Enchanted Glade Ferns

Vibrant greens and hints of violet evoking a hidden glade full of magic and lush foliage.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Enchanted Glade Ferns 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 Glade Ferns.

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

Data visualization

#228B22#3CB371#8FBC8F#90EE90#DDA0DD

Palette guide

How to use Enchanted Glade Ferns

Overview

The Enchanted Glade Ferns palette brings together vibrant greens and hints of violet, evoking a hidden glade full of magic and lush foliage. Featuring a bold forest green #228B22, a fresh mint green #90EE90, and an unexpected medium violet #DDA0DD, this palette is lively and whimsical. It's an excellent choice for designers and developers crafting fantasy game environments, children's book illustrations, or whimsical branding. The dynamic interplay between verdant nature and a magical pop of color creates an enchanting and imaginative visual experience.

Best used for

  • Fantasy game environments and UI
  • Children's book illustrations
  • Nature-themed events and decor
  • Whimsical branding and logos
  • Creative digital art projects
  • Botanical garden visual identities

Suggested color roles

primary

Use #228B22 as a bold, dominant green for main sections, providing grounding and depth.

secondary

Apply #3CB371 for lush, supportive green elements, larger content blocks, or backgrounds.

accent

Introduce #DDA0DD as a magical, unexpected violet accent for calls-to-action, interactive elements, or focal points.

background

Consider #90EE90 for bright, lively backgrounds, or a very light neutral to allow the greens and violet to pop.

text

Dark charcoal or black works best for text on lighter shades like #90EE90. White text is effective on #228B22 and #DDA0DD.

Accessibility notes

  • Ensure high contrast for text on #90EE90; use a very dark green like #228B22 or black.
  • The combination of #DDA0DD and #8FBC8F may lack sufficient contrast for text, use for decorative elements.
  • White text on #228B22 and #DDA0DD offers good readability for headings and important information.
  • Test color pairings with violet carefully, as it can be challenging to achieve good contrast with some greens.

Recommended combinations

Fern & Violet

A striking combination for hero sections, balancing deep green with a magical violet accent and a fresh highlight.

#228B22 · #DDA0DD · #90EE90

Lush Greens

Create harmonious green layouts, ideal for content blocks or illustrations, evoking deep foliage.

#3CB371 · #8FBC8F · #228B22

Magical Highlights

Use the violet for captivating accents, set against a bright green background and a supportive mid-tone.

#DDA0DD · #90EE90 · #3CB371

CSS variables

:root {
  --enchanted-glade-ferns-1: #228B22;
  --enchanted-glade-ferns-2: #3CB371;
  --enchanted-glade-ferns-3: #8FBC8F;
  --enchanted-glade-ferns-4: #90EE90;
  --enchanted-glade-ferns-5: #DDA0DD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "enchanted-glade-ferns": {
        1: "#228B22",
        2: "#3CB371",
        3: "#8FBC8F",
        4: "#90EE90",
        5: "#DDA0DD",
      }
    }
  }
}

Related searches

vibrant green violet paletteenchanted glade colorsfantasy fern schemewhimsical woodland brandinglush nature UI

Palette colors

Hex values

Color 1#228B22
·
Color 2#3CB371
·
Color 3#8FBC8F
·
Color 4#90EE90
·
Color 5#DDA0DD
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2:1Fail
3.1:1AA18
2.1:1Fail
2
1.6:1Fail
1.2:1Fail
1.9:1Fail
1.3:1Fail
3
2:1Fail
1.2:1Fail
1.5:1Fail
1:1Fail
4
3.1:1AA18
1.9:1Fail
1.5:1Fail
1.5:1Fail
5
2.1:1Fail
1.3:1Fail
1:1Fail
1.5:1Fail

Similar palettes

More like Enchanted Glade Ferns

View all earth