Back to palettes

Palette

Misty Forest Clearing

Soft, muted greens and grays, like a serene forest clearing enveloped in a gentle morning mist.

earthcalm5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Misty Forest Clearing 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 Misty Forest Clearing.

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

Data visualization

#5A6A63#8B9C92#B9C6BC#D7E0D6#3B4B44

Palette guide

How to use Misty Forest Clearing

Overview

The Misty Forest Clearing palette embodies the serene tranquility of a forest clearing enveloped in a gentle morning mist, featuring a harmonious blend of soft, muted greens and greys. From the deep, grounding #3B4B44 to the airy #D7E0D6, this collection provides designers and developers with a versatile spectrum for creating calm, natural, and sophisticated digital experiences. The mid-tones like #5A6A63 and #8B9C92 offer excellent choices for subtle hierarchies and textural depth, making it ideal for projects that aim for a sense of peace, organic elegance, and connection to nature.

Best used for

  • Eco-tourism websites
  • Organic food branding
  • Wellness and mindfulness apps
  • Nature photography portfolios
  • Sustainable living blogs
  • Rustic home decor themes

Suggested color roles

primary

#3B4B44 - A deep, muted forest green, ideal for main headings, important calls-to-action, or brand identity.

secondary

#5A6A63 - A medium, smoky green-grey, suitable for sub-headings, secondary UI elements, or background panels.

accent

#8B9C92 - A lighter, soft grey-green, perfect for subtle highlights, borders, or active states.

background

#D7E0D6 - A very light, airy green-grey that provides a clean, calming, and expansive canvas.

text

#3B4B44 - The darkest color, ensuring excellent readability for all body text against lighter backgrounds like #D7E0D6.

Accessibility notes

  • Ensure #3B4B44 text on #D7E0D6 background meets WCAG contrast standards for clear readability.
  • Avoid using #B9C6BC or #D7E0D6 for small text on very light backgrounds due to insufficient contrast.
  • Use #3B4B44 or #5A6A63 for critical text and interactive elements.
  • For buttons, ensure the text (e.g., white or #D7E0D6) has strong contrast against the button color (e.g., #5A6A63).

Recommended combinations

Tranquil Header

Deep text on a light, ethereal background for a clean, natural header.

#3B4B44 · #D7E0D6 · #5A6A63

Forest Button

A primary button with a lighter, gentle hover or pressed state.

#5A6A63 · #8B9C92 · #B9C6BC

Layered UI

Subtle visual separation for cards or information panels in a UI.

#D7E0D6 · #B9C6BC · #3B4B44

CSS variables

:root {
  --misty-forest-clearing-1: #5A6A63;
  --misty-forest-clearing-2: #8B9C92;
  --misty-forest-clearing-3: #B9C6BC;
  --misty-forest-clearing-4: #D7E0D6;
  --misty-forest-clearing-5: #3B4B44;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-forest-clearing": {
        1: "#5A6A63",
        2: "#8B9C92",
        3: "#B9C6BC",
        4: "#D7E0D6",
        5: "#3B4B44",
      }
    }
  }
}

Related searches

misty forest green palettetranquil nature colorsserene woodland huesmuted earth tonescalm clearing design

Palette colors

Hex values

Color 1#5A6A63
·
Color 2#8B9C92
·
Color 3#B9C6BC
·
Color 4#D7E0D6
·
Color 5#3B4B44
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
3.2:1AA18
4.2:1AA18
1.6:1Fail
2
2:1Fail
1.6:1Fail
2.1:1Fail
3.2:1AA18
3
3.2:1AA18
1.6:1Fail
1.3:1Fail
5.2:1AA
4
4.2:1AA18
2.1:1Fail
1.3:1Fail
6.8:1AA
5
1.6:1Fail
3.2:1AA18
5.2:1AA
6.8:1AA

Similar palettes

More like Misty Forest Clearing

View all earth
Whispering Forest Path
Ancient Moss Whisper
Emerald Canopy Dawn
Emerald Moss Glade
Enchanted Garden Gate
Forest Floor Moss