Back to palettes

Palette

Sage Brush Morning

Soft, muted greens and creams capturing the tranquil essence of a dewy sagebrush landscape at dawn.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sage Brush Morning 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 Sage Brush Morning.

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

Data visualization

#5A7C5E#8BA48D#B6C8B8#DFEBE1#3D553F

Palette guide

How to use Sage Brush Morning

Overview

The 'Sage Brush Morning' palette captures the tranquil essence of a dewy sagebrush landscape at dawn with its soft, muted greens and creams. Featuring the balanced #5A7C5E, the gentle #8BA48D, the airy #B6C8B8, the near-white #DFEBE1, and the grounding #3D553F, this collection exudes calmness and natural beauty. Designers can leverage these hues to create serene, eco-friendly, and minimalist aesthetics. Developers will find these hex codes ideal for crafting user interfaces that promote well-being and a connection to nature, ensuring a soothing and visually harmonious digital experience across various platforms.

Best used for

  • Wellness and mindfulness brands
  • Eco-friendly product packaging
  • Spa and retreat environment design
  • Natural photography backdrops
  • Minimalist website design
  • Outdoor adventure and conservation groups

Suggested color roles

primary

Use #5A7C5E as a calm, earthy main color, perfect for conveying stability and natural elegance.

secondary

Apply #8BA48D for softer, supporting elements, creating a gentle visual flow.

accent

Employ #3D553F as a deep, grounding contrast, ideal for important headings or subtle highlights.

background

Utilize #DFEBE1 for an airy, near-white base that brightens the design and enhances readability.

text

Pair #3D553F or a deep charcoal with #DFEBE1 for crisp, highly readable body text and headings.

Accessibility notes

  • Ensure #3D553F text on #DFEBE1 provides strong contrast for excellent readability.
  • Check that #5A7C5E text on #B6C8B8 meets WCAG contrast guidelines for legibility.
  • Lighter greens like #8BA48D may require larger font sizes when used for text on #DFEBE1.
  • Avoid using light-colored text on any of the mid-tone greens to prevent readability issues.

Recommended combinations

Morning Haze

Creates a light, ethereal blend, ideal for backgrounds, soft gradients, or atmospheric visual elements.

#DFEBE1 · #B6C8B8 · #8BA48D

Deep Sage

Perfect for establishing grounded, natural depth in a design, suitable for footers or content blocks.

#3D553F · #5A7C5E · #8BA48D

Fresh Contrast

Offers a clean and crisp visual hierarchy, excellent for defining sections and ensuring clear communication.

#DFEBE1 · #5A7C5E · #3D553F

CSS variables

:root {
  --sage-brush-morning-1: #5A7C5E;
  --sage-brush-morning-2: #8BA48D;
  --sage-brush-morning-3: #B6C8B8;
  --sage-brush-morning-4: #DFEBE1;
  --sage-brush-morning-5: #3D553F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sage-brush-morning": {
        1: "#5A7C5E",
        2: "#8BA48D",
        3: "#B6C8B8",
        4: "#DFEBE1",
        5: "#3D553F",
      }
    }
  }
}

Related searches

sage green palettetranquil nature colorsmuted green schemeserene morning hueseco-friendly design palette

Palette colors

Hex values

Color 1#5A7C5E
·
Color 2#8BA48D
·
Color 3#B6C8B8
·
Color 4#DFEBE1
·
Color 5#3D553F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.7:1Fail
3.8:1AA18
1.7:1Fail
2
1.7:1Fail
1.5:1Fail
2.2:1Fail
3:1AA18
3
2.7:1Fail
1.5:1Fail
1.4:1Fail
4.6:1AA
4
3.8:1AA18
2.2:1Fail
1.4:1Fail
6.7:1AA
5
1.7:1Fail
3:1AA18
4.6:1AA
6.7:1AA

Similar palettes

More like Sage Brush Morning

View all earth
Forest Floor Echo
Sage Meadows
Antique Sage Study
Bamboo Serene Path
Botanical Sketch Green
Botanical Sketchbook