Back to palettes

Palette

Whimsical Forest Fae

A mystical blend of greens, like a hidden, enchanted forest glade filled with nature's magic.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Whimsical Forest Fae 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 Whimsical Forest Fae.

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

Data visualization

#5A7E5E#9FBCA2#C6DDBF#DDEEDB#3C573F

Palette guide

How to use Whimsical Forest Fae

Overview

The "Whimsical Forest Fae" palette is a mystical blend of greens, evoking a hidden, enchanted forest glade filled with nature's magic. It features a deep Forest Green (#5A7E5E), a calming Moss Green (#9FBCA2), a light Sage Green (#C6DDBF), a very pale Mint (#DDEEDB), and a rich Dark Forest Green (#3C573F). This array is perfect for designers aiming to create organic, mysterious, and serene visual experiences. Developers can leverage these earthy, harmonious tones for robust backgrounds and natural UI elements, ideal for applications or websites that require a touch of fantasy and grounding. The palette's cohesive nature ensures a subtle yet captivating presentation across digital and print mediums.

Best used for

  • Eco-friendly brand identities and packaging
  • Nature and wilderness photography websites
  • Outdoor adventure and camping gear branding
  • Fantasy game art and UI elements
  • Sustainable living blogs and content
  • Herbal and natural product branding

Suggested color roles

primary

#5A7E5E (Forest Green) - A grounding and rich primary color, excellent for main sections, headers, or robust UI elements.

secondary

#9FBCA2 (Moss Green) - Ideal for subheadings, secondary navigation, or subtle patterns, offering gentle visual interest and depth.

accent

#C6DDBF (Sage Green) - Use for calls-to-action, highlighted information, or playful decorative elements to add a fresh, subtle pop.

background

#DDEEDB (Pale Mint) - A very light and ethereal background option, providing a clean canvas that enhances the deeper greens.

text

#3C573F (Dark Forest Green) - The deepest color, perfect for primary body text, headlines, and critical UI elements on lighter backgrounds for excellent readability.

Accessibility notes

  • Ensure #3C573F text has sufficient contrast against #DDEEDB, #C6DDBF, and #9FBCA2 for readability, checking WCAG AA standards.
  • Avoid using #C6DDBF or #DDEEDB for small body text on other light backgrounds; they are best suited for larger display text or accents.
  • For optimal readability, use #3C573F or a dark neutral (e.g., black) for all critical text against the lighter greens.
  • Consider contrast ratios carefully when pairing #5A7E5E with #9FBCA2 for text, ensuring legibility for all users.

Recommended combinations

Enchanted UI

Soft backgrounds, navigation elements, and legible text for a harmonious and natural user interface.

#DDEEDB · #9FBCA2 · #3C573F

Forest Accents

Highlighting interactive elements, decorative illustrations, or subtle branding details with an earthy feel.

#5A7E5E · #C6DDBF · #9FBCA2

Mystical Branding

Creating robust brand identities, social media graphics, and natural marketing materials.

#3C573F · #DDEEDB · #5A7E5E

CSS variables

:root {
  --whimsical-forest-fae-1: #5A7E5E;
  --whimsical-forest-fae-2: #9FBCA2;
  --whimsical-forest-fae-3: #C6DDBF;
  --whimsical-forest-fae-4: #DDEEDB;
  --whimsical-forest-fae-5: #3C573F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "whimsical-forest-fae": {
        1: "#5A7E5E",
        2: "#9FBCA2",
        3: "#C6DDBF",
        4: "#DDEEDB",
        5: "#3C573F",
      }
    }
  }
}

Related searches

forest green color paletteenchanted moss colorswhimsical nature aestheticearthy green uidark light green combination

Palette colors

Hex values

Color 1#5A7E5E
·
Color 2#9FBCA2
·
Color 3#C6DDBF
·
Color 4#DDEEDB
·
Color 5#3C573F
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
3.2:1AA18
3.8:1AA18
1.7:1Fail
2
2.2:1Fail
1.4:1Fail
1.7:1Fail
3.9:1AA18
3
3.2:1AA18
1.4:1Fail
1.2:1Fail
5.5:1AA
4
3.8:1AA18
1.7:1Fail
1.2:1Fail
6.6:1AA
5
1.7:1Fail
3.9:1AA18
5.5:1AA
6.6:1AA

Similar palettes

More like Whimsical Forest Fae

View all earth
Enchanted Glade Moss
Whimsical Forest Floor
Emerald Canopy Hush
Emerald Canopy Mist
Emerald Enclave Moss
Emerald Moss Canopy