Palette

Wild Thistle Meadow

Soft, muted greens and grays reflecting the quiet, undisturbed beauty of a wild thistle meadow at dawn.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Wild Thistle Meadow 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 Thistle Meadow.

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

Data visualization

#727D6B#9AAB96#C7D8C5#E5E9E4#5D685C

Palette guide

How to use Wild Thistle Meadow

Overview

The Wild Thistle Meadow palette (version 2) evokes a sense of quiet natural beauty through its soft, muted greens and grays. This serene collection features the deep, grounding tone of #727D6B, complemented by the gentle #9AAB96 and the airy #C7D8C5. The lightest shade, #E5E9E4, provides a clean, almost ethereal base, while #5D685C offers a slightly darker, more intense green-gray for depth. Ideal for projects seeking a tranquil, organic, and understated aesthetic, this palette is perfect for conveying calmness and connection to nature without being overly vibrant. Designers and developers will appreciate its versatility for creating harmonious, subtle interfaces and branding.

Best used for

Eco-friendly product branding
Wellness and spa websites
Nature-inspired editorial design
Minimalist interior decor themes
Sustainable fashion lines
Calm user interfaces

Suggested color roles

primary

Use #727D6B as a foundational, stable green-gray for main sections or prominent branding elements, conveying a grounded feel.

secondary

Employ #9AAB96 for supporting elements, subheadings, or background accents, offering a harmonious and slightly lighter complement.

accent

Apply #5D685C for subtle but impactful accents, borders, or icons, providing a deeper, more defined contrast without harshness.

background

Utilize #E5E9E4 as a clean, light background color, offering a fresh canvas that enhances readability and keeps the design airy.

text

For optimal readability, use #5D685C or #727D6B for body text against lighter backgrounds like #E5E9E4 or #C7D8C5.

Accessibility notes

Ensure sufficient contrast when using #C7D8C5 for text against #E5E9E4; often, a darker text color will be needed.
The darkest color, #5D685C, provides excellent contrast for text on #E5E9E4, making it a reliable choice for body copy.
Avoid using lighter palette colors (e.g., #C7D8C5, #E5E9E4) for small text to prevent readability issues.
Test all color pairings for WCAG AA compliance, especially for interactive elements and critical information.

Recommended combinations

Serene Base

Creates a soft, ethereal background gradient or a light, harmonious set of container colors for a gentle aesthetic.

#E5E9E4 · #C7D8C5 · #9AAB96

Earthy Depth

Provides a grounded and natural feel, suitable for primary elements, strong headings, and accent details.

#727D6B · #5D685C · #9AAB96

Subtle Contrast

Offers a clear distinction between background and foreground elements, ideal for text blocks and calls to action.

#E5E9E4 · #727D6B · #5D685C

CSS variables

:root {
  --wild-thistle-meadow-2-1: #727D6B;
  --wild-thistle-meadow-2-2: #9AAB96;
  --wild-thistle-meadow-2-3: #C7D8C5;
  --wild-thistle-meadow-2-4: #E5E9E4;
  --wild-thistle-meadow-2-5: #5D685C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "wild-thistle-meadow-2": {
        1: "#727D6B",
        2: "#9AAB96",
        3: "#C7D8C5",
        4: "#E5E9E4",
        5: "#5D685C",
      }
    }
  }
}

Hex values

Color 1#727D6B

Color 2#9AAB96

Color 3#C7D8C5

Color 4#E5E9E4

Color 5#5D685C

Accessibility

Contrast checker

1.8:1Fail

2.9:1Fail

3.5:1AA18

1.4:1Fail

1.8:1Fail

1.6:1Fail

2:1Fail

2.4:1Fail

2.9:1Fail

1.6:1Fail

1.2:1Fail

3.9:1AA18