Sage Green Color Palette
A full study in sage — pale eucalyptus mist down to deep forest, with grey-greens and a warm stone band so it reads as a designed palette rather than one repeated swatch. Soft, calming, and endlessly on-trend for botanical and wellness work. The kind of green that behaves like a neutral.
Get Paintrix free on the App Store.
Download
Hex codes
Color theory
Base
Complement
Analogous −30°
Analogous +30°
Triadic
Use it for
Code formats
CSS
:root {
--sage-green-1: #EAEEE2;
--sage-green-2: #DCE3D0;
--sage-green-3: #CCD6BC;
--sage-green-4: #BBC8A7;
--sage-green-5: #A9BA92;
--sage-green-6: #97AB7E;
--sage-green-7: #87996C;
--sage-green-8: #798B5E;
--sage-green-9: #6B7D51;
--sage-green-10: #5E6F46;
--sage-green-11: #51613B;
--sage-green-12: #445331;
--sage-green-13: #9FAE9C;
--sage-green-14: #8C9D89;
--sage-green-15: #798C77;
--sage-green-16: #677B66;
--sage-green-17: #566A55;
--sage-green-18: #455945;
--sage-green-19: #3C4A35;
--sage-green-20: #34412E;
--sage-green-21: #2C3827;
--sage-green-22: #252F21;
--sage-green-23: #1E271B;
--sage-green-24: #171F15;
--sage-green-25: #CFC7B0;
--sage-green-26: #BDB49B;
--sage-green-27: #A89E84;
--sage-green-28: #928870;
--sage-green-29: #7C735C;
--sage-green-30: #665E49;
}SCSS
$sage-green-1: #EAEEE2;
$sage-green-2: #DCE3D0;
$sage-green-3: #CCD6BC;
$sage-green-4: #BBC8A7;
$sage-green-5: #A9BA92;
$sage-green-6: #97AB7E;
$sage-green-7: #87996C;
$sage-green-8: #798B5E;
$sage-green-9: #6B7D51;
$sage-green-10: #5E6F46;
$sage-green-11: #51613B;
$sage-green-12: #445331;
$sage-green-13: #9FAE9C;
$sage-green-14: #8C9D89;
$sage-green-15: #798C77;
$sage-green-16: #677B66;
$sage-green-17: #566A55;
$sage-green-18: #455945;
$sage-green-19: #3C4A35;
$sage-green-20: #34412E;
$sage-green-21: #2C3827;
$sage-green-22: #252F21;
$sage-green-23: #1E271B;
$sage-green-24: #171F15;
$sage-green-25: #CFC7B0;
$sage-green-26: #BDB49B;
$sage-green-27: #A89E84;
$sage-green-28: #928870;
$sage-green-29: #7C735C;
$sage-green-30: #665E49;Tailwind
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'sage-green': {
'1': '#EAEEE2',
'2': '#DCE3D0',
'3': '#CCD6BC',
'4': '#BBC8A7',
'5': '#A9BA92',
'6': '#97AB7E',
'7': '#87996C',
'8': '#798B5E',
'9': '#6B7D51',
'10': '#5E6F46',
'11': '#51613B',
'12': '#445331',
'13': '#9FAE9C',
'14': '#8C9D89',
'15': '#798C77',
'16': '#677B66',
'17': '#566A55',
'18': '#455945',
'19': '#3C4A35',
'20': '#34412E',
'21': '#2C3827',
'22': '#252F21',
'23': '#1E271B',
'24': '#171F15',
'25': '#CFC7B0',
'26': '#BDB49B',
'27': '#A89E84',
'28': '#928870',
'29': '#7C735C',
'30': '#665E49',
},
},
},
},
};JSON
{
"name": "Sage Green",
"colors": [
"#EAEEE2",
"#DCE3D0",
"#CCD6BC",
"#BBC8A7",
"#A9BA92",
"#97AB7E",
"#87996C",
"#798B5E",
"#6B7D51",
"#5E6F46",
"#51613B",
"#445331",
"#9FAE9C",
"#8C9D89",
"#798C77",
"#677B66",
"#566A55",
"#455945",
"#3C4A35",
"#34412E",
"#2C3827",
"#252F21",
"#1E271B",
"#171F15",
"#CFC7B0",
"#BDB49B",
"#A89E84",
"#928870",
"#7C735C",
"#665E49"
]
}Hex list
#EAEEE2
#DCE3D0
#CCD6BC
#BBC8A7
#A9BA92
#97AB7E
#87996C
#798B5E
#6B7D51
#5E6F46
#51613B
#445331
#9FAE9C
#8C9D89
#798C77
#677B66
#566A55
#455945
#3C4A35
#34412E
#2C3827
#252F21
#1E271B
#171F15
#CFC7B0
#BDB49B
#A89E84
#928870
#7C735C
#665E49