Sage is a soft, green color with gray and brown undertones, giving it a subdued feeling of sophistication. It sits between green and blue on the color wheel, evoking a sense of growth and peace.
Sage is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- HEX code: #BBB791
- RGB value: 73.3% red, 71.8% green, and 56.9% 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 some ways to use sage in your designs:
- Cultivate a natural feel. Its muted green tones allow sage to create a subtle, organic feeling within UI accents and illustrations.
- Show success and progress. Sage, with its gray and brown tones, is great for progress bars when urgency isn't needed.
- Create a relaxing background. Sage’s muted tones make it perfect for backgrounds, offering a soothing atmosphere without distractions, even on larger canvases.
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, tranquil spectrum as sage, consider:
- Green sage (#98A869) is similar to sage, offering a slightly brighter alternative with less brown influences.
- Mint green (#ADEBB3) shares sage’s refreshing nature with a playful touch, inspiring a sense of joy.
- Olive green (#636B2F) is a dark, muted shade of green with a slight yellowish tone.
- Forest green (#2E6F40) is a deep, rich green shade incorporating brown, providing a similar organic feeling.
To complement sage, consider pairing it with:
- Beige (#EDE8D0) pairs nicely with sage, offering an excellent option for contrasting elements.
- Terracotta (#E2725B) is a warm, earthy color that pairs well with sage due to its similar undertones.
- Mustard yellow (#FFDB58) can inject a bit of vibrancy into a sage color palette.
- Baby blue (#8FD9FB) sits next to sage on the color wheel, offering a soft, gentle combo that doesn’t cause conflict.
- Charcoal (#4A4A4A) is ideal for dark, sophisticated accents paired with sage.
Other colors that complement sage include metallic options such as gold and silver, which can add touches of luxury and elegance. Shades of purple, such as lilac and lavender, also work well for tasteful accents.
While sage is subtle, it may clash with:
- Orange (#FFA500) may be too vibrant to pair with sage, overwhelming the color palette.
- Yellow (#FFFF00) features conflicting undertones, which clash with sage’s hue.
- Hot pink (#FF69B4) is a jarring color option that can make sage feel unbalanced.
- Khaki (#F0E68C) may be warm, but its muted appearance creates a dull, low-contrast mix with sage.
- Lime green (#89F336) is too rich in the presence of sage.
Sage represents harmony and growth. Its green undertones connect it to the natural world and feelings of positivity and rejuvenation. Sage also offers connotations of safety and timeless elegance.
In color psychology, sage puts forth feelings of tranquility and calmness. It creates a sense of security, building on green’s ability to make us feel grounded and balanced.
In UI design, ssage is an ideal option to portray sophisticated environmentalism. Its muted tones also make it an excellent choice for clean, minimalistic accents.
Green pigments, typically made from malachite or azurite, have been used since prehistoric times. However, it wasn't until the 19th century that safe alternatives to toxic components, such as Scheele’s Green, were widely adopted. During this period, the term "sage" began to be used to describe a specific color.
Today, sage’s exact hue has become standardized, finding applications in fine art, fashion, and UI design.
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom palettes
Iris Bouquet
Purple Rain
True Drama
Contrast checker
Contrast 2.04
- Large Text
#BBB791
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Fail | Fail | |
Fail | Fail |
Contrast 10.3
- Large Text
#BBB791
- 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 #BBB791, known as sage, has RGB values of R:187 G:183, B:145 and CMYK values of C:0, M:2, Y:22, K:27.
| VALUE | CSS | |
|---|---|---|
| HEX | BBB791 | #BBB791 |
| RGB DECIMAL | 187, 183, 145 | RGB(187,183,145) |
| RGB PERCENTAGE | 73.3, 71.8, 56.9 | RGB(73.3%,71.8%,56.9%) |
| CMYK | 0, 2, 22, 27 | |
| HSL | 54.3°, 23.6, 65.1 | HSL(54.3,23.6%,65.1%) |
| HSV (OR HSB) | 54.3°, 22.5, 73.3 | |
| WEB SAFE | CCCC99 | #CCCC99 |
| CIE-LAB | 73.854, -4.846, 19.88 | |
| XYZ | 42.537, 46.476, 33.517 | |
| xyY | 0.347, 0.379, 46.476 | |
| CIE-LCH | 73.854, 20.462, 103.699 | |
| CIE-LUV | 73.854, 4.475, 28.311 | |
| HUNTER-LAB | 68.174, -7.929, 18.573 | |
| BINARY | 10111011, 10110111, 10010001 | |
| iOS - SwiftUI | Color(red: 0.733, green: 0.717, blue: 0.600) | |
| iOS - UIKit | UIColor(red: 0.733, green: 0.717, blue: 0.600, alpha: 1) | |
| Android - Compose | Color(0xFFBBB791) |
