Sage green is the rare color that behaves like a neutral while still feeling alive. It calms a bedroom, grounds a website, softens a logo, and pairs with almost anything if you pick the right shade. This guide gives you the practical sage green color palette you actually need to design with — exact HEX codes for every common variant, the six combinations that consistently work, four ready-made palettes, and concrete advice for interiors, branding, and CSS.
What Is Sage Green?
Sage green is a muted, gray-tinted green named after the leaves of the culinary sage plant (Salvia officinalis). Its defining trait is low saturation: the green is dialed back with a generous amount of gray, which is what gives sage its soft, dusty, almost herbal quality. Unlike emerald or lime, sage never shouts. It sits quietly in a room and lets the rest of the palette breathe.
The color rose to prominence in early-2020s interiors as a calmer alternative to the all-white minimalism that had dominated the previous decade. Designers wanted warmth without the energy of yellow ochre or terracotta, and sage delivered: organic, grounded, just saturated enough to feel intentional. By 2024 it had moved beyond walls into branding (especially wellness, beauty, and sustainable consumer brands), web design, fashion, and product packaging.
Why is sage green still so popular years later? Three reasons. First, it reads as biophilic — your eye associates it with leaves and stems, which lowers visual stress. Second, it sits perfectly between warm and cool, so it pairs with almost any temperature direction the rest of your palette takes. Third, it ages well: unlike trendier greens (mint, neon, hunter), sage has shown up in interiors for over a century without looking dated. If you want to verify how a specific sage shade mixes with other tones before committing, you can preview combinations live in our color mixer.
Sage Green HEX Codes
"Sage green" is not one color. It is a family of muted greens that share the same desaturated character. Below is a working reference of the most useful variants, with HEX, RGB, and a short note on when each one earns its keep. Click through any swatch to see full conversion data on the dedicated color page.
| Name | HEX | RGB | Best for |
|---|---|---|---|
| Classic Sage | #87A96B | rgb(135, 169, 107) | The reference shade. Slightly warm, herbaceous, photographs well. |
| Light Sage | #C7D2B6 | rgb(199, 210, 182) | Walls, backgrounds, soft fabric. The lightest variant that still reads as green. |
| Dusty Sage | #9CAF88 | rgb(156, 175, 136) | The Instagram favorite. Dustier and cooler than classic sage. |
| Dark Sage | #4F664A | rgb(79, 102, 74) | Cabinetry, accent walls, navy alternatives. Reads almost forest at scale. |
| Sage Gray | #B2AC88 | rgb(178, 172, 136) | The most neutral variant — barely a green. Excellent base for warm palettes. |
| Warm Sage | #A3B18A | rgb(163, 177, 138) | Yellow-leaning sage. Great with terracotta, cream, and natural wood. |
| Cool Sage (Eucalyptus) | #8FA98E | rgb(143, 169, 142) | Blue-leaning sage. Pairs with navy, charcoal, and crisp white. |
If you want to convert any of these to HSL, OKLCH, or CMYK for print, drop the HEX into the color converter and you will get every format at once. A general rule for spotting "true" sage on the color wheel: the hue sits between 80° and 130° in HSL, with saturation under 30% and lightness between 35% and 80%. Anything more saturated tips toward olive or moss; anything cooler tips toward eucalyptus.
Colors That Go With Sage Green
Sage green is famously easy to pair, but "easy" does not mean "anything works." The combinations below are the ones that consistently look intentional rather than accidental. Each one includes the HEX code you should actually use — not a vague "white" or "pink," but a specific shade that has been tested against classic sage #87A96B.
1. Sage Green + Crisp White (#FFFFFF or #F8F6F1)
The cleanest pairing. Pure white (#FFFFFF) gives a modern, almost Scandinavian feel; an off-white like #F8F6F1 softens the contrast and leans farmhouse. White lets sage do all the talking and is the safest starting point if you are nervous about a green-heavy palette. See more on this combo at the green and white combinations page.
2. Sage Green + Warm Cream (#F5EFE0)
Cream warms sage up and grounds it. This is the pairing that makes a wall feel like linen rather than paint. It works particularly well with warm sage (#A3B18A) and almost always involves natural materials — oak, rattan, unbleached cotton. Explore the wider palette at the green and beige combinations page.
3. Sage Green + Terracotta (#C97B5C)
The combination that defined 2022–2026 interiors. Terracotta is sage's complementary partner on the warm side: both are muted, both have a clay-earth quality, and together they read as Mediterranean or southwestern without being literal. Use sage as the dominant tone and terracotta as 15–20% of the visual weight.
4. Sage Green + Navy Blue (#1B2A47)
For when sage needs to feel grown-up. Navy gives sage authority — think library, study, men's wellness branding. Use dark sage (#4F664A) with navy for a low-contrast moody palette, or light sage #C7D2B6 with navy for a preppy, classic effect.
5. Sage Green + Blush Pink (#E8C5B5)
Soft, romantic, and a perennial favorite for weddings and beauty brands. Blush is just chromatically far enough from sage to create contrast, but both colors are equally desaturated so they feel like part of the same family. Add brass or champagne metallic for warmth.
6. Sage Green + Antique Gold (#C9A96A)
Gold turns sage from quiet to luxurious. Use gold sparingly — frames, hardware, type accents at no more than 10% — and pair with mid-sage #9CAF88. This combination is everywhere in skincare and natural wine branding because it signals "premium organic" without trying too hard.
Sage Green Color Palettes
The combinations above pair sage with one color. Real palettes use four to six colors at once, balanced across temperature and value. Below are four ready-to-use palettes — drop the HEX codes into our palette generator to tweak ratios and export to your design tool.
Palette 1 — Natural & Earthy
Inspired by terracotta pots on a sunlit windowsill. Warm, grounded, deeply biophilic. Works for kitchens, restaurants, and any brand selling something honest.
- Warm Sage
#A3B18A— primary, 40% - Cream
#F5EFE0— background, 25% - Terracotta
#C97B5C— accent, 15% - Walnut Brown
#5C4836— anchor, 15% - Soft Black
#1F1F1F— type, 5%
Palette 2 — Modern Minimal
The palette that built a thousand wellness DTC brands. Quiet, expensive-looking, photographs cleanly under any light.
- Light Sage
#C7D2B6— primary, 50% - Off-White
#FAFAF7— background, 30% - Charcoal
#2E2E2E— type, 10% - Brushed Brass
#B5985A— accent, 10%
Palette 3 — Romantic Garden
For bedrooms, beauty brands, weddings, and stationery. Softer than the minimal palette, with a feminine lean.
- Dusty Sage
#9CAF88— primary, 35% - Blush Pink
#E8C5B5— secondary, 25% - Ivory
#F8F4EC— background, 25% - Antique Gold
#C9A96A— accent, 10% - Mauve
#9E7B7B— depth, 5%
Palette 4 — Bold Contrast
For when sage needs to compete, not just decorate. High-contrast, editorial, suitable for tech-meets-nature brands and modern home offices.
- Dark Sage
#4F664A— primary, 35% - Crisp White
#FFFFFF— background, 30% - Navy
#1B2A47— anchor, 20% - Mustard
#D4A437— pop, 10% - Soft Black
#141414— type, 5%
Sage Green in Interior Design
Sage is one of the few colors that survives the trip from Pinterest to real walls without losing its appeal. But it shifts dramatically depending on where you put it, and three placement decisions decide whether your room reads as fresh or institutional.
Sage on the Walls
A full-room sage paint job works best in spaces with strong natural light. North-facing rooms can make sage look greenish-gray and a little flat, while east- and south-facing rooms make it glow. If the room is dark, go lighter — #C7D2B6 rather than #87A96B — or use sage on the trim and ceiling only. Matte and eggshell finishes flatter sage; high gloss makes it look plastic.
Sage as an Accent Wall
The lowest-commitment way to use sage. Pick a feature wall — typically behind the bed, the sofa, or in a dining alcove — and paint it a mid-to-dark sage like #87A96B or #4F664A. Surround with off-white walls and natural wood. The effect is grounding without dominating. For more ideas on where sage lands among the year's color stories, see the bedroom color ideas roundup.
Sage on Furniture and Cabinetry
Sage kitchen cabinets are now a design cliché in the best sense — they have transcended trend and become a classic. Use dark sage #4F664A on lower cabinets, white above, brass or matte black hardware. In living rooms, a single sage velvet sofa or armchair can carry an otherwise neutral palette. Sage upholstery hides dust and looks expensive past the five-year mark, which is rare for any saturated color. Pair it with the warm-cool guidance in our color temperature for interiors guide.
Sage in Soft Furnishings
If the budget for repainting is gone, soft furnishings are how you get sage into a room: linen curtains in #C7D2B6, a wool throw in #9CAF88, ceramic vases in sage gray #B2AC88. Layering three sage values across textiles creates depth that single-shade decor never matches.
Sage Green in Web Design & Branding
Sage green is having a moment online for the same reason it took over interiors: it reads as calm, trustworthy, and quietly premium. But the tones that work on a wall do not automatically work on a screen, and three rules will save you most of the common mistakes.
Choosing the Right Tone for Screens
Walls reflect light; screens emit it. The same HEX code can look serene on linen and washed-out on a phone. For digital, push slightly darker and slightly cooler than you would for a wall:
- Backgrounds and large surfaces:
#EFF1E7or#DDE3D0— light enough that black text passes contrast easily. - Brand primary:
#7A9663or#6B8E5A— slightly darker than wall sage, so it survives the screen's brightness. - CTAs and buttons:
#4F664Aor#3E5640— dark enough for white text to pass APCA|Lc| ≥ 75.
Accessibility Comes First
The single most common sage-on-web mistake is using a mid-sage like #87A96B as a CTA color with white text — it fails WCAG AA for body text. Always run your button color through the contrast checker before shipping. As a quick rule: if your sage is lighter than #7A9663, do not use white text on it; flip to dark text instead.
Typography on Sage
Sage backgrounds love serifs. The slight warmth in classic serif faces (Caslon, Garamond, Lyon) reads beautifully against dusty greens. For sans-serif, geometric humanists like Inter, Söhne, or Untitled Sans work — avoid anything too clinical (Helvetica Neue) on sage; the contrast feels off. For body type on a sage-tinted background, use a near-black like #1F2A1B rather than pure black: it sits more naturally inside the green family.
For more guidance on building palettes that work across digital surfaces, see best color combinations for websites.
Sage Green Aesthetic
The "sage green aesthetic" is its own genre on TikTok, Pinterest, and Instagram — millions of saved boards organized around the same visual signature: muted greens, natural light, linen, ceramic, slow living. Understanding why it resonates helps you use sage intentionally rather than as a cliché.
The aesthetic borrows from three older traditions: cottagecore (rural nostalgia, handmade textures), Scandinavian minimalism (light wood, restraint, function), and biophilic design (bringing plant life and natural materials indoors). Sage green sits at the intersection of all three: organic enough to feel cottagey, restrained enough to feel Scandinavian, and biological enough to feel biophilic.
The audience skews 25–40, predominantly female, design-aware, and willing to spend on quality basics rather than trend cycles. If your product or space is targeting that audience, leaning into a sage palette is one of the highest-signal moves you can make. If you are not targeting that audience — say you are building a fintech for high-frequency traders — sage will feel wildly off-brand. Color choice is always audience choice.
How to Use Sage Green
A few practical rules from designers who use sage daily:
- Follow the 60-30-10 rule. 60% dominant neutral (cream, white, or oat), 30% sage in one variant, 10% accent (terracotta, navy, brass, or blush). Reverse only when you want sage to be the headline — and even then, keep the accent under 15%.
- Choose one sage and stick with it. Layering five different sage shades in a room or interface looks accidental. Pick one anchor sage and use lighter and darker tints of that exact hue rather than introducing new sage chromaticities. The palette generator can build a clean tonal scale for you in one click.
- Mind the undertone. Warm sage (
#A3B18A) and cool sage (#8FA98E) do not play well together in the same composition. Decide the temperature first, then pick the variant. - Balance the saturation budget. Sage is muted, so the rest of your palette should be too. A bright fuchsia next to sage breaks the spell instantly — terracotta, dusty navy, blush, and antique gold all share sage's low-saturation character, and that is why they pair so well.
- Test in the target context. Paint samples on the actual wall and look at them at three times of day. For digital, view the design on a phone at minimum brightness — sage often looks too pale at low brightness, which is when half your users will see it.
Sage Green CSS Snippets
Drop-in CSS for the most common sage uses. Each snippet has been tested for contrast on common backgrounds.
Sage Brand Tokens
:root {
--sage-50: #EFF1E7;
--sage-100: #DDE3D0;
--sage-200: #C7D2B6;
--sage-300: #B0BF99;
--sage-400: #9CAF88;
--sage-500: #87A96B; /* primary */
--sage-600: #6F8F55;
--sage-700: #5A7445;
--sage-800: #4F664A;
--sage-900: #2F4030;
}Sage Card on Cream Background
.sage-card {
background-color: #F5EFE0;
border: 1px solid #C7D2B6;
color: #2F4030;
padding: 1.5rem;
border-radius: 12px;
box-shadow: 0 1px 2px rgba(47, 64, 48, 0.06);
}Sage CTA Button (passes WCAG AA + APCA)
.btn-sage {
background-color: #4F664A;
color: #FFFFFF;
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 600;
transition: background-color 0.2s ease;
}
.btn-sage:hover { background-color: #3E5640; }
.btn-sage:focus-visible {
outline: 3px solid #A3B18A;
outline-offset: 2px;
}Sage Gradient Hero Background
.hero-sage {
background: linear-gradient(
135deg,
#C7D2B6 0%,
#9CAF88 60%,
#7A9663 100%
);
color: #1F2A1B;
}Key Takeaways
- Sage green is a low-saturation, gray-tinted green that behaves like a neutral. The reference HEX is
#87A96B. - The most useful variants are Light Sage (
#C7D2B6), Dusty Sage (#9CAF88), Dark Sage (#4F664A), Sage Gray (#B2AC88), and Warm Sage (#A3B18A). - Sage pairs reliably with white, cream, terracotta, navy, blush pink, and antique gold — and these are the only six you really need.
- For interiors, follow the 60-30-10 rule, mind the undertone, and test in target lighting before committing.
- For web and branding, push sage slightly darker than wall tones, always check contrast (the contrast checker takes 10 seconds), and use white text only on sage
#7A9663or darker. - Build your palette in the palette generator and validate combinations in the color mixer before you ship anything.