Back to palettes

Palette

Whispering Grass Blades

Soft, natural greens sway gently, capturing the tranquil whispers of a sun-dappled field of grass.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#7D8F5F#A6B88A#CCD9AF#E8F0D1#627A4A

Palette guide

How to use Whispering Grass Blades

Overview

The Whispering Grass Blades palette captures the tranquil whispers of a sun-dappled field of grass with its soft, natural greens. This serene collection features grounding tones like #627A4A and #7D8F5F, transitioning smoothly into lighter, airy shades such as #A6B88A, #CCD9AF, and the almost-white #E8F0D1. Designers and developers can leverage this palette to create genuinely useful and calming user experiences across various platforms. It's perfect for projects that aim to convey freshness, organic purity, or a gentle, understated elegance, making it highly versatile for eco-friendly brands, wellness apps, and nature-themed content.

Best used for

  • Eco-conscious and sustainable brand identities
  • Health and wellness application interfaces
  • Botanical illustration and digital art
  • Gentle and natural product packaging
  • Serene website and blog designs
  • Children's educational content on nature

Suggested color roles

primary

Utilize #627A4A for a deep, grounding primary color in navigation or footers, or #7D8F5F for a softer, yet substantial, brand presence.

secondary

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

accent

Introduce #CCD9AF as a light, fresh accent for interactive elements or subtle highlights, evoking the freshness of new growth.

background

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

text

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

Accessibility notes

  • Ensure #627A4A text on #E8F0D1 or #CCD9AF backgrounds meets WCAG AA contrast standards.
  • Be cautious using #A6B88A for small text on #CCD9AF backgrounds due to potential low contrast.
  • Lighter greens like #CCD9AF and #E8F0D1 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 Grass Field

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

#627A4A · #7D8F5F · #A6B88A

Sunlit Blades

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

#E8F0D1 · #CCD9AF · #A6B88A

Natural Harmony

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

#7D8F5F · #CCD9AF · #627A4A

CSS variables

:root {
  --whispering-grass-blades-1: #7D8F5F;
  --whispering-grass-blades-2: #A6B88A;
  --whispering-grass-blades-3: #CCD9AF;
  --whispering-grass-blades-4: #E8F0D1;
  --whispering-grass-blades-5: #627A4A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "whispering-grass-blades": {
        1: "#7D8F5F",
        2: "#A6B88A",
        3: "#CCD9AF",
        4: "#E8F0D1",
        5: "#627A4A",
      }
    }
  }
}

Related searches

soft green palettenatural grass colorsserene nature designmuted green hex codeseco-friendly branding

Palette colors

Hex values

Color 1#7D8F5F
·
Color 2#A6B88A
·
Color 3#CCD9AF
·
Color 4#E8F0D1
·
Color 5#627A4A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.4:1Fail
3:1Fail
1.4:1Fail
2
1.7:1Fail
1.4:1Fail
1.8:1Fail
2.2:1Fail
3
2.4:1Fail
1.4:1Fail
1.3:1Fail
3.2:1AA18
4
3:1Fail
1.8:1Fail
1.3:1Fail
4:1AA18
5
1.4:1Fail
2.2:1Fail
3.2:1AA18
4:1AA18

Similar palettes

More like Whispering Grass Blades

View all earth
Wild Thistle Meadow
Botanical Sketch Green
Botanical Sketchbook
Desert Agave Bloom
Desert Succulent Array
Desert Succulent Bloom