Palette

Gentle Forest Nook

Soft greens and muted earth tones evoke the quiet calm of a hidden nook in a peaceful forest.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Gentle Forest Nook 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 Gentle Forest Nook.

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

Data visualization

#4A5F40#6B7C5F#8E9B7F#B1BB9F#D4DAC0

Palette guide

How to use Gentle Forest Nook

Overview

The "Gentle Forest Nook" palette offers a deeply calming and natural progression of muted greens, capturing the serene ambiance of a secluded woodland. From the robust #4A5F40 and its slightly lighter counterpart #6B7C5F, it flows into the earthy #8E9B7F, the softer #B1BB9F, and finally the airy #D4DAC0. Designers can utilize this organic palette to create tranquil, sophisticated, and nature-inspired interfaces or branding. Developers will find these harmonious greens perfect for crafting eco-conscious websites, wellness applications, or digital experiences that aim to evoke peace, groundedness, and a subtle connection to the natural world.

Best used for

Eco-friendly and sustainable brands
Nature and outdoors-themed websites
Wellness, yoga, and meditation platforms
Organic food and beverage packaging
Garden design and landscaping services
Minimalist, earthy interior design

Suggested color roles

primary

#4A5F40 - A deep, grounding forest green, ideal for main headers, footers, or strong brand elements, establishing a natural foundation.

secondary

#6B7C5F - A softer, rich green, excellent for secondary content blocks, navigation, or prominent accents, adding depth.

accent

#B1BB9F - A light, subtle green, perfect for calls-to-action, key icons, or interactive elements, providing a gentle highlight.

background

#D4DAC0 - A very light, almost off-white green, serving as a clean, natural base for main content areas.

text

#4A5F40 - The darkest green, providing excellent readability for body text on the lighter backgrounds like #D4DAC0.

Accessibility notes

#4A5F40 provides strong contrast for text on #D4DAC0 and #B1BB9F.
Ensure sufficient contrast when using #B1BB9F for text on #D4DAC0 for critical information.
Avoid using #8E9B7F for small text on #D4DAC0 due to potential readability issues.
For interactive elements, ensure clear focus states, as color differences within the lighter greens can be subtle.

Recommended combinations

Deep Forest

Create impactful, natural backgrounds or header sections, conveying depth and stability.

#4A5F40 · #6B7C5F · #8E9B7F

Nook Light

Ideal for main content areas, offering a light, airy background with soft green accents.

#D4DAC0 · #B1BB9F · #6B7C5F

Subtle Gradient

Use for gradients in background elements or subtle card effects, creating a smooth, organic transition.

#8E9B7F · #B1BB9F · #D4DAC0

CSS variables

:root {
  --gentle-forest-nook-1: #4A5F40;
  --gentle-forest-nook-2: #6B7C5F;
  --gentle-forest-nook-3: #8E9B7F;
  --gentle-forest-nook-4: #B1BB9F;
  --gentle-forest-nook-5: #D4DAC0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gentle-forest-nook": {
        1: "#4A5F40",
        2: "#6B7C5F",
        3: "#8E9B7F",
        4: "#B1BB9F",
        5: "#D4DAC0",
      }
    }
  }
}

Hex values

Color 1#4A5F40

Color 2#6B7C5F

Color 3#8E9B7F

Color 4#B1BB9F

Color 5#D4DAC0

Accessibility

Contrast checker

1.6:1Fail

2.4:1Fail

3.5:1AA18

4.9:1AA

1.6:1Fail

1.5:1Fail

2.2:1Fail

3.1:1AA18

2.4:1Fail

1.5:1Fail

2:1Fail

3.5:1AA18

2.2:1Fail

1.5:1Fail

1.4:1Fail

4.9:1AA

3.1:1AA18

2:1Fail

1.4:1Fail

Similar palettes

More like Gentle Forest Nook

Gentle Forest Nook

See it in context.

Ready when you are.

Built with Gentle Forest Nook.

How to use Gentle Forest Nook

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Forest

Nook Light

Subtle Gradient

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Gentle Forest Nook