Palette

Ethereal Forest Glade

Whispers of soft greens and airy whites, evoking a magical, sun-dappled glade in an enchanted forest.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ethereal Forest Glade 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 Ethereal Forest Glade.

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

Data visualization

#A3B097#DCE2DA#7A8C74#C3D1C1#5C6A5A

Palette guide

How to use Ethereal Forest Glade

Overview

The 'Ethereal Forest Glade' palette captures the serene beauty of a sun-dappled woodland with its whispers of soft greens and airy whites. Featuring muted sage tones like #A3B097, deeper forest greens such as #7A8C74 and #5C6A5A, complemented by an airy off-white #DCE2DA and a lighter green-grey #C3D1C1, this palette evokes a magical, natural tranquility. Designers and developers can use this scheme to create organic, calming, and eco-friendly aesthetics, perfect for projects aiming to feel grounded yet ethereal. It’s excellent for conveying a sense of peace and natural elegance in any visual medium.

Best used for

Eco-friendly brand identities
Nature-inspired website designs
Organic food packaging
Wellness and mindfulness apps
Botanical art and illustrations
Calm interior design schemes

Suggested color roles

primary

Use #7A8C74 (a medium forest green) as a grounding, primary color for headers or significant sections, establishing a natural foundation.

secondary

Employ #A3B097 (a muted sage green) for supporting elements, subheadings, or background textures, providing soft harmony.

accent

Apply #C3D1C1 (a light green-grey) for delicate highlights, subtle dividers, or interactive elements that need a fresh, airy touch.

background

Utilize #DCE2DA (an airy off-white) as the main background to create a clean, expansive canvas that allows the greens to breathe.

text

For optimal readability, use #5C6A5A for body text on light backgrounds. #7A8C74 can be used for headings or key information on #DCE2DA.

Accessibility notes

The light colors like #DCE2DA and #C3D1C1 have low contrast; avoid using them together for critical text or interactive elements.
Ensure text on #A3B097 provides sufficient contrast, typically requiring a darker text color like #5C6A5A or black.
Always test text contrast against background colors to meet WCAG AA standards, especially for smaller font sizes.
Avoid using light-colored text on the medium green shades like #7A8C74 to prevent readability issues.

Recommended combinations

Glade Base

Forms a clean, natural UI base, suitable for website layouts and informational displays, providing clarity with a soft touch.

#DCE2DA · #C3D1C1 · #7A8C74

Deep Forest

Excellent for illustrations, branding elements, or sections requiring more depth and a richer, earthy feel.

#5C6A5A · #7A8C74 · #A3B097

Sun Dappled

Ideal for creating natural themes, layering elements, or visual storytelling that evokes light filtering through leaves.

#DCE2DA · #A3B097 · #5C6A5A

CSS variables

:root {
  --ethereal-forest-glade-1: #A3B097;
  --ethereal-forest-glade-2: #DCE2DA;
  --ethereal-forest-glade-3: #7A8C74;
  --ethereal-forest-glade-4: #C3D1C1;
  --ethereal-forest-glade-5: #5C6A5A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ethereal-forest-glade": {
        1: "#A3B097",
        2: "#DCE2DA",
        3: "#7A8C74",
        4: "#C3D1C1",
        5: "#5C6A5A",
      }
    }
  }
}

Hex values

Color 1#A3B097

Color 2#DCE2DA

Color 3#7A8C74

Color 4#C3D1C1

Color 5#5C6A5A

Accessibility

Contrast checker

1.7:1Fail

1.6:1Fail

1.4:1Fail

2.5:1Fail

1.7:1Fail

2.7:1Fail

1.2:1Fail

4.3:1AA18

1.6:1Fail

2.7:1Fail

2.3:1Fail

1.6:1Fail

1.4:1Fail

1.2:1Fail

2.3:1Fail

3.6:1AA18

2.5:1Fail

4.3:1AA18

1.6:1Fail

3.6:1AA18

Similar palettes

More like Ethereal Forest Glade

Ethereal Forest Glade

See it in context.

Ready when you are.

Built with Ethereal Forest Glade.

How to use Ethereal Forest Glade

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Glade Base

Deep Forest

Sun Dappled

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Ethereal Forest Glade