Back to palettes

Palette

Dusty Sage Bloom

Calm and understated, inspired by the muted greens of sagebrush blooming in a dusty field.

neutralnatural5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#9EAF97#C3D1BD#DCE4D6#85987E#A7B8A0

Palette guide

How to use Dusty Sage Bloom

Overview

The Dusty Sage Bloom palette is calm and understated, inspired by the muted greens of sagebrush blooming in a dusty field. This natural collection features gentle shades like #DCE4D6 and #C3D1BD, providing a light, airy foundation. Deeper tones such as #A7B8A0, #9EAF97, and #85987E introduce a grounding, earthy sophistication. Designers and developers can leverage this palette to create serene, organic, and minimalist experiences. It's ideal for projects aiming to convey tranquility, natural beauty, and a sense of calm, suitable for both digital interfaces and physical product designs that require a subtle, earthy touch.

Best used for

  • Eco-friendly brand identities
  • Minimalist web design
  • Natural skincare packaging
  • Sustainable fashion collections
  • Relaxing interior design
  • Health and wellness apps

Suggested color roles

primary

#9EAF97 - A balanced, muted sage green, excellent for primary UI elements or brand accents.

secondary

#C3D1BD - A lighter, supportive green, ideal for secondary backgrounds or subtle highlights.

accent

#85987E - The deepest, most grounding sage, perfect for impactful accents or calls-to-action.

background

#DCE4D6 - The lightest, almost off-white, providing a soft and airy canvas.

text

#85987E - A deep, readable sage green, ensuring strong contrast on lighter palette colors.

Accessibility notes

  • Ensure #85987E is used for text on #DCE4D6 or #C3D1BD to meet WCAG contrast guidelines.
  • Lighter shades like #DCE4D6 will require darker text for readability; avoid using other light palette colors for text.
  • Test contrast ratios for all text and background pairings, especially for interactive elements.
  • Consider supplementing with a pure black or dark charcoal for critical body text if #85987E proves insufficient on mid-tones.

Recommended combinations

Sage Gradient

Smooth, subtle background transitions or layered visual effects in web or print.

#DCE4D6 · #C3D1BD · #A7B8A0

Earthy Contrast

High-contrast headings, buttons, or key information against a clean, light backdrop.

#85987E · #DCE4D6 · #C3D1BD

Natural Harmony

Creating balanced content blocks or decorative elements with an organic, calming feel.

#9EAF97 · #A7B8A0 · #C3D1BD

CSS variables

:root {
  --dusty-sage-bloom-2-1: #9EAF97;
  --dusty-sage-bloom-2-2: #C3D1BD;
  --dusty-sage-bloom-2-3: #DCE4D6;
  --dusty-sage-bloom-2-4: #85987E;
  --dusty-sage-bloom-2-5: #A7B8A0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dusty-sage-bloom-2": {
        1: "#9EAF97",
        2: "#C3D1BD",
        3: "#DCE4D6",
        4: "#85987E",
        5: "#A7B8A0",
      }
    }
  }
}

Related searches

dusty sage color palettemuted green schemeearthy neutral greenscalming botanical colorsminimalist sage aesthetic

Palette colors

Hex values

Color 1#9EAF97
·
Color 2#C3D1BD
·
Color 3#DCE4D6
·
Color 4#85987E
·
Color 5#A7B8A0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
1.8:1Fail
1.3:1Fail
1.1:1Fail
2
1.5:1Fail
1.2:1Fail
1.9:1Fail
1.3:1Fail
3
1.8:1Fail
1.2:1Fail
2.4:1Fail
1.6:1Fail
4
1.3:1Fail
1.9:1Fail
2.4:1Fail
1.5:1Fail
5
1.1:1Fail
1.3:1Fail
1.6:1Fail
1.5:1Fail

Similar palettes

More like Dusty Sage Bloom

View all neutral
Deep Woods Mushroom
Sagebrush Plains Haze
Aged Scroll Patina
Ancient Script
Ancient Temple Sandstone
Antique Library Pages