Sage Green Hex Code: #B2AC88

Sage green sits in the sweet spot between decorative pastel and serious earth tone. The sage green code #B2AC88—also written as the common sage colour code in UK brand guides and sometimes labeled as a sage green color number in paint decks—reads as “dried herb and linen” on screen: enough chroma to feel alive, low enough saturation to sit behind long-form content without shouting. Whether you file it as a sage green hex colour in Figma or a US-style color token in code, the digits stay the same. That is why product teams reach for it when they want an organic association without the high-energy punch of kelly green or the coldness of blue-gray slate.

The shade ladder above is deliberate. Honeydew and mint cream give you nearly neutral highlights for cards and modals; tea green introduces a hint of vitality for success states that should not look like finance dashboards. The canonical sage hex code #B2AC88 sits mid-ramp; pair it with sage green rgb values 178, 172, 136 in design-system docs so engineers and print vendors stay aligned. Dark sage through hunter green supplies the anchors you need for navigation, footers, and illustration silhouettes—see the dedicated dark and light sage sections above for copy-ready swatches. If your brand guide only lists one sage hex, you are one redesign away from rogue tints—promote at least three roles (surface, border, emphasis) to tokens before engineering hard-codes new guesses.

When stakeholders ask “what is the sage green color number?” point them to #B2AC88 first, then to the dark trio (#6B6B47, #5C5C3D, #4A4A2E) for type and chrome. Social teams running Canva templates should use the same sage green hex code in custom colors—not a visually similar stock green—so paid ads and landing pages stay on-brand. Document hex, RGB, and HSL in one table (like the quick-answer box at the top) and your handoffs stop drifting between disciplines.

Sage Green in UI & Web Design

Wellness and mindfulness products. Meditation apps, sleep trackers, and supplement brands use sage as a canvas because it lowers visual noise next to breathing animations and soft photography. Pair sage backgrounds with cream cards and charcoal body copy; reserve terracotta for primary actions so users can still spot the main path. Before launch, run sage-on-cream and charcoal-on-sage pairs through our contrast checker—muted palettes fail WCAG most often on secondary buttons and disabled states, not on hero headlines.

Organic food and beverage. Farm-to-table grocers and plant-based CPG sites lean on sage to echo packaging without cloning every competitor’s kraft brown. Use asparagus and fern rows from the table for ingredient callouts and progress bars; keep photography color grading consistent so UI greens do not clash with real lettuce in shots. dusty rose hex code works well for loyalty badges and “new harvest” ribbons because it reads as human warmth rather than discount red.

Lifestyle editorial and fashion. Lookbooks that mix sage section backgrounds with charcoal typography mimic print editorial rhythm online. Lifestyle brands often alternate sage bands with full-bleed imagery; ensure text overlays use a scrim or switch to white type only when luminance math supports it. For dark mode, avoid painting entire screens in deep hunter— instead use charcoal as the base and sage as accent chips so OLED black depth is preserved.

Interaction design detail: sage makes an excellent default for “calm” empty states and success banners because it does not carry the alarm of yellow or the sterility of pure gray. When you need hierarchy beyond color, combine sage fills with weight and spacing; when you need more energy, import a single warm accent from the pairing section rather than saturating the whole ramp. To extend #B2AC88 into hover and focus rings programmatically, seed it in our free color palette generator and export a tight monochromatic scale your engineers can trust.

Sage Green in Interior & Brand Design

Interior palettes treat sage as a wall color that flatters both warm oak floors and cool concrete—on the web, mimic that flexibility by pairing sage with cream fields and charcoal line art. Boutique hotels and spas translate the same story into brand books: sage as the signature wash, terracotta in ceramics photography, brass or black metal as metallic neutrals offline. Your digital style guide should map those physical materials to hex so social templates match lobby signage.

Brand designers often specify sage for wordmarks that must feel approachable yet grown-up—think skincare founded by dermatologists rather than neon Gen-Z cosmetics. Logos on white need a slightly darker companion (#8A8462 or charcoal) for small-size legibility; logos on sage fields should invert to cream or white with tested stroke weights. Packaging mockups that look perfect under studio lights may shift yellow under supermarket fluorescents; capture both contexts when you approve final hex.

For multi-channel rollouts, document how sage behaves on uncoated stock versus glossy screens. Print inks gain dot gain; digital loses subtlety on low-end displays. A pragmatic approach is to keep #B2AC88 as the canonical digital sage while assigning a separate print-only swatch in vendor specs. Teams that skip that split inevitably “eyeball” compensation in each export and drift away from a coherent brand color story.

Systems, tokens, and handoff

Name tokens after roles, not vibes: surface.sage, text.ink, accent.terracotta. Designers stop debating “is this the right sage?” when developers can grep a single source of truth. Pair every semantic color with minimum contrast partners in the same JSON so Storybook and Figma stay aligned.

Finally, remember sage is a trend-sensitive hue: it can feel dated if combined with faux distress textures and every icon in a leaf motif. Keep layouts modern—generous whitespace, crisp photography, restrained iconography—and let the color whisper organic values instead of shouting them. When in doubt, subtract one decorative green layer and add typographic clarity; users will still read “calm nature” from a disciplined palette.

FAQ

What is the sage green hex code?

#B2AC88 is a common digital sage—RGB(178, 172, 136), HSL(51, 18%, 62%). Adjust darker or lighter using the shade table for roles like text or backgrounds.

What colors go well with sage green?

Terracotta, cream, dusty rose, and charcoal are versatile partners; see the pairing cards above for hex values and usage notes.

Is sage green good for website backgrounds?

Yes for calm, wellness, and lifestyle experiences—pair with high-contrast text colors and validate all interactive states for accessibility.

What is the difference between sage green and olive green?

Sage is a soft gray-green; olive typically reads more yellow-green and saturated. Define both in your system if you use them in different product lines.

What is the sage green hex code for Canva?

Open Custom colors and enter #B2AC88. Add #A8A878 and #C8C4A0 as accent and background swatches; save to your brand kit when available.

What is the sage green RGB code?

RGB(178,172,136) for #B2AC88—the same as rgb(178, 172, 136) in CSS. Use the copy buttons in the Sage Green RGB Code section above.

What is a dark sage green hex code?

Try #6B6B47, #5C5C3D, or #4A4A2E for navigation, buttons, and small type on light backgrounds. Each has a one-click copy swatch in the dark sage section.

Compare with forest green hex codes for brighter botanical UI, yellow green hex code for chartreuse accents, or navy blue hex reference when you need a cooler structural accent alongside sage panels. For dusty pink-purple pairings, see our mauve color palette. Validate every final pair with the contrast checker before release.