Palette

Desert Sage Bloom

A tranquil palette inspired by desert flora, combining muted earth tones with soft, dusty greens.

earthcalm5 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

#DBC6B1#C4B29E#A08E77#6A7B6B#425644

Palette guide

How to use Desert Sage Bloom

Overview

The Desert Sage Bloom palette offers a tranquil and grounded collection inspired by desert flora, combining muted earth tones with soft, dusty greens. It features a gentle progression from the warm, inviting #DBC6B1 and the balanced #C4B29E, through the richer #A08E77. The palette deepens significantly with the natural green of #6A7B6B and culminates in the robust, anchoring #425644. This collection is perfect for designers seeking a calm, organic, and sophisticated aesthetic. It provides excellent depth and natural harmony, ideal for creating a sense of peace and connection to nature in digital or print media.

Best used for

Eco-conscious branding
Sustainable product packaging
Nature-themed web design
Interior design for zen spaces
Botanical art and illustration
UI/UX with a calming, organic feel

Suggested color roles

primary

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

secondary

Apply #6A7B6B for larger content blocks or prominent UI components, offering a rich, earthy green mid-tone.

accent

Employ #A08E77 for interactive elements or subtle highlights, adding a touch of grounded warmth.

background

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

text

For optimal readability, use #425644 for body text on lighter backgrounds, or a crisp white/off-white on the darkest shades.

Accessibility notes

Ensure #425644 text has strong contrast against #DBC6B1 and #C4B29E.
#DBC6B1 and #C4B29E may not provide enough contrast for text when paired closely.
The darker shades (#A08E77, #6A7B6B, #425644) 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 Earth

Creates a warm, natural gradient, excellent for backgrounds or textural elements.

#DBC6B1 · #A08E77 · #425644

Desert Green

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

#C4B29E · #6A7B6B · #DBC6B1

Grounded Bloom

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

#425644 · #A08E77 · #6A7B6B

CSS variables

:root {
  --desert-sage-bloom-3-1: #DBC6B1;
  --desert-sage-bloom-3-2: #C4B29E;
  --desert-sage-bloom-3-3: #A08E77;
  --desert-sage-bloom-3-4: #6A7B6B;
  --desert-sage-bloom-3-5: #425644;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "desert-sage-bloom-3": {
        1: "#DBC6B1",
        2: "#C4B29E",
        3: "#A08E77",
        4: "#6A7B6B",
        5: "#425644",
      }
    }
  }
}

Hex values

Color 1#DBC6B1

Color 2#C4B29E

Color 3#A08E77

Color 4#6A7B6B

Color 5#425644

Accessibility

Contrast checker

1.2:1Fail

1.9:1Fail

2.7:1Fail

4.8:1AA

1.2:1Fail

1.5:1Fail

2.2:1Fail

3.9:1AA18

1.9:1Fail

1.5:1Fail

1.4:1Fail

2.5:1Fail

2.7:1Fail

2.2:1Fail

1.4:1Fail

1.8:1Fail

4.8:1AA

3.9:1AA18

2.5:1Fail

1.8:1Fail

Similar palettes

More like Desert Sage Bloom