Back to palettes

Palette

Whispering Sage Garden

Soft, silvery greens and muted grays found in a quiet, aromatic sage garden.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#7C8D87#A2AFAC#BFC9C6#D7DFDC#EEF2F0

Palette guide

How to use Whispering Sage Garden

Overview

The Whispering Sage Garden palette offers a harmonious collection of soft, silvery greens and muted grays, reminiscent of a peaceful, aromatic sage garden. With colors like the calming #7C8D87 and the airy #EEF2F0, alongside the subtle #BFC9C6, this palette is ideal for creating designs that exude tranquility, sophistication, and a connection to nature. It provides a serene and balanced visual experience, perfect for conveying quiet elegance and organic harmony. Designers can leverage these muted hues to craft inviting digital spaces, refined branding, or soothing editorial content, achieving a timeless and understated aesthetic.

Best used for

  • Botanical and garden-themed websites
  • Wellness and aromatherapy brands
  • Minimalist interior design concepts
  • Eco-conscious product packaging
  • Calm UI/UX interfaces
  • Nature-inspired art and photography

Suggested color roles

primary

Use #A2AFAC as a versatile base for content areas, providing a soft and approachable feel.

secondary

Apply #7C8D87 for headings, navigation, or graphic elements that require more depth and grounding.

accent

Employ #D7DFDC for subtle highlights, interactive elements, or to break up larger blocks of color without harshness.

background

The lightest shade, #EEF2F0, is perfect for a clean, airy background, allowing other elements to breathe.

text

A deep charcoal, such as #3C4A45, offers excellent readability while maintaining the palette's natural and muted character.

Accessibility notes

  • Ensure adequate contrast for text, especially when using lighter shades like #D7DFDC or #BFC9C6 as backgrounds.
  • The darker #7C8D87 provides good contrast for text on #EEF2F0 and #D7DFDC.
  • Avoid using light text on #A2AFAC or #BFC9C6 without thoroughly checking contrast ratios.
  • For interactive elements, a slightly darker version of #7C8D87 could be used to ensure clear visibility and WCAG compliance.

Recommended combinations

Garden Base

Creates a soft, layered background for web pages or print, evoking a gentle, natural atmosphere.

#EEF2F0 · #D7DFDC · #BFC9C6

Deep Sage

Ideal for headings, primary buttons, or feature sections that require a grounded and sophisticated presence.

#A2AFAC · #7C8D87 · #BFC9C6

Subtle Depth

Excellent for high-contrast text or UI elements on a light background, balancing softness with clarity.

#D7DFDC · #7C8D87 · #BFC9C6

CSS variables

:root {
  --whispering-sage-garden-1: #7C8D87;
  --whispering-sage-garden-2: #A2AFAC;
  --whispering-sage-garden-3: #BFC9C6;
  --whispering-sage-garden-4: #D7DFDC;
  --whispering-sage-garden-5: #EEF2F0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "whispering-sage-garden": {
        1: "#7C8D87",
        2: "#A2AFAC",
        3: "#BFC9C6",
        4: "#D7DFDC",
        5: "#EEF2F0",
      }
    }
  }
}

Related searches

sage green garden palettemuted green gray colorscalm nature color schemeherbal design paletteserene brand colors

Palette colors

Hex values

Color 1#7C8D87
·
Color 2#A2AFAC
·
Color 3#BFC9C6
·
Color 4#D7DFDC
·
Color 5#EEF2F0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.1:1Fail
2.6:1Fail
3.1:1AA18
2
1.5:1Fail
1.3:1Fail
1.7:1Fail
2:1Fail
3
2.1:1Fail
1.3:1Fail
1.2:1Fail
1.5:1Fail
4
2.6:1Fail
1.7:1Fail
1.2:1Fail
1.2:1Fail
5
3.1:1AA18
2:1Fail
1.5:1Fail
1.2:1Fail

Similar palettes

More like Whispering Sage Garden

View all neutral