Sage Background
#9CAF88 · rgb(156, 175, 136)
About the sage background
Sage (#9CAF88) is green desaturated with gray — rgb(156, 175, 136) — named for the herb's soft leaves. It's the definition of understated: organic, calming and effortlessly sophisticated.
It has become the default 'organic modern' background for weddings, skincare and interior brands. Dark olive or charcoal text keeps it accessible, while cream and terracotta complete the earthy palette.
What to use a sage background for
- Wedding and event stationery
- Skincare and natural cosmetics branding
- Interior design and lifestyle moodboards
- Calm, organic-looking website backgrounds
How to use sage in CSS
Copy the snippet below, or click any code chip on this page to grab a single value.
/* Full-page sage background */
body {
margin: 0;
background-color: #9CAF88;
}
/* A single section or element */
.hero {
background-color: rgb(156, 175, 136);
} Sage shades and tints
Click any swatch to copy it. Tints mix sage with white; shades mix it with black.
Sage background FAQ
What is sage green's hex code?
A widely used sage green is #9CAF88 — rgb(156, 175, 136). Sage lives in the low-saturation, mid-lightness zone around hsl(96, 18%, 61%), so variants stay muted and gray-leaning.
Is sage green good for backgrounds?
Yes — its low saturation means it never fights content for attention. Near-black text on #9CAF88 measures about 8.9:1, and cream or white content cards layered on sage look naturally elegant.
What is the hex code for sage?
Sage is #9CAF88 in hexadecimal, rgb(156, 175, 136) in RGB and hsl(89, 20%, 61%) in HSL. Paste #9CAF88 into any CSS background-color property to use it.
How do I set a sage background in CSS?
Add background-color: #9CAF88; to any element, or apply it to the whole page: body { background-color: #9CAF88; margin: 0; }. You can also use the CSS keyword or the rgb() form — rgb(156, 175, 136) — with identical results.