Skip to main content

Green sage

Everything you need to know about green sage to inspire your next design.

Get color palette

Pick a color

Hex

RGB

HSB

HSL

Pick palette settings

Custom palettes

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.

This is #98A869 text on a #FFFFFF background.
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.

This is #98A869 text on a #000000 background.
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.

VALUECSS
HEX98A869#98A869
RGB DECIMAL152, 168, 105rgb(152,168,105)
RGB PERCENTAGE59.6, 65.9, 41.2rgb(59.6%,65.9%,41.2%)
CMYK10, 0, 38, 34
HSL75.2°, 26.6, 53.5hsl(75.2,26.6%,53.5%)
HSV (OR HSB)75.2°, 37.5, 65.9
WEB SAFE999966#999966
CIE-LAB66.29, -16.167, 30.708
XYZ29.501, 35.7, 18.701
xyY0.352, 0.426, 35.7
CIE-LCH66.29, 34.704, 117.765
CIE-LUV66.29, -6.767, 42.202
HUNTER-LAB59.75, -16.43, 23.268
BINARY10011000, 10101000, 01101001
iOS - SwiftUIColor(red: 152/255, green: 168/255, blue: 105/255)
iOS - UIKitUIColor(red: 152/255.0, green: 168/255.0, blue: 105/255.0, alpha: 1.0)
Android - ComposeColor(0xFF98A869)