Palette

Whispering Grass Fields

Soft, varied greens and gentle neutrals capturing the quiet rustle of grass in an open field.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Whispering Grass Fields 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 Whispering Grass Fields.

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

Data visualization

#4E6C50#7D9B82#AABCAE#D1DFD4#EBF3ED

Palette guide

How to use Whispering Grass Fields

Overview

The Whispering Grass Fields palette offers soft, varied greens and gentle neutrals, capturing the quiet rustle of grass in an open field. This tranquil collection ranges from the deep, grounding #4E6C50, through harmonious mid-tones like #7D9B82 and #AABCAE, to the airy lightness of #D1DFD4 and #EBF3ED. Designers and developers will find this palette genuinely useful for creating serene, sophisticated, and inviting digital experiences. It excels in projects that require a subtle connection to nature, promoting a sense of calm and clarity, making it ideal for wellness platforms, minimalist designs, or sustainable brand identities.

Best used for

Wellness and spa-related website design
Sustainable fashion and lifestyle branding
Minimalist user interface design
Calm and comforting interior design concepts
Nature-themed blogs and editorial content
Eco-friendly product packaging

Suggested color roles

primary

Utilize #4E6C50 for a deep, grounding primary color in navigation or footers, or #7D9B82 for a rich, muted green that conveys stability.

secondary

Employ #AABCAE as a harmonious secondary color for background sections or supportive graphic elements, maintaining a natural flow.

accent

Introduce #D1DFD4 as a light, airy accent for interactive elements or subtle highlights, mimicking soft daylight.

background

Opt for #EBF3ED for a clean, ethereal canvas that feels pristine, or #D1DFD4 for a gentle, muted neutral base.

text

Pair a dark, readable color like #4E6C50 or a deep charcoal for body text on lighter backgrounds to ensure excellent readability and maintain the natural aesthetic.

Accessibility notes

Ensure #4E6C50 text on #EBF3ED or #D1DFD4 backgrounds meets WCAG AA contrast standards.
Be cautious using #AABCAE for small text on #D1DFD4 backgrounds due to potential low contrast.
Lighter neutrals like #D1DFD4 and #EBF3ED should primarily be used for backgrounds or large graphical elements.
For interactive elements, ensure sufficient contrast between the color and its surrounding background for clarity.

Recommended combinations

Deep Serene

Creates a rich, layered green experience, perfect for conveying depth and natural growth in branding or large content blocks.

#4E6C50 · #7D9B82 · #AABCAE

Misty Morning

Ideal for clean, airy interfaces or light backgrounds, with #AABCAE providing a soft, natural anchor.

#EBF3ED · #D1DFD4 · #AABCAE

Gentle Transition

Excellent for creating visual hierarchy or subtle transitions, combining deep, light, and mid-tone greens harmoniously.

#4E6C50 · #D1DFD4 · #7D9B82

CSS variables

:root {
  --whispering-grass-fields-2-1: #4E6C50;
  --whispering-grass-fields-2-2: #7D9B82;
  --whispering-grass-fields-2-3: #AABCAE;
  --whispering-grass-fields-2-4: #D1DFD4;
  --whispering-grass-fields-2-5: #EBF3ED;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "whispering-grass-fields-2": {
        1: "#4E6C50",
        2: "#7D9B82",
        3: "#AABCAE",
        4: "#D1DFD4",
        5: "#EBF3ED",
      }
    }
  }
}

Hex values

Color 1#4E6C50

Color 2#7D9B82

Color 3#AABCAE

Color 4#D1DFD4

Color 5#EBF3ED

Accessibility

Contrast checker

1.9:1Fail

2.9:1Fail

4.2:1AA18

5.2:1AA

1.9:1Fail

1.5:1Fail

2.2:1Fail

2.7:1Fail

2.9:1Fail

1.5:1Fail

1.4:1Fail

1.8:1Fail

4.2:1AA18

2.2:1Fail

1.4:1Fail

1.2:1Fail

5.2:1AA

2.7:1Fail

1.8:1Fail

1.2:1Fail

Similar palettes

More like Whispering Grass Fields

View all earth

Botanical Sketchbook

Coastal Seagrass Dunes