Palette

Whispering Grasslands

Gentle, natural greens and creamy tones reflecting the serene beauty of vast, sunlit grasslands.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4E6C3B#7FA66B#B4D39C#DCEBBC#F1F8E9

Palette guide

How to use Whispering Grasslands

Overview

The Whispering Grasslands palette reflects the serene beauty of vast, sunlit grasslands with its gentle, natural greens and creamy tones. This harmonious collection features deep, grounding greens like #4E6C3B and #7FA66B, transitioning smoothly into lighter, airy shades such as #B4D39C, #DCEBBC, and the almost-white #F1F8E9. Designers and developers will find this palette genuinely useful for creating calm, organic, and visually soothing digital and physical products. It's an excellent choice for projects emphasizing sustainability, natural living, or a minimalist aesthetic, suitable for everything from eco-friendly branding to serene web interfaces.

Best used for

Eco-friendly and sustainable brand identities
Natural cosmetics and skincare packaging
Children's clothing and toy design
Minimalist website and app interfaces
Sustainable living blogs and content platforms
Organic food and beverage marketing

Suggested color roles

primary

Utilize #4E6C3B for a deep, grounding primary color in navigation or footers, or #7FA66B for a rich, natural green that conveys stability.

secondary

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

accent

Introduce #DCEBBC as a light, warm neutral accent for interactive elements or subtle highlights, mimicking sunlit grass.

background

Opt for #F1F8E9 for a clean, airy canvas that feels pristine, or #DCEBBC for a gentle, creamy base.

text

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

Accessibility notes

Ensure #4E6C3B text on #F1F8E9 or #DCEBBC backgrounds meets WCAG AA contrast standards.
Be cautious using #B4D39C for small text on #DCEBBC backgrounds due to potential low contrast.
Lighter greens and neutrals like #DCEBBC and #F1F8E9 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 Prairie

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

#4E6C3B · #7FA66B · #B4D39C

Sunlit Field

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

#F1F8E9 · #DCEBBC · #B4D39C

Natural Gradient

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

#4E6C3B · #DCEBBC · #7FA66B

CSS variables

:root {
  --whispering-grasslands-1: #4E6C3B;
  --whispering-grasslands-2: #7FA66B;
  --whispering-grasslands-3: #B4D39C;
  --whispering-grasslands-4: #DCEBBC;
  --whispering-grasslands-5: #F1F8E9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "whispering-grasslands": {
        1: "#4E6C3B",
        2: "#7FA66B",
        3: "#B4D39C",
        4: "#DCEBBC",
        5: "#F1F8E9",
      }
    }
  }
}

Hex values

Color 1#4E6C3B

Color 2#7FA66B

Color 3#B4D39C

Color 4#DCEBBC

Color 5#F1F8E9

Accessibility

Contrast checker

2.1:1Fail

3.6:1AA18

4.7:1AA

5.5:1AA

2.1:1Fail

1.7:1Fail

2.2:1Fail

2.6:1Fail

3.6:1AA18

1.7:1Fail

1.3:1Fail

1.5:1Fail

4.7:1AA

2.2:1Fail

1.3:1Fail

1.2:1Fail

5.5:1AA

2.6:1Fail

1.5:1Fail

1.2:1Fail

Similar palettes

More like Whispering Grasslands