What color is Sage Green?
HEX
#BCB88A
RGB
188, 184, 138
HSL
55°, 27%, 64%
HSV
55°, 27%, 74%
Sage green (#BCB88A) is a dusty yellow-green that behaves more like a tinted neutral than like a loud botanical green. It is calm enough for backgrounds, but distinct enough to keep a layout from feeling beige or generic.
Best for
Wellness brands, sustainability reports, and lifestyle presentations seeking a calm, contemporary feel.
Accessibility
Check contrast before using sage green for text-heavy layouts, especially on low-contrast backgrounds.
How does sage green compare to nearby colors?
What is the difference between sage green and moss?
Moss (#8A9A5B) shows more light than Sage Green (#BCB88A), which changes the color from an accent or background candidate into a different kind of working tone. Sage Green shifts the system toward paper, tint, and background behavior more than Moss does. Choose sage green for backgrounds, tints, and lighter editorial surfaces; keep moss when you need stronger emphasis or a more grounded center.
What color is sage green?
The name comes from sage leaves, though digital sage is usually warmer and flatter than the live plant. On screen it sits between olive, khaki, and muted green, which is why it often works as a bridge between organic materials and more minimal layout systems.
Also known as: Sage. Some sources cite: #B2AC88.
What is the hex code for sage green?
| Format | Value |
|---|---|
| HEX | #BCB88A |
| RGB | rgb(188, 184, 138) |
| HSL | hsl(55°, 27%, 64%) |
| HSV / HSB | hsv(55°, 27%, 74%) |
| CMYK (approx.) | cmyk(0%, 2%, 27%, 26%) |
Convert Sage Green to other color formats
Open the color converter with Sage Green (#BCB88A) prefilled to copy RGB, HSL, HSV, CMYK, or OKLCH values.
Convert Sage Green in the color converter →What does sage green mean in design?
Sage green is often associated with restraint, ease, and a quieter kind of naturalism. Compared with brighter greens it feels less promotional and less literal, which makes it useful when a palette wants to suggest calm, tactility, or grounded taste rather than obvious eco-signaling.
How do I use sage green in code?
| CSS (hex) | color: #BCB88A; |
| CSS (rgb) | color: rgb(188, 184, 138); |
| CSS (hsl) | color: hsl(55, 27%, 64%); |
| RGB % | rgb(74%, 72%, 54%) |
| Tailwind | text-[#BCB88A] |
| SwiftUI | Color(red: 0.737, green: 0.722, blue: 0.541) |
| UIKit | UIColor(red: 0.737, green: 0.722, blue: 0.541, alpha: 1.0) |
| Android | Color.rgb(188, 184, 138) |
| Compose | Color(0xFFBCB88A) |
| Web Safe | #CCCC99 |
Is sage green accessible?
| Combination | Ratio | AA | AA lg | AAA | AAA lg | UI |
|---|---|---|---|---|---|---|
| AaWhite text on this color | 2.03:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| AaBlack text on this color | 10.36:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| AaThis color as text on white | 2.03:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| AaThis color as text on black | 10.36:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
WCAG 2.1: AA normal ≥ 4.5:1, AA large text ≥ 3:1, AAA normal ≥ 7:1, AAA large ≥ 4.5:1, UI components ≥ 3:1.
How does sage green look with color blindness?
Simulated appearance for common types of color vision deficiency. Actual perception varies by individual.
What colors go with sage green
With sage green on broader surfaces, charcoal adds enough depth to keep the system legible without the harsher edge of pure black.
Cream helps sage green read warmer, softer, and less screen-hard than it would beside pure white.
Rust changes how sage green comes across: more food, promotion, and social-first graphics in mood, and less likely to feel isolated or unfinished.
What colors clash with sage green
Lime Green pushes sage green toward a more product UI, sustainability, and general brand work mood, which can fight the wellness, botanical, and lifestyle palettes role the source color usually handles best.
Magenta remaps sage green too aggressively, dragging it away from wellness, botanical, and lifestyle palettes and into a brighter, more performative palette.
How should I use sage green in design?
- •Sage green is one of the few greens that works as a slide background — pair with white or cream text for a calm, distinctive look.
- •Use sage when you want a muted green that can sit behind typography, product shots, or diagrams without stealing focus.
- •Sage + charcoal + cream is a reliable muted palette for editorial decks, packaging systems, and understated brand work.
What are good sage green palettes?
Modern organic
Wellness brands, sustainability reports, and lifestyle presentations seeking a calm, contemporary feel.
Earthy warmth
Food and beverage branding, hospitality materials, and artisanal product presentations.
Design with sage green in Moda
Create a presentation or document using sage green as your accent color. Moda's AI applies your color palette automatically.
Create a design with sage green →What are the shades and tints of sage green?
Shades (darker)
Tints (lighter)
Tones (desaturated)
Hue variations
What are the color harmonies for sage green?
Harmonies are calculated from the base swatch. When a harmony matches a named color page, it links there; otherwise it appears here as a computed reference swatch.
Similar colors
Moss
Moss stays in the same color family as sage green, but the change in value moves it into different layout jobs, especially once backgrounds, charts, or section dividers enter the system.
Olive Green
Olive Green tracks close to sage green in hue, but the value shift changes where each one earns its place: olive green is easier to use for headlines, anchors, and darker sections, while sage green holds onto lighter surfaces and more open applications.
Khaki
Khaki keeps roughly the same visual weight as sage green but changes the undertone story, which is often enough to move a palette from warmer and tactile to cooler and more technical, or the reverse.
Pistachio
Pistachio is a nearby alternative to sage green when the palette needs a different undertone or material cue more than a dramatic contrast change.
Frequently asked questions
What is the hex code for sage green?
The hex code for sage green is #BCB88A. In RGB, that's 188 red, 184 green, and 138 blue. The approximate CMYK equivalent is 0% cyan, 2% magenta, 27% yellow, and 26% key (black).
Is sage green a warm or cool color?
Sage Green reads as warm. It feels most natural with creams, golds, rusts, and other warm accents, while cooler partners like navy or teal create sharper contrast.
Is sage green suitable for broader surfaces and long-form layouts?
Sage Green can hold broader surfaces comfortably because it does not demand attention on every glance. It is a better candidate for full-theme use than a brighter or more electric neighbor would be.
How should I use sage green in a design?
Sage Green has enough restraint to hold large surfaces comfortably, which makes it useful for full theme systems, document backgrounds, or broad section color without constant visual fatigue.
Can I use sage green for text or backgrounds?
Sage Green works better with dark text than white text. Black text reaches 10.36:1 contrast on the swatch, which makes the color more usable as a background or highlight surface than as a dark panel.
More green colors
Keep exploring color resources
All color pages
Browse the full library of color references, pairings, and palettes.
Green colors
Compare sage green with other green tones.
Blue colors
Explore nearby color families to build stronger palettes and contrasts.
Brown colors
Explore nearby color families to build stronger palettes and contrasts.
Neutral colors
Explore nearby color families to build stronger palettes and contrasts.
Last updated April 6, 2026
Color values are computed from the listed hex code using standard conversion formulas. RGB, HSL, and HSV are exact screen-ready conversions. CMYK is an approximate on-screen reference, not a press-ready print specification. Pairings, palettes, and use-case guidance are heuristic recommendations derived from color relationships, contrast behavior, and common presentation, document, and UI patterns.