Back to palettes

Palette

Desert Sage Bloom

A soothing palette inspired by the resilient desert flora and dusty air.

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

#C2C3AE#E0E2C7#B7B49B#738A8A#A6AAA6

Palette guide

How to use Desert Sage Bloom

Overview

The Desert Sage Bloom palette offers a soothing and earthy collection inspired by resilient desert flora and dusty air. It features a harmonious blend of muted greens and soft grays, including the gentle #C2C3AE and the lighter, airy #E0E2C7. The deeper #B7B49B provides a grounded mid-tone, while the cool, sophisticated #738A8A adds a refreshing contrast. The balanced #A6AAA6 completes the palette with a versatile neutral. This collection is perfect for designers seeking a calm, natural, and modern aesthetic, ideal for conveying tranquility and understated elegance in various digital and print applications.

Best used for

  • Eco-friendly brand identities
  • Wellness and mindfulness apps
  • Natural product packaging
  • Serene interior design concepts
  • Botanical illustration and art
  • UI/UX with a calming, organic feel

Suggested color roles

primary

Use #738A8A for strong headings, borders, or foundational elements, providing a cool, sophisticated anchor.

secondary

Apply #C2C3AE for larger content blocks or prominent UI components, offering a soft, earthy mid-tone.

accent

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

background

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

text

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

Accessibility notes

  • Ensure #738A8A text has strong contrast against #E0E2C7 and #C2C3AE.
  • #E0E2C7 and #C2C3AE may not provide enough contrast for text when paired closely.
  • The darker shades (#B7B49B, #738A8A) 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 Serenity

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

#C2C3AE · #E0E2C7 · #738A8A

Dusty Green

Perfect for designs needing a subtle, earthy feel with depth, like product displays or textural elements.

#B7B49B · #A6AAA6 · #C2C3AE

Cool Earth

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

#738A8A · #E0E2C7 · #B7B49B

CSS variables

:root {
  --desert-sage-bloom-2-1: #C2C3AE;
  --desert-sage-bloom-2-2: #E0E2C7;
  --desert-sage-bloom-2-3: #B7B49B;
  --desert-sage-bloom-2-4: #738A8A;
  --desert-sage-bloom-2-5: #A6AAA6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "desert-sage-bloom-2": {
        1: "#C2C3AE",
        2: "#E0E2C7",
        3: "#B7B49B",
        4: "#738A8A",
        5: "#A6AAA6",
      }
    }
  }
}

Related searches

desert sage green palettemuted earthy gray colorsnatural calm web designsubtle green grey schemebotanical inspired palette

Palette colors

Hex values

Color 1#C2C3AE
·
Color 2#E0E2C7
·
Color 3#B7B49B
·
Color 4#738A8A
·
Color 5#A6AAA6
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.2:1Fail
2:1Fail
1.3:1Fail
2
1.4:1Fail
1.6:1Fail
2.8:1Fail
1.8:1Fail
3
1.2:1Fail
1.6:1Fail
1.7:1Fail
1.1:1Fail
4
2:1Fail
2.8:1Fail
1.7:1Fail
1.6:1Fail
5
1.3:1Fail
1.8:1Fail
1.1:1Fail
1.6:1Fail

Similar palettes

More like Desert Sage Bloom

View all earth
Desert Sage Bloom
Sun-Kissed Desert Sage
Whispering Sage Brush
Agave Bloom Dawn
Antique Sage Study
Desert Agave Bloom