Sage Green Color Palette: 7 Calming Schemes with Hex Codes

Soft, muted, and effortlessly calming, the sage green color palette has become one of the most popular colour stories in modern design. It is the shade of eucalyptus leaves and dried herbs — a grey-tinged green that feels natural, grounded, and quietly sophisticated. From wedding stationery and skincare branding to website backgrounds and living-room walls, sage green works almost everywhere.

Below you will find ready-to-use sage green palettes with hex codes, the reasons this colour resonates, and copy-paste CSS. Want to explore live variations? Browse the PaletteCSS library or see our aesthetic color palettes for more muted, earthy combinations.

Why sage green works so well

Sage green sits between green and grey, which is the secret to its versatility. The grey undertone mutes the green's intensity, making it read as a sophisticated neutral rather than a bold statement. Psychologically, green is associated with nature, balance, and renewal, while the softness of sage adds calm. That combination is why it feels at home in wellness, organic, and lifestyle brands.

Because it is so muted, sage green pairs beautifully with:

• Warm neutrals — cream, beige, and tan for an organic, earthy feel.
• Soft whites — for a fresh, airy, minimalist look.
• Terracotta and rust — warm accents that complement sage's cool undertone.
• Charcoal or near-black — for grounded, high-contrast text.

For more on pairing greens, see what colours go with green.

7 sage green color palettes (with hex codes)

1. Eucalyptus Calm

A gentle gradient of sage from pale to deep.

#DCE3D5 · #B7C4A8 · #9CAF88 · #7D8C6A · #5A6650

2. Sage & Cream

Warm, organic, and perfect for skincare or wellness brands.

#FAF7F0 · #E8E2D0 · #C9D1B8 · #9CAF88 · #6B7A5A

3. Sage & Terracotta

Cool sage warmed up with earthy clay tones.

#C8D5B9 · #9CAF88 · #E9D8C2 · #D98E73 · #A8553A

4. Forest Sage

Deeper and moodier for a grounded, natural feel.

#EEF2E6 · #ADB89C · #8A9A7B · #6B7A5A · #3F4A36

5. Sage & Blush

Soft sage with a romantic pink — a wedding favourite.

#C8D5B9 · #9CAF88 · #F3E0E0 · #E8B4B8 · #B07A7E

6. Dusty Sage

Extra muted and modern, great for minimalist UI.

#DDE1D4 · #C7CDBB · #B2BBA5 · #8F9A82 · #6E7860

7. Modern Sage

High contrast between fresh sage and near-black.

#E3EBE0 · #B9CDB4 · #8FA98C · #4F5D4A · #2E362B

How to use sage green in CSS

Save your sage palette as CSS variables for a consistent theme:

:root {
  --sage-50:  #EEF2E6;
  --sage-200: #C8D5B9;
  --sage-400: #9CAF88;
  --sage-600: #6B7A5A;
  --sage-800: #3F4A36;
}

Sage also makes a soft, natural background gradient:

.section {
  background: linear-gradient(160deg, #EEF2E6 0%, #C8D5B9 100%);
}

Learn how to build a complete scale like this in our guide to choosing a color palette.

Tips for designing with sage green

• Treat it as a neutral. Sage works as a calm background colour, letting brighter accents stand out.
• Add warmth. Cream, tan, or terracotta stop sage from feeling cold or clinical.
• Layer your shades. Using two or three sage tones together creates a soft, tonal, expensive-looking design.
• Check contrast for text. Mid sage on white can be hard to read — use a darker sage or charcoal for body copy.

Frequently asked questions

What is the hex code for sage green?

A widely used sage green is #9CAF88, though sage ranges from a pale #C8D5B9 to a deeper #6B7A5A. Choose the depth that fits your design.

What colors go with sage green?

Sage green pairs best with warm neutrals (cream, beige, tan), soft white, terracotta, blush pink, and charcoal. These keep its calm, natural character intact.

Is sage green warm or cool?

Sage green is technically a cool colour because of its green and grey base, but it leans neutral, which is why it mixes so easily with warm tones like beige and terracotta.

Want more like this? Browse calming color palettes, see living room color palettes, or pick your own sage shade and copy the hex on PaletteCSS.