Sage Green Color Palette
Botanical · Calming · Organic
A muted, dusty sage green palette — one of the most popular contemporary design colours. Sage sits between green and gray, evoking botanical calm, wellness, and nature without the brightness of pure green. Dominant in 2020s interior design and lifestyle branding.
| Swatch | Name | Hex |
|---|---|---|
| Sage White | #F5F7F2 | |
| Light Sage | #D4DCCA | |
| Sage 300 | #A8BFA0 | |
| Sage 500 | #7A9E72 | |
| Sage 700 | #4F6E49 | |
| Deep Sage | #2D4028 |
Best For
Sage pairs naturally with warm whites, terracotta, and dusty pink. Use lighter sages as background washes, mid-sages for borders and secondary elements, deep sages for typography and brand marks.
CSS Custom Properties
:root {
--sage-100: #F5F7F2;
--sage-200: #D4DCCA;
--sage-300: #A8BFA0;
--sage-400: #7A9E72;
--sage-500: #4F6E49;
--sage-600: #2D4028;
}Tailwind CSS Config
// tailwind.config.ts
export default {
theme: {
extend: {
colors: {
"sage": {
"100": "#F5F7F2",
"200": "#D4DCCA",
"300": "#A8BFA0",
"400": "#7A9E72",
"500": "#4F6E49",
"600": "#2D4028",
},
},
},
},
}Generate a custom palette
Enter any seed colour and generate complementary, analogous, triadic, and monochromatic palettes. Export as CSS variables, Tailwind config, or JSON.
Open Color Palette GeneratorFrequently Asked Questions
What hex codes are in the Sage Green Color Palette?
The Sage Green Color Palette includes: Sage White (#F5F7F2), Light Sage (#D4DCCA), Sage 300 (#A8BFA0), Sage 500 (#7A9E72), Sage 700 (#4F6E49), Deep Sage (#2D4028).
What is the mood of the Sage Green Color Palette?
Sage Green Color Palette evokes: Botanical · Calming · Organic. A muted, dusty sage green palette — one of the most popular contemporary design colours. Sage sits between green and gray, evoking botanical calm, wellness, and nature without the brightness of pure green. Dominant in 2020s interior design and lifestyle branding.
What industries use the Sage Green Color Palette?
The Sage Green Color Palette is popular in: Wellness, Interior Design, Food, Sustainable Fashion. Sage pairs naturally with warm whites, terracotta, and dusty pink. Use lighter sages as background washes, mid-sages for borders and secondary elements, deep sages for typography and brand marks.
What colours pair well with this palette?
This palette pairs well with: cream, terracotta, dusty-pink. Sage pairs naturally with warm whites, terracotta, and dusty pink. Use lighter sages as background washes, mid-sages for borders and secondary elements, deep sages for typography and brand marks.