Back to palettes

Palette

Wild Fern Whisper

A tranquil collection of earthy greens and muted browns, capturing the hushed serenity of a shaded forest floor.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Wild Fern Whisper 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 Wild Fern Whisper.

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

Data visualization

#4A6D5E#8D9B85#C1C7AE#A59C86#6C6356

Palette guide

How to use Wild Fern Whisper

Overview

The Wild Fern Whisper palette offers a tranquil collection of earthy greens and muted browns, perfectly capturing the hushed serenity of a shaded forest floor. Featuring a grounded #4A6D5E, a soft #8D9B85, the airy #C1C7AE, a warm #A59C86, and a deep #6C6356, this palette is a designer's go-to for evoking natural comfort and understated elegance. Developers can leverage these harmonious tones to build interfaces that feel organic and calming, ideal for projects requiring a connection to nature or a sense of peace.

Best used for

  • Eco-friendly brand identity and packaging
  • Nature-themed websites and applications
  • Interior design and decor visualization
  • Spa and wellness promotional materials
  • Sustainable fashion branding
  • Educational content about natural sciences

Suggested color roles

primary

Use #4A6D5E as the foundational green, symbolizing growth and stability for primary brand elements or key sections.

secondary

Employ #A59C86 for supportive elements, subheadings, or backgrounds where a warmer, inviting tone is desired.

accent

Apply #6C6356 for deep, grounding accents, bold text, or to add a touch of rustic sophistication.

background

Utilize #C1C7AE as a soft, neutral background color that promotes readability and a calming user experience.

text

For body text, #4A6D5E or #6C6356 provide excellent contrast against lighter backgrounds, ensuring readability. A dark charcoal is also suitable.

Accessibility notes

  • Ensure sufficient contrast for text when using #8D9B85 or #A59C86 on lighter backgrounds like #C1C7AE.
  • The darker shades #4A6D5E and #6C6356 offer excellent readability for text on light backgrounds.
  • Avoid using #C1C7AE for small text as it may not meet WCAG contrast requirements.
  • Test color combinations for legibility, especially for navigation links and interactive elements.

Recommended combinations

Forest Depths

Creates a rich, natural look perfect for headers or prominent content blocks.

#4A6D5E · #6C6356 · #C1C7AE

Rustic Harmony

Ideal for showcasing earthy textures or creating a warm, inviting feel in UI elements.

#A59C86 · #8D9B85 · #4A6D5E

Calm Interface

A balanced combination for clean layouts, using #C1C7AE as background with dark text and accents.

#C1C7AE · #6C6356 · #4A6D5E

CSS variables

:root {
  --wild-fern-whisper-1: #4A6D5E;
  --wild-fern-whisper-2: #8D9B85;
  --wild-fern-whisper-3: #C1C7AE;
  --wild-fern-whisper-4: #A59C86;
  --wild-fern-whisper-5: #6C6356;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "wild-fern-whisper": {
        1: "#4A6D5E",
        2: "#8D9B85",
        3: "#C1C7AE",
        4: "#A59C86",
        5: "#6C6356",
      }
    }
  }
}

Related searches

earthy green palettemuted nature colorsforest color schemetranquil green brownorganic design colors

Palette colors

Hex values

Color 1#4A6D5E
·
Color 2#8D9B85
·
Color 3#C1C7AE
·
Color 4#A59C86
·
Color 5#6C6356
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
3.3:1AA18
2.1:1Fail
1:1Fail
2
2:1Fail
1.7:1Fail
1.1:1Fail
2:1Fail
3
3.3:1AA18
1.7:1Fail
1.6:1Fail
3.4:1AA18
4
2.1:1Fail
1.1:1Fail
1.6:1Fail
2.2:1Fail
5
1:1Fail
2:1Fail
3.4:1AA18
2.2:1Fail

Similar palettes

More like Wild Fern Whisper

View all earth
Woodland Hearth Moss
Enchanted Forest Lumina
Forest Canopy
Forest Canopy Echoes
Forest Fern Canopy
Forest Whisper Canopy