Back to palettes

Palette

Dusty Sage Bloom

Soft, muted greens and greys inspired by the subtle beauty of dusty sage leaves and tranquil nature.

neutralminimal5 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

#5F7A77#8BA4A1#B3C0BC#D7E0DD#EFF3F2

Palette guide

How to use Dusty Sage Bloom

Overview

The Dusty Sage Bloom palette offers soft, muted greens and greys inspired by the subtle beauty of dusty sage leaves and tranquil nature. Featuring ethereal shades like #EFF3F2 and #D7E0DD for a clean, airy foundation, it deepens gracefully through #B3C0BC and #8BA4A1, culminating in the grounding #5F7A77. This palette is ideal for designers and developers seeking to create serene, minimalist, and natural experiences. Its understated elegance makes it perfect for conveying calm, sophistication, and an organic feel across digital interfaces, branding, and physical product designs, promoting a sense of peace and clarity.

Best used for

  • Minimalist brand identity
  • Eco-conscious product packaging
  • Health and wellness app design
  • Calm web and UI interfaces
  • Modern home decor concepts
  • Nature-inspired photography portfolios

Suggested color roles

primary

#8BA4A1 - A balanced, muted sage-grey, excellent for primary UI elements or brand statements.

secondary

#B3C0BC - A lighter, supportive shade, ideal for secondary backgrounds or subtle highlights.

accent

#5F7A77 - The deepest, most grounding sage-green, perfect for impactful accents or calls-to-action.

background

#EFF3F2 - The lightest, almost white, providing a clean and airy canvas.

text

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

Accessibility notes

  • Ensure #5F7A77 is used for text on #EFF3F2 or #D7E0DD to meet WCAG contrast guidelines.
  • Lighter shades like #EFF3F2 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 #5F7A77 proves insufficient on mid-tones.

Recommended combinations

Serene Gradient

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

#EFF3F2 · #D7E0DD · #B3C0BC

Grounding Contrast

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

#5F7A77 · #EFF3F2 · #8BA4A1

Muted Harmony

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

#8BA4A1 · #B3C0BC · #D7E0DD

CSS variables

:root {
  --dusty-sage-bloom-1: #5F7A77;
  --dusty-sage-bloom-2: #8BA4A1;
  --dusty-sage-bloom-3: #B3C0BC;
  --dusty-sage-bloom-4: #D7E0DD;
  --dusty-sage-bloom-5: #EFF3F2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dusty-sage-bloom": {
        1: "#5F7A77",
        2: "#8BA4A1",
        3: "#B3C0BC",
        4: "#D7E0DD",
        5: "#EFF3F2",
      }
    }
  }
}

Related searches

dusty sage color schememuted green grey paletteminimalist natural colorscalm serene aestheticearthy sage tones

Palette colors

Hex values

Color 1#5F7A77
·
Color 2#8BA4A1
·
Color 3#B3C0BC
·
Color 4#D7E0DD
·
Color 5#EFF3F2
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.5:1Fail
3.4:1AA18
4.1:1AA18
2
1.7:1Fail
1.4:1Fail
2:1Fail
2.4:1Fail
3
2.5:1Fail
1.4:1Fail
1.4:1Fail
1.7:1Fail
4
3.4:1AA18
2:1Fail
1.4:1Fail
1.2:1Fail
5
4.1:1AA18
2.4:1Fail
1.7:1Fail
1.2:1Fail

Similar palettes

More like Dusty Sage Bloom

View all neutral
Arid Succulent Blush
Smoked Sage Pottery
Agave Succulent Dew
Calm Lakeside Stone
Muted Sage Bloom
Natural Linen Texture