#9CAF88

Sage Green color code

Sage Green hex code: #9CAF88 · RGB 156, 175, 136. Also called sage, sage gray-green.

Build a website palette from sage green →

What color is sage green?

Sage green is a soft, grayed green named after the dusty leaves of the culinary herb. There is no single official sage: #9CAF88 is one of the most widely used web values, while many color references list a yellower 'sage' at #BCB88A. Both sit in the same calm, low-saturation zone that makes sage easy to live with.

Sage is a favorite for wellness brands, skincare, home and interiors sites, wedding stationery and anything that wants to feel natural without shouting. On websites it works best as a section background, a card fill or a secondary button rather than the main call to action, because its low saturation doesn't pull the eye the way a vivid accent does.

Pair sage with warm whites and creams for an airy look, or with terracotta and clay for an earthy one. Because sage is a mid-light color, dark text reads well on it; white text on sage usually fails contrast, so use a deeper sage (around #5E7151) if you need a filled button with white label text.

Sage Green variants

Popular color names rarely have one official value. "Reference" values are the ones commonly listed in general color references; "HueWiz pick" values are lighter, deeper or muted versions chosen for interface work. Click a code to copy it.

Traditional sage (reference value)#BCB88Argb(188, 184, 138) · reference

Light sage#C7D2B8rgb(199, 210, 184) · HueWiz pick

Deep sage#6F8460rgb(111, 132, 96) · HueWiz pick

Gray sage#A3A893rgb(163, 168, 147) · HueWiz pick

Sage Green on a real website

The same base color in a light and a dark theme. Surfaces and text are tinted with sage green's hue; links are adjusted until they reach 4.5:1 against the surface. The accent comes from the first palette below.

light theme

StudioWorkAboutContact

Spring collection

Designed around sage green.

A short paragraph shows how body text reads on this surface, with an inline link in the brand color.

Get startedLearn more

NewCard on surface with an accent badge.

Light roles · surface #F4F8F1 · text #1C2117 · link #647551

dark theme

StudioWorkAboutContact

Spring collection

Designed around sage green.

A short paragraph shows how body text reads on this surface, with an inline link in the brand color.

Get startedLearn more

NewCard on surface with an accent badge.

Dark roles · surface #11150D · text #EDEFEA · link #9CAF88

Sage Green color palettes

Hand-picked combinations that work with sage green. Hover a swatch to see its code; click to copy.

Sage Green contrast & accessibility

WCAG 2.x asks for 4.5:1 for normal text (AA), 3:1 for large text and 7:1 for AAA. Ratios are truncated, not rounded, so a pass shown here is a real pass. Check your exact pairs in the contrast checker.

Pairing	Ratio	Normal text	Large text
White text on sage green	`2.35:1`	Fail	Fail
Black text on sage green	`8.90:1`	AAA	AAA
Sage Green text on white	`2.35:1`	Fail	Fail
Sage Green text on near-black #111111	`8.00:1`	AAA	AAA
White text on deeper sage green #697B56	`4.59:1`	AA	AAA

Sage Green shades for Tailwind & design systems

An 11-step 50–950 ramp generated in OKLCH from #9CAF88. Light steps suit backgrounds and borders, middle steps buttons, dark steps text. This is a generated ramp, not an official Tailwind palette.

Tailwind CSS v4

@import "tailwindcss";

@theme {
  --color-sage-green-50: #EEFDE0;
  --color-sage-green-100: #E4F3D5;
  --color-sage-green-200: #D1E1C1;
  --color-sage-green-300: #B8CAA6;
  --color-sage-green-400: #9BAE87;
  --color-sage-green-500: #819170;
  --color-sage-green-600: #68765A;
  --color-sage-green-700: #535E47;
  --color-sage-green-800: #3E4734;
  --color-sage-green-900: #2B3223;
  --color-sage-green-950: #191E13;
  --color-sage-green: #9CAF88;
}

CSS variables

:root {
  --sage-green: #9CAF88;
  --sage-green-rgb: 156 175 136;
  --sage-green-light: #E4F3D5;
  --sage-green-dark: #3E4734;
}

.btn-sage-green {
  background: #697B56;
  color: #FFFFFF;
}

Need semantic roles (surface, text, primary, accent) and exports? Open sage green in the Tailwind color generator.

Sage Green FAQ

What is the hex code for sage green?

#9CAF88 is the value HueWiz uses for sage green; it equals rgb(156, 175, 136). Other common versions include #BCB88A (traditional sage), #C7D2B8 (light sage), #6F8460 (deep sage), #A3A893 (gray sage).

Is sage green a warm or cool color?

With an HSL hue of 89° and 20% saturation, sage green reads as a warm-to-neutral green.

What text color looks best on sage green?

Use dark text. White on #9CAF88 measures 2.35:1 and black measures 8.90:1; WCAG AA needs 4.5:1 for normal text. For white text, deepen it to about #697B56.

What colors go with sage green?

Try sage & terracotta (#9CAF88, #E2725B, #F5EFE6); botanical calm (#F4F1EA, #C7D2B8, #9CAF88); sage & blush (#9CAF88, #E8C4C0, #FAF7F2). Each palette above can be copied or opened in the HueWiz studio.