Back to palettes

Palette

Desert Sage Tone

Soft, understated greens and grays reflecting the quiet resilience of desert foliage.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#6B7B6B#9CAFA8#C4D2CB#DDE3E1#EFF4F2

Palette guide

How to use Desert Sage Tone

Overview

The Desert Sage Tone palette showcases soft, understated greens and grays, reflecting the quiet resilience of desert foliage. This harmonious collection ranges from the deep, grounding #6B7B6B through the balanced #9CAFA8 and the lighter, airy #C4D2CB. The very pale #DDE3E1 and the almost white #EFF4F2 provide excellent luminosity and breadth, creating a sense of calm and spaciousness. Ideal for designers seeking a minimalist, serene, and sophisticated aesthetic, this palette excels at conveying tranquility, natural elegance, and a comforting softness, perfect for high-end digital interfaces, delicate branding, or any project requiring understated visual impact.

Best used for

  • Minimalist branding and packaging
  • Eco-friendly and sustainable design
  • Wellness and meditation apps
  • Modern interior design concepts
  • Serene website interfaces
  • Botanical illustration and art

Suggested color roles

primary

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

secondary

Apply #9CAFA8 for larger content blocks or prominent UI components, offering a balanced, cool mid-tone.

accent

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

background

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

text

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

Accessibility notes

  • Ensure #6B7B6B text has strong contrast against #EFF4F2 and #DDE3E1.
  • #DDE3E1 and #EFF4F2 may not provide enough contrast for text when paired closely.
  • The lighter shades like #C4D2CB should be avoided for small text against similarly light backgrounds.
  • Always test color contrast ratios for all text and interactive elements to meet WCAG standards.

Recommended combinations

Sage Mist

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

#6B7B6B · #9CAFA8 · #EFF4F2

Dusty Foliage

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

#C4D2CB · #DDE3E1 · #9CAFA8

Quiet Earth

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

#6B7B6B · #DDE3E1 · #C4D2CB

CSS variables

:root {
  --desert-sage-tone-1: #6B7B6B;
  --desert-sage-tone-2: #9CAFA8;
  --desert-sage-tone-3: #C4D2CB;
  --desert-sage-tone-4: #DDE3E1;
  --desert-sage-tone-5: #EFF4F2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "desert-sage-tone": {
        1: "#6B7B6B",
        2: "#9CAFA8",
        3: "#C4D2CB",
        4: "#DDE3E1",
        5: "#EFF4F2",
      }
    }
  }
}

Related searches

desert sage green palettemuted green grey colorsnatural calm web designsubtle botanical schemeorganic green earth tones

Palette colors

Hex values

Color 1#6B7B6B
·
Color 2#9CAFA8
·
Color 3#C4D2CB
·
Color 4#DDE3E1
·
Color 5#EFF4F2
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
2.9:1Fail
3.5:1AA18
4:1AA18
2
2:1Fail
1.5:1Fail
1.8:1Fail
2.1:1Fail
3
2.9:1Fail
1.5:1Fail
1.2:1Fail
1.4:1Fail
4
3.5:1AA18
1.8:1Fail
1.2:1Fail
1.2:1Fail
5
4:1AA18
2.1:1Fail
1.4:1Fail
1.2:1Fail

Similar palettes

More like Desert Sage Tone

View all earth
Whispering Sage Brush
Antique Sage Study
Cactus Garden Earth
Canyon Bloom Whisper
Desert Sage Bloom
Desert Sage Bloom