Back to palettes

Palette

Sage Meadows

A soothing palette inspired by tranquil fields of sage, blending earthy greens with soft, subtle grays.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sage Meadows 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 Sage Meadows.

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

Data visualization

#B2AC88#8F9779#6E7C62#4E614C#3D4E3A

Palette guide

How to use Sage Meadows

Overview

The 'Sage Meadows' palette is a soothing collection inspired by tranquil fields of sage, blending earthy greens with soft, subtle grays. Featuring the muted #B2AC88, the balanced #8F9779, the deep #6E7C62, the robust #4E614C, and the profound #3D4E3A, this palette creates a calm and grounded aesthetic. Designers can utilize these hues to evoke a sense of natural harmony and understated elegance. Developers will find these hex codes excellent for crafting user interfaces that promote relaxation and an organic feel, ideal for wellness apps, sustainable brands, or any project seeking a peaceful visual identity.

Best used for

  • Organic food and beverage branding
  • Landscape design and architecture
  • Meditation and wellness applications
  • Rustic home decor accents
  • Natural skincare product marketing
  • Environmental conservation websites

Suggested color roles

primary

Use #6E7C62 as a balanced, natural main color, conveying serenity and organic quality.

secondary

Apply #8F9779 for lighter, subtle support, creating gentle visual transitions.

accent

Employ #3D4E3A as the deepest, grounding element, perfect for strong headings or important details.

background

Utilize #B2AC88 for a soft, muted green-gray base, offering a tranquil and understated backdrop.

text

Pair #3D4E3A or a deep charcoal/black with #B2AC88 for optimal contrast and superior readability.

Accessibility notes

  • Ensure #3D4E3A text on #B2AC88 provides excellent contrast for optimal readability.
  • Check that #4E614C text on #8F9779 is legible and meets WCAG contrast guidelines.
  • Avoid using light-colored text on any of the mid-tone greens to prevent readability issues.
  • Verify contrast for all text and interactive elements, especially on similar green-gray backgrounds.

Recommended combinations

Meadow Depths

Creates a rich, layered green effect, ideal for content blocks, footers, or designs requiring natural depth.

#3D4E3A · #4E614C · #6E7C62

Soft Haze

Perfect for gentle, natural blends, backgrounds, or visual elements that need to feel serene and expansive.

#B2AC88 · #8F9779 · #6E7C62

Grounded Contrast

Offers a clear visual hierarchy with a soft base and strong dark accents, excellent for defining sections.

#B2AC88 · #6E7C62 · #3D4E3A

CSS variables

:root {
  --sage-meadows-1: #B2AC88;
  --sage-meadows-2: #8F9779;
  --sage-meadows-3: #6E7C62;
  --sage-meadows-4: #4E614C;
  --sage-meadows-5: #3D4E3A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sage-meadows": {
        1: "#B2AC88",
        2: "#8F9779",
        3: "#6E7C62",
        4: "#4E614C",
        5: "#3D4E3A",
      }
    }
  }
}

Related searches

muted sage greenearthy meadow palettenatural rustic colorscalm green grayorganic design scheme

Palette colors

Hex values

Color 1#B2AC88
·
Color 2#8F9779
·
Color 3#6E7C62
·
Color 4#4E614C
·
Color 5#3D4E3A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.9:1Fail
2.9:1Fail
3.9:1AA18
2
1.3:1Fail
1.5:1Fail
2.2:1Fail
2.9:1Fail
3
1.9:1Fail
1.5:1Fail
1.5:1Fail
2:1Fail
4
2.9:1Fail
2.2:1Fail
1.5:1Fail
1.3:1Fail
5
3.9:1AA18
2.9:1Fail
2:1Fail
1.3:1Fail

Similar palettes

More like Sage Meadows

View all earth
Gentle Stream Pebbles
Herbal Garden Fresh
Mossy Forest Path
Mystical Forest Floor
Sage Brush Morning
Whispering Pine