Palette

Whispering Grass Field

Gentle, muted greens mirroring the peaceful movement of tall grass in a light breeze.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#C2D4A0#A8C08A#8EA874#74905D#5C784C

Palette guide

How to use Whispering Grass Field

Overview

The Whispering Grass Field palette mirrors the peaceful movement of tall grass in a light breeze with its gentle, muted greens. This natural collection spans from the deep, grounding #5C784C and #74905D, through harmonious mid-tones like #8EA874 and #A8C08A, to the softest light green of #C2D4A0. Designers and developers can effectively use this palette to create tranquil, organic, and visually soothing digital and physical products. It's an excellent choice for projects emphasizing sustainability, calm, or a strong connection to nature, suitable for everything from environmentally conscious branding to serene web interfaces.

Best used for

Organic food and beverage branding
Environmental and conservation organization websites
Tranquil yoga and meditation studio branding
Botanical illustration and art projects
Natural skincare and cosmetic packaging
Sustainable fashion e-commerce platforms

Suggested color roles

primary

Utilize #5C784C for a deep, grounding primary color in headers or footers, or #74905D for a rich, natural primary that conveys stability.

secondary

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

accent

Introduce #C2D4A0 as a light, fresh accent for interactive elements or subtle highlights, mimicking sun-dappled grass.

background

Opt for #C2D4A0 for a clean, airy canvas that feels pristine, or #A8C08A for a gentle, muted green base.

text

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

Accessibility notes

Ensure #5C784C text on #C2D4A0 or #A8C08A backgrounds meets WCAG AA contrast standards.
Be cautious using #8EA874 for small text on #A8C08A backgrounds due to potential low contrast.
Lighter greens like #C2D4A0 and #A8C08A 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 Meadow

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

#5C784C · #74905D · #8EA874

Light Field

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

#C2D4A0 · #A8C08A · #8EA874

Grassy Gradient

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

#5C784C · #C2D4A0 · #A8C08A

CSS variables

:root {
  --whispering-grass-field-1: #C2D4A0;
  --whispering-grass-field-2: #A8C08A;
  --whispering-grass-field-3: #8EA874;
  --whispering-grass-field-4: #74905D;
  --whispering-grass-field-5: #5C784C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "whispering-grass-field": {
        1: "#C2D4A0",
        2: "#A8C08A",
        3: "#8EA874",
        4: "#74905D",
        5: "#5C784C",
      }
    }
  }
}

Hex values

Color 1#C2D4A0

Color 2#A8C08A

Color 3#8EA874

Color 4#74905D

Color 5#5C784C

Accessibility

Contrast checker

1.3:1Fail

1.7:1Fail

2.2:1Fail

3.1:1AA18

1.3:1Fail

1.8:1Fail

2.5:1Fail

1.7:1Fail

1.3:1Fail

1.4:1Fail

1.9:1Fail

2.2:1Fail

1.8:1Fail

1.4:1Fail

3.1:1AA18

2.5:1Fail

1.9:1Fail

1.4:1Fail

Similar palettes

More like Whispering Grass Field

Whispering Grass Field

See it in context.

Ready when you are.

Built with Whispering Grass Field.

How to use Whispering Grass Field

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Meadow

Light Field

Grassy Gradient

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Whispering Grass Field