Sage Green Color

About sage green

Sage green is not a CSS named color, and paint brands use many different sages. #9CAF88 is a commonly used representative value: a medium-light green with low saturation, so it reads as calm and slightly gray.

Some sages lean more olive or gray (around #B2AC88), others more green. The nearest CSS named color is darkseagreen (#8FBC8F), which is a little greener and more saturated.

Sage Green has no single standardized digital value and is not a CSS named color. #9CAF88 is a commonly used representative value; brands, paint and fabric makers use their own variations.

Other colors called sage green

• Grayer sage #B2AC88A more olive, gray-leaning sage.Copy
• Dark sea green (CSS) #8FBC8FThe nearest CSS named color.Copy

Sage Green shades and tints

Shades mix sage green with black, tints mix it with white — useful for hover states, borders and backgrounds. Click a swatch to copy its HEX code.

Colors that go with sage green

Color harmonies based on the hue of #9CAF88: its complement on the opposite side of the color wheel, its analogous neighbours and its triadic partners.

Sage Green contrast and readability

On a sage green background, black text reads best (8.90:1). Here is how sage green works as a text color:

Sage is popular for calm, natural designs — wellness, interiors, weddings. Use it as a background or accent with dark text; pair it with cream, terracotta or deep green.

Using sage green in CSS and HTML

:root {
  --color-sage-green: #9CAF88;
}

.highlight {
  background-color: var(--color-sage-green);
}

.banner {
  background-color: #9caf88;
  color: #000000;
}

.label {
  color: #9CAF88;
  border: 2px solid rgb(156, 175, 136);
}

<p style="background-color: #9CAF88; color: #000000;">
  Sage Green background
</p>