Green sage is a muted and earthy shade that combines green with gray undertones. This color sits within the green spectrum on the color wheel. Its subtle, soothing presence is often associated with calmness and restoration.
Green sage is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- HEX code: #98A869
- RGB value: 59.6% red, 65.9% green and 41.2% blue
Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines.
Here are a few ways to consider using green sage in your designs:
- Create tranquil backdrops and overlays. Green sage as a background creates a serene canvas for users. Layer white text and light icons for optimal readability.
- Design a data dashboard. A muted green sage overlay softens busy information streams, letting users focus on specific data points highlighted with brighter colors.
- Create calming CTAs. Use green sage for "Learn More" buttons that shouldn't compete with a primary call to action.
- Embrace eco-conscious branding. Green sage is a natural fit for sustainable companies. For a spa-like feel, combine it with light beige. Use burnt orange for a touch of warmth.
- Add sophistication with a minimalist touch. Green sage text on a white background adds a subtle touch of color to minimalist interfaces without overwhelming users. Pairing green sage with metallic accents like gold or rose gold buttons or icons creates a high-end aesthetic, particularly for beauty or fashion brands.
Keep in mind that color and its meaning can change from culture to culture—and at any given time. If you are designing for a global audience, research color considerations for your specific regions.
For variations within the same muted and natural spectrum as green sage, consider:
- Olive green (#636B2F) shares green sage's earthy quality with a slightly deeper tone, offering a robust and grounded feel reminiscent of natural landscapes.
- Moss green (#8A9A5B) is lighter and carries a bit more yellow, reflecting the softness of moss underfoot in a forest clearing, closely aligning with green sage's soothing presence.
- Seafoam (#8DDCDC) introduces a hint of blue, providing a cooler, more aquatic variation while maintaining green sage's calm and refreshing feel.
- Pistachio (#93C572) is brighter and slightly more vibrant, offering a cheerful and lively alternative that still resonates with green sage's natural essence.
To complement green sage's understated tones, consider pairing it with:
- Cream (#FDFBD4) offers a soft and warm contrast, enhancing the natural elegance of green sage with its gentle, inviting glow.
- Dusty rose (#DCA1A1) provides a subtle, romantic touch, pairing beautifully with green sage for delicate, understated elegance.
- Slate gray (#6D8196) introduces a modern, sophisticated edge, grounding the softness of green sage with its stable and contemporary vibe.
- Navy blue (#000080) adds depth and richness, creating a striking contrast that elevates green sage's natural tranquility with a touch of classic elegance.
- Burnt sienna (#ED7B58) offers a warm, earthy contrast, echoing the colors of autumn and enhancing the cozy feel of green sage.
Other colors worth considering include lavender for a soft, whimsical palette, charcoal for a bold, grounded look, and soft yellow for a sunny, cheerful vibe.
While green sage is versatile, it may clash with:
- Bright yellow (#FFFF00) can be too vibrant, overshadowing the subtlety of green sage and creating a contrast that might feel jarring.
- Blue (#0000FF), with its intensity, can detract from green sage's muted warmth, leading to a stark and unbalanced combination.
- Neon pink (#FF69B4) offers a bold, vivid contrast that may overwhelm green sage's gentle hue, resulting in a palette that feels overly vibrant or discordant.
- Dark purple (#800080), though rich and regal, might compete too much with green sage, overshadowing its natural serenity with a dominating presence.
- Bright red (#FF0000), while a dynamic color, can create a challenging contrast that competes with green sage's calming and grounded nature, potentially leading to a visually uncomfortable mix.
Green sage symbolizes tranquility, wisdom, and a deep connection to nature. Its muted, earthy tone evokes a refreshing calm and sophistication. This color signifies healing, balance, and growth, offering a mature and comforting presence.
In color psychology, green sage can help reduce stress and anxiety by promoting mental and emotional balance. Sage green encourages reflection and renewal, making it perfect for creating relaxing spaces.
In UI and UX design, green sage fosters a serene user experience, building trust with its calming effect and enhancing visual appeal. Green sage also pairs well with many colors, fitting modern and rustic design themes.
Green sage comes from the sage plant, known for its medicinal properties and dusty green leaves. Since ancient times, sage has been used in various cultures and is associated with health, healing, protection, and wisdom.
In the 18th and 19th centuries, green sage's popularity grew in art, mirroring society's fascination with botany and the natural world. The Victorian era embraced green sage for home decor, using it in wallpapers and fabrics to bring the tranquility of nature indoors. Its muted tones were considered sophisticated and soothing, making it a versatile design choice.
Green sage's natural, calming qualities ensured its continued relevance in the 20th century. It found a place in the arts and crafts movement and later in mid-century modern design, where it helped create serene and harmonious spaces—a counterpoint to the rapid pace of technological advancements.
Color variations
Shades
Tints
Tones
Hues
Color Harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom Palettes
Monochromatic
Complementary
Adjacent
Contrast 2.58
- Large Text
#98A869
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Fail | Fail | |
Fail | Fail |
Contrast 8.14
- Large Text
#98A869
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Pass | |
Pass | Pass | |
Pass | Pass |
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #98A869, known as green sage, has RGB values of R:152, G:168, B:105 and CMYK values of C:0.1, M:0, Y:0.38, K:0.34.
| VALUE | CSS | |
|---|---|---|
| HEX | 98A869 | #98A869 |
| RGB DECIMAL | 152, 168, 105 | rgb(152,168,105) |
| RGB PERCENTAGE | 59.6, 65.9, 41.2 | rgb(59.6%,65.9%,41.2%) |
| CMYK | 10, 0, 38, 34 | |
| HSL | 75.2°, 26.6, 53.5 | hsl(75.2,26.6%,53.5%) |
| HSV (OR HSB) | 75.2°, 37.5, 65.9 | |
| WEB SAFE | 999966 | #999966 |
| CIE-LAB | 66.29, -16.167, 30.708 | |
| XYZ | 29.501, 35.7, 18.701 | |
| xyY | 0.352, 0.426, 35.7 | |
| CIE-LCH | 66.29, 34.704, 117.765 | |
| CIE-LUV | 66.29, -6.767, 42.202 | |
| HUNTER-LAB | 59.75, -16.43, 23.268 | |
| BINARY | 10011000, 10101000, 01101001 | |
| iOS - SwiftUI | Color(red: 152/255, green: 168/255, blue: 105/255) | |
| iOS - UIKit | UIColor(red: 152/255.0, green: 168/255.0, blue: 105/255.0, alpha: 1.0) | |
| Android - Compose | Color(0xFF98A869) |


