Palette

Desert Sage Bloom

Muted greens and soft, dusty grays, like the hardy, aromatic sage brush flowering in an arid landscape.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#9C9B7F#A1B39D#C0D4B3#E6F7DF#7A7B6B

Palette guide

How to use Desert Sage Bloom

Overview

The Desert Sage Bloom palette offers a serene collection of muted greens and soft, dusty grays, like the hardy, aromatic sagebrush flowering in an arid landscape. It ranges from the very light, airy #E6F7DF and the gentle #C0D4B3, through the balanced #A1B39D, to the deeper, grounding #9C9B7F and #7A7B6B. This palette is perfect for designers seeking a calm, natural, and understated aesthetic. It provides a sense of peace and organic elegance, ideal for conveying tranquility and connection to nature in digital interfaces, print media, or any project where a soothing and authentic feel is desired.

Best used for

Wellness and self-care branding
Eco-friendly product packaging
Nature-inspired web design
Botanical art and illustration
Serene interior design concepts
UI/UX with a calming, organic feel

Suggested color roles

primary

Use #7A7B6B for strong headings, borders, or foundational elements, providing a deep, stable anchor.

secondary

Apply #9C9B7F for larger content blocks or prominent UI components, offering a balanced, earthy green mid-tone.

accent

Employ #A1B39D for interactive elements or subtle highlights, adding a touch of soft, natural freshness.

background

Utilize #E6F7DF for clean, airy backgrounds, ensuring good contrast for darker text and a luminous feel.

text

For optimal readability, use #7A7B6B for body text on lighter backgrounds, or a crisp white/off-white on darker elements.

Accessibility notes

Ensure #7A7B6B text has strong contrast against #E6F7DF and #C0D4B3.
#E6F7DF and #C0D4B3 may not provide enough contrast for text when paired closely.
The darker shades (#9C9B7F, #7A7B6B) will require light text (e.g., white) for readability.
Always test color contrast ratios for all text and interactive elements to meet WCAG standards.

Recommended combinations

Sage Green

Creates a harmonious, calm gradient, excellent for serene backgrounds or large hero sections.

#9C9B7F · #A1B39D · #7A7B6B

Dusty Bloom

Perfect for designs needing a subtle, airy feel with depth, like product displays or soft branding.

#C0D4B3 · #E6F7DF · #9C9B7F

Grounded Calm

Suitable for robust designs requiring clear hierarchy with a refreshing, natural touch.

#7A7B6B · #A1B39D · #C0D4B3

CSS variables

:root {
  --desert-sage-bloom-1: #9C9B7F;
  --desert-sage-bloom-2: #A1B39D;
  --desert-sage-bloom-3: #C0D4B3;
  --desert-sage-bloom-4: #E6F7DF;
  --desert-sage-bloom-5: #7A7B6B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "desert-sage-bloom": {
        1: "#9C9B7F",
        2: "#A1B39D",
        3: "#C0D4B3",
        4: "#E6F7DF",
        5: "#7A7B6B",
      }
    }
  }
}

Hex values

Color 1#9C9B7F

Color 2#A1B39D

Color 3#C0D4B3

Color 4#E6F7DF

Color 5#7A7B6B

Accessibility

Contrast checker

1.3:1Fail

1.8:1Fail

2.5:1Fail

1.5:1Fail

1.3:1Fail

1.4:1Fail

2:1Fail

1.9:1Fail

1.8:1Fail

1.4:1Fail

2.7:1Fail

2.5:1Fail

2:1Fail

1.4:1Fail

3.8:1AA18

1.5:1Fail

1.9:1Fail

2.7:1Fail

3.8:1AA18

Similar palettes

More like Desert Sage Bloom

Desert Sage Bloom

See it in context.

Ready when you are.

Built with Desert Sage Bloom.

How to use Desert Sage Bloom

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Sage Green

Dusty Bloom

Grounded Calm

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Desert Sage Bloom