Design·June 24, 2026·13 min read

What Colors Go With Sage Green? 20 Palettes (Hex Codes)

Q: What is the hex code for sage green?

The most widely used sage green hex code is #9CAF88, which is rgb(156, 175, 136) or hsl(89, 20%, 61%). Sage is a family rather than a single value, so you'll also see lighter sages like #C7D2B8 and deeper ones like #6B7D5A.

Q: What accent color pops against sage green?

Terracotta (#E2725B), rust (#B7410E) and mustard (#FFDB58) give the most striking pop because they contrast sage's yellow-green on the color wheel. For a cleaner accent, gold (#D4AF37) or coral also stand out.

What colors go with sage green? 20 designer-approved palettes with hex codes, live swatches and tips for web, branding and interiors.

Hasan Afzal

color palettessage greencolor combinationsdesign

On this page▾

Sage green has quietly become one of the most-used colors in modern design — calm, organic, and endlessly flexible. The reason it works so well is also what makes it tricky: it plays nicely with almost everything, so choosing the right partner is harder than it looks. This guide gives you 20 designer-approved palettes of colors that go with sage green, every one with copyable hex codes, contrast notes, and clear guidance for both web/UI and interiors.

What is sage green?

Sage green is a soft, dusty gray-green named after the herb. The most widely used sage green hex code is #9CAF88 — that's rgb(156, 175, 136) or hsl(89, 20%, 61%). You can see it in full on the sage green color page.

Three numbers explain why it behaves the way it does:

Hue ~89° puts it in yellow-green territory, just on the warm side of pure green.
Saturation ~20% is low — that grayed-down quality is what makes sage read as a neutral rather than a statement color.
Lightness ~61% keeps it light-to-mid, so it works as a backdrop, not just an accent.

Warm vs cool sage

Sage is a family, not a single swatch, and small shifts change its temperament:

Variant	Hex	Character
Pale sage	`#C7D2B8`	Airy, almost mint — great for backgrounds
Classic sage	`#9CAF88`	The benchmark, balanced and versatile
Mid sage	`#6B7D5A`	Deeper, more grounded, reads as the "color"
Olive sage	`#8A9A5B`	Warmer and earthier, leans olive
Deep sage	`#3D4A33`	Near-neutral dark, works as text or anchor

Because its saturation is so low, sage sits right on the warm-cool fence. Pair it with creams and terracotta and it warms up; pair it with charcoal and powder blue and it cools down. That chameleon quality — plus its associations with calm, nature, and wellness — is why it has been a 2026 staple across branding, packaging, and interiors. If you're curious why a muted green feels so restful, the color psychology guide digs into the science.

How to find colors that go with sage green

You can reason out a sage palette in about 60 seconds with basic color-wheel logic. Sage is a desaturated yellow-green at roughly 89°, so:

Neutrals (always safe): whites, creams, beige, taupe, and grays have no hue conflict, so they let sage breathe. Start here for 80% of projects.
Analogous (harmonious): colors near sage on the wheel — moss, olive, soft teal — create calm, tonal schemes with low contrast.
Earth-tone contrast (split-complement): warm clay tones like terracotta, rust, and mustard sit across the wheel from sage's green and create that classic "foliage + soil" balance. These are your highest-impact accents.
True complement (unexpected but elegant): sage's optical opposite lands around 269° — a muted blue-violet. That's why dusty lilac, mauve, and powder blue look so quietly sophisticated next to sage.
Anchors (for depth): very dark navy, charcoal, and black ground the whole scheme.

Want to skip the math? Drop #9CAF88 into the Complementary Color Finder to see its exact opposites, then build a full scheme in the Color Palette Generator. If you found your sage in a photo or fabric swatch, the Image Color Extractor will pull the precise hex straight from the picture. For the theory behind analogous, complementary, and triadic schemes, see color schemes explained.

Sage green + crisp white & cream

This is the no-fail starting point. White sharpens sage and makes it feel fresh and contemporary; cream softens it into something warmer and more vintage.

Sage & crisp white — clean, Scandinavian, perfect for minimal UIs and bright kitchens.

Role	Hex
Base	`#9CAF88`
Background	`#FFFFFF`
Soft wash	`#EDF1E6`
Text/anchor	`#3D4A33`

Sage & cream — swap stark white for cream #FFFDD0 or warm ivory #FAF3E0 and the mood turns cozy and organic. See the cream page for the exact tone.

Role	Hex
Base	`#9CAF88`
Background	`#FFFDD0`
Warm ivory	`#FAF3E0`
Accent	`#6B7D5A`

One caution for the web: sage on white has very little contrast (more on that below), so use white as the background and a darker sage or ink for text — not sage text on white.

Sage green + warm neutrals: beige, taupe, terracotta

Warm neutrals are sage's most natural companions because they share that earthy, low-saturation DNA. This is the heart of the "quiet luxury" and Japandi looks.

Sage & beige. Beige #F5F5DC is the easiest upgrade from plain white — it keeps things light but adds warmth.

Role	Hex
Base	`#9CAF88`
Beige	`#F5F5DC`
Greige	`#B8A589`
Deep anchor	`#483C32`

Sage, taupe & greige. Taupe spans a wide range, from light greige #B8A589 to a deep mushroom #483C32. Layering two taupes with sage gives a rich, tonal, grown-up palette.

Sage & terracotta. Add terracotta #E2725B and the scheme comes alive — green foliage against clay. This is arguably the signature sage pairing of the last few years.

Role	Hex
Base	`#9CAF88`
Terracotta	`#E2725B`
Warm ivory	`#FAF3E0`
Text/anchor	`#3D4A33`

Sage green + earthy accents: mustard, rust, clay

When you want sage to feel bold and 70s-revival rather than serene, reach for saturated earth tones. These give the most "pop" of any sage pairing because they contrast its green directly.

Palette	Accent	Hex	Mood
Sage & mustard	Mustard	`#FFDB58`	Cheerful, retro, high-energy
Sage & rust	Rust	`#B7410E`	Rich, autumnal, grounded
Sage & clay	Clay	`#C97B5A`	Soft, sun-baked, friendly

A reliable formula: keep sage and a neutral (ivory #FAF3E0 or pale sage #EDF1E6) as 80–90% of the surface, then use the earth tone as a 10–20% accent — a button, a cushion, a headline. Used sparingly, #FFDB58 mustard reads as deliberate and confident; used everywhere it gets loud fast.

Sage green + moody depth: navy, charcoal, black

Sage's softness needs an anchor to feel intentional rather than washed-out. Dark blues, grays, and black supply that backbone.

Sage & navy. Navy — whether true navy #000080 or a softer #1B263B — is dressy and timeless next to sage. Great for editorial layouts and considered brand systems.

Sage & charcoal. Charcoal #36454F is the modern pick. It's the cleanest answer to "does sage go with gray?" — yes, emphatically. Charcoal grounds sage without the formality of black.

Role	Hex
Base	`#9CAF88`
Charcoal	`#36454F`
Soft wash	`#EDF1E6`
Highlight	`#FFFFFF`

Sage & black. Pure #000000 with sage is the most graphic option — high drama, gallery-like. Soften the contrast with a pale sage #C7D2B8 and plenty of white space so it doesn't feel severe.

Sage green + soft pastels: blush, dusty lilac, powder blue

For nurseries, weddings, beauty brands, and anything that should feel gentle, pair sage with a single low-saturation pastel. Because these are all muted, they harmonize instead of competing.

Palette	Pastel	Hex	Notes
Sage & blush	Blush	`#E8B4B8`	Romantic, warm, a perennial wedding combo
Sage & dusty lilac	Dusty lilac	`#C8A2C8`	Sage's near-complement — quietly elegant
Sage & powder blue	Powder blue	`#B0C4DE`	Cool, airy, spa-like

Dusty lilac is the design-school surprise here: as sage's optical complement it creates real contrast, yet because both are grayed down the effect is soft, not jarring.

Sage green + metallics: gold, brass, copper

Metallics turn a sage palette from calm to luxe. They behave like warm accents, so the same 80/20 rule applies — a little goes a long way.

Metal	Hex	Pairs best with
Gold	`#D4AF37`	Sage + ivory for a soft, expensive look
Brass	`#B5A642`	Sage + charcoal for a vintage-industrial feel
Copper	`#B87333`	Sage + cream for warmth and craft appeal

In interiors these show up as hardware, frames, and lighting; on the web, simulate them with subtle gradients rather than flat fills. The CSS gradient generator can fake a brushed-gold sheen from #D4AF37 to a lighter #E8D48A.

Using sage green on the web & in UI

Sage is gorgeous in a browser, but its low contrast trips up a lot of designers. Here are the numbers that actually matter, measured as WCAG contrast ratios — verify any pairing of your own in the Contrast Checker.

Foreground	Background	Ratio	Verdict
`#9CAF88` sage	`#FFFFFF` white	2.36:1	Fails — never use as text
`#FFFFFF` white	`#9CAF88` sage	2.36:1	Fails for body text
`#36454F` charcoal	`#9CAF88` sage	4.20:1	AA large text only
`#1B263B` navy	`#9CAF88` sage	6.42:1	Passes AA normal text
`#3D4A33` deep sage	`#EDF1E6` pale sage	8.23:1	Excellent body text combo
`#FFFFFF` white	`#3D4A33` deep sage	9.44:1	Excellent CTA button

The practical rules that fall out of this:

Don't put text on a plain sage tile and expect it to be readable. Sage #9CAF88 is too light. Either darken the sage to #3D4A33 and use white text (9.44:1), or keep sage as a background block with a dark navy/charcoal label.
For body copy, use deep sage #3D4A33 on a pale sage or ivory background — comfortable and on-brand at 8.23:1.
For CTAs, a deepened sage button with white text is your most reliable accessible primary action. Reserve terracotta #E2725B or mustard #FFDB58 for the secondary "pop" button.
Dark mode: flip the system. Use a near-black green #0F2A1D or charcoal #36454F as the surface, then bring sage up as the accent/brand color where its mid lightness finally has enough contrast to shine.

Test any sage shade live by pasting it into the Color Preview tool before you commit it to code. For a full walkthrough of building a scheme around a single brand hue, see how to choose a website color scheme.

/* Accessible sage UI tokens */
:root {
  --sage:        #9CAF88; /* brand / accents only */
  --sage-deep:   #3D4A33; /* text, dark buttons */
  --sage-wash:   #EDF1E6; /* page background */
  --ink:         #1B263B; /* body text on light */
  --pop:         #E2725B; /* secondary CTA */
}

20 ready-made sage green palettes

Every palette below is built on #9CAF88 and ready to copy. The first hex is the dominant base; the last is usually the darkest anchor or accent.

#	Palette	Hex set	Best for
1	Sage & crisp white	`#9CAF88` `#FFFFFF` `#EDF1E6` `#3D4A33`	Minimal UI, bright kitchens
2	Sage & cream	`#9CAF88` `#FFFDD0` `#FAF3E0` `#6B7D5A`	Cozy, vintage branding
3	Sage & beige	`#9CAF88` `#F5F5DC` `#B8A589` `#483C32`	Japandi interiors
4	Sage, taupe & greige	`#9CAF88` `#B8A589` `#C9ADA7` `#483C32`	Quiet-luxury living rooms
5	Sage & terracotta	`#9CAF88` `#E2725B` `#FAF3E0` `#3D4A33`	Warm, organic brands
6	Sage & mustard	`#9CAF88` `#FFDB58` `#FAF3E0` `#3D4A33`	Retro, playful
7	Sage & rust	`#9CAF88` `#B7410E` `#D9B99B` `#2F2F2F`	Autumnal, rich
8	Sage & clay	`#9CAF88` `#C97B5A` `#EDF1E6` `#6B7D5A`	Soft, sun-baked
9	Sage & navy	`#9CAF88` `#1B263B` `#FAF3E0` `#C7D2B8`	Editorial, dressy
10	Sage & charcoal	`#9CAF88` `#36454F` `#EDF1E6` `#FFFFFF`	Modern web/UI
11	Sage & black	`#9CAF88` `#000000` `#C7D2B8` `#FFFFFF`	Graphic, high-drama
12	Sage & blush	`#9CAF88` `#E8B4B8` `#FAF3E0` `#6B7D5A`	Weddings, beauty
13	Sage & dusty lilac	`#9CAF88` `#C8A2C8` `#EDF1E6` `#483C32`	Soft, elegant
14	Sage & powder blue	`#9CAF88` `#B0C4DE` `#FFFFFF` `#36454F`	Spa, wellness
15	Sage & gold	`#9CAF88` `#D4AF37` `#FAF3E0` `#3D4A33`	Luxe packaging
16	Sage & brass	`#9CAF88` `#B5A642` `#EDF1E6` `#2F2F2F`	Vintage-industrial
17	Sage & copper	`#9CAF88` `#B87333` `#FFFDD0` `#3D4A33`	Craft, warmth
18	Modern sage UI	`#EDF1E6` `#9CAF88` `#6B7D5A` `#3D4A33` `#E2725B`	SaaS / web apps
19	Sage spa tonal	`#0F2A1D` `#3D4A33` `#6B7D5A` `#9CAF88` `#C7D2B8`	Dark mode, gradients
20	Sage, sand & charcoal	`#9CAF88` `#D9B99B` `#36454F` `#FAF3E0`	Earthy-modern brands

Three of the most popular, ready as CSS variables:

/* 5 — Sage & terracotta */
:root {
  --base:   #9CAF88;
  --accent: #E2725B;
  --light:  #FAF3E0;
  --dark:   #3D4A33;
}

/* 10 — Sage & charcoal */
:root {
  --base:   #9CAF88;
  --anchor: #36454F;
  --wash:   #EDF1E6;
  --hi:     #FFFFFF;
}

/* 19 — Sage spa tonal (great for dark mode) */
:root {
  --surface: #0F2A1D;
  --700:     #3D4A33;
  --500:     #6B7D5A;
  --300:     #9CAF88;
  --100:     #C7D2B8;
}

To remix any of these, paste the base into the Color Palette Generator and lock the hues you like while it shuffles the rest.

Frequently asked questions

What colors go best with sage green?

Sage green's strongest partners are crisp white and cream, warm neutrals like beige and taupe, earthy accents such as terracotta, rust and mustard, and deep anchors like navy, charcoal and black. For a softer scheme, pair it with blush, dusty lilac or powder blue.

Is sage green warm or cool?

Sage green is a muted gray-green that sits right on the warm-cool line. The classic #9CAF88 leans slightly warm because of its yellow-green hue (around 89 degrees) and low saturation, which is why it reads as calm and neutral rather than vivid.

What is the hex code for sage green?

The most widely used sage green hex code is #9CAF88, which is rgb(156, 175, 136) or hsl(89, 20%, 61%). Sage is a family rather than a single value, so you'll also see lighter sages like #C7D2B8 and deeper ones like #6B7D5A.

Does sage green go with gray?

Yes. Sage green pairs beautifully with gray, especially deep charcoal (#36454F), which gives the soft green a grounded, modern anchor. Cool light grays work too; just keep one color dominant so the scheme does not feel flat.

What accent color pops against sage green?

Terracotta (#E2725B), rust (#B7410E) and mustard (#FFDB58) give the most striking pop because they contrast sage's yellow-green on the color wheel. For a cleaner accent, gold (#D4AF37) or coral also stand out.